Draw SVG Trace
Draw SVG Trace is a ui entrance & showcase Remotion shot (with a public demo.tsx). Watch the video preview, read the recipe notes, and copy the agent brief to implement it from tuned TSX.
- Category
- UI Entrance & Showcase
- Duration
- stroke 40f + black flash hand-off 16f + hold ≥35f, about 3–4s
- Energy
- Medium
- Styles
- 1
Recipe notes
Stroke-grow circle annotation — an inked stroke with a pen tip traces around the element's outline, "drawing" it; at the moment it closes, a black flash hands off and content fades in; the same trick can draw an underline under titles
When to use it
called-out entrance for a single card/chart/title; element-level technique (the full-page blueprint tracing belongs to wall-reveal-moves variant C)
Intent
"Drawing it out" is the handiest entrance metaphor in the paper-and-ink aesthetic: the element doesn't fly in or fade in — it's traced on the spot by an invisible pen. In-library wall-reveal-moves variant C already has a full-page blueprint version (full-screen wireframes drawn segment by segment + regions lighting up); this card is its **element-level close-up version** — one line, one subject, one closure, with a visible pen tip and a readable direction, suited to the "let's talk about this next" moment. The second use is title underline growth: an 18f short version of the same trick, giving a key word a hand-drawn emphasis, a natural sibling of the marker aesthetic token.