KEYFRAME · Pro 2D Animation Studio

The user wants a professional 2D animation studio — a huge, complex, single-file HTML5 web app with "hundreds of features" (300–400). This is an ambitious build. I need to create something genuinely functional and impressive: a real animation studio with timeline, keyframes, drawing tools, layers, onion skinning, playback, export, etc. Let me think about what a "pro level 2D animation studio" needs, and how I can realistically pack 300–400 discrete, working features/functions into one file: **Core architecture:** - Canvas-based drawing engine with pointer events (mouse + touch, pressure support via PointerEvent.pressure) - Vector or raster? Raster per-frame is simpler and more reliable for hundreds of features. But pro studios (like Toon Boom) are vector. A raster approach with per-frame bitmap layers is like a hybrid of FlipaClip / RoughAnimator — that's actually a well-known pro mobile animation app model. I'll do raster frames with layers (like RoughAnimator/FlipaClip) — cel-based animation. This gives me: drawing tools, layer system, timeline with frames, playback, onion skin, copy frames, etc. **Feature categories (to genuinely count 300+):** 1. **Drawing tools (~20)**: Pencil, ink pen, brush, soft brush, spray, airbrush, eraser, soft eraser, fill, gradient fill, line, rectangle, ellipse, polygon, star, polyline, text, eyedropper, select/move, lasso, transform, smudge, blur, sharpen, lighten, darken, stamp shapes, mirror-draw mode, symmetry. 2. **Brush settings (~25)**: size, opacity, flow, hardness/softness, spacing, jitter, scatter, angle, taper, pressure-size, pressure-opacity, pressure-flow, velocity-based width, smoothing/stabilizer, color jitter, hue jitter, random rotate, dash. 3. **Color (~20)**: color picker (HSV wheel or areas), hex input, RGB sliders, HSL sliders, palette slots (save/load palette), color history, foreground/background swap, recent colors, harmony colors (complement, triad, analogous). 4. **Canvas/Document (~15)**: new doc, resize, presets, background color, transparent bg toggle, grid overlay, safe margins, aspect guides, rotate canvas view, flip canvas view, zoom, pan. 5. **Layers (~25)**: add, delete, duplicate, merge down, merge visible, flatten, reorder (move up/down), opacity, blend modes (~15 blend modes = 15 features), visibility, lock, rename, layer color tint/tag, alpha lock, clear layer. 6. **Timeline (~30)**: add frame, duplicate frame, delete frame, copy, paste, play, pause, stop, loop toggle, FPS setting, scrub, onion skin (before/after count, opacity, tint), frame hold, frame reverse, timeline zoom, drag to reorder frames?, playback range, ping-pong loop. 7. **Animation aids (~15)**: onion skin, ghost overlay, path of previous drawing, timeline thumbnails, playback speed, scrub preview, loop. 8. **Transform/Selection (~15)**: rectangular select, lasso, move, scale, rotate, flip H/V, transform selection content, deselect, select all, invert-selection-ish, clipboard copy/paste/paste-into-frame. 9. **File (~15)**: export GIF, export PNG sequence (ZIP maybe too heavy — could do sequential downloads or a single sprite sheet), export sprite sheet, export current frame PNG, export WebM via MediaRecorder, save project to localStorage, autosave, load project, import image, new project, project stats. 10. **Edit menu (~15)**: undo/redo (big one), cut, copy, paste, clear frame, flip horizontal/vertical, rotate 90 CW/CCW, center, transformations. 11. **View (~12)**: zoom in/out, fit, 100%, rotate view, flip, grid, rulers?, full-screen preview, clean preview, show touch cursor. 12. **Export options**: GIF encoder — I can write a small GIF encoder (NeuQuant + LZW is long... ~300 lines). Alternatively use WebM via MediaRecorder (canvas.captureStream) — simpler and built-in. And sprite sheet PNG — simple. GIF via gif.js CDN? CDN allowed. gif.js is a known library. I could include gif.js from a CDN. But to be safe with offline, maybe implement WebM + PNG sequence + sprite sheet natively, plus GIF via gif.js CDN with fallback. Actually implementing my own GIF encoder: I've written LZW GIF encoders before; it's doable but adds risk. Let me use CDN gif.js — allowed. Hmm, gif.js requires a worker script URL; there's cdnjs gif.worker.js. gif.js can accept workerScript option pointing to CDN. Cross-origin workers... fetching cross-origin script for Worker fails directly, but gif.js uses `new Worker(url)` — cross-origin worker URLs are blocked. Workaround: fetch the script text, create blob URL. gif.js also supports `workerScript` with blob? There's a known trick: fetch gif.worker.js text, make blob URL, pass as workerScript. That works. But it adds complexity and network dependency. Alternative: write my own GIF encoder. A simple approach: quantize to a fixed web-safe 6×6×6=216 palette or median-cut, plus LZW encode. Writing a GIF89a encoder with LZW compression is ~150–200 lines and I know the algorithm well. Given frame counts are modest, a simple global palette per frame (local color table per frame, no dithering or simple ordered dithering) works. Let me write my own compact GIF encoder — it's a signature "pro" feature and fully offline. Yes, I'll write my own GIF encoder with median-cut quantization per frame... actually simplest reliable: for each frame, quantize colors to 255 via a simple uniform RGB 6-7-6 palette... quality would be poor. Median cut is not too bad to implement. Or use NeuQuant-lite... Let me do a simpler robust approach: build a color histogram of the frame, if ≤256 unique colors use exact palette; otherwise median cut. Median cut is ~40 lines. LZW GIF encoder ~60 lines. Manageable. Also WebM export via MediaRecorder — built-in, easy. 13. **Keyboard shortcuts (~30)**: that count as functions? I'll wire shortcuts to existing commands. 14. **UI features (~20)**: dark theme, light theme? theme accent colors, UI scale, left/right handed mode, panels collapse, tooltips, toasts, context menus, modals, sliders. 15. **Extra pro features**: stabilize/smoothing, perspective guides? ruler tools, shape recognition (draw rough shape → snap to perfect line/ellipse/rect), auto lip-sync? too much. Audio track import + waveform + scrub? That's nice for animation studio. Audio: import mp3, play with animation, audio scrubbing. That's maybe 8 features. Could add with