REFERENCE
- Gallery page: https://magpui.com/en/i/draw-and-recolor-a-doodle-78eadf
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/draw-and-recolor-a-doodle-78eadf/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/draw-and-recolor-a-doodle-78eadf/clip.mp4
- Original post: https://x.com/samdape/status/2113665319877374388 by @samdape
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD: Build a compact mobile doodle editor as an overlay sheet, not a whole app. Let users draw a continuous flower-like freehand stroke, undo, clear, replay the stroke and recolor the entire drawing from a five-dot palette. Keep it tactile and quiet.
DESIGN SYSTEM: Target a 320px-wide sheet with an off-white #F4F3ED surface and 28px corners. Center a small two-line monospaced instruction at 13px. Use a roughly 260px square lavender #D8CBE8 drawing area with 26px corners, and a thick 7px rounded indigo #3920D2 stroke. Place small circular confirm and utility buttons at the upper-right and lower-right corners of the drawing area. Below, center undo, trash and redo controls. Finish with a 260px-wide rounded lavender palette tray containing red, orange, indigo, cyan and green dots; the selected dot has a pale luminous halo about 42px wide. Keep gaps around 12–20px.
MOTION: Suggested timings for the observed state changes: pointer drawing updates on the next animation frame with no trailing interpolation. On palette selection recolor all stored paths over 180ms using cubic-bezier(0.2,0,0,1), and move/scale the pale selection halo over 240ms using cubic-bezier(0.22,1,0.36,1). On replay reveal stored strokes in capture order over 1600ms with linear progress; support stop and repeat. Button press scales to 0.94 for 100ms using cubic-bezier(0.2,0,0,1).
SECTIONS: Idle drawing sheet with close control and instruction; editable canvas; confirmation action; replay action; undo/clear/redo row; palette with one selected color. Disable undo and redo when their stacks are empty. Do not infer audio synthesis from the image; expose an optional host playback callback instead.
IMPLEMENTATION: Use SVG paths and pointer events with pointer capture for pressure-independent strokes. Store normalized coordinates, simplify paths after pointer-up and animate replay with path length. Use Motion for selection and button transitions. Provide accessible names, visible focus rings, keyboard-operable controls and an alternative clear/confirm workflow for non-pointer users. Keep paths in refs while drawing and cap stored points at 10000. For prefers-reduced-motion remove scale/halo travel and reveal replay immediately.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts. Map colors to the closest existing tokens. Never copy logos, brand names, photos or illustrations from the original; use placeholders and user-generated strokes.
SUCCESS CHECK:
- Drawing stays within the rounded square and persists across color changes.
- Undo, clear, redo and replay operate on the same stored paths.
- Every icon control and color choice has a label and visible keyboard focus.
