Stroke Draw-On Reveal text animation: the word aimotions animated in this style
112KineticSVG

Stroke Draw-On Reveal

Outlined letters draw themselves on, contour by contour, in three offset colored strokes before a liquid fill floods the front layer. The classic trim-path reveal of logo animations, explainer titles and signature intros.

Prompt · replace [TEXT]

Tool-agnostic
Reveal the word [TEXT] with a trim-path draw-on. Use a heavy high-contrast italic serif, huge and centered on deep navy with a faint dot grid. First, thin butter-yellow outlines trace every contour of each letter from start to end with a smooth ease and a short stagger per letter; a mint outline offset a little up-left follows a beat later, then a cream outline at the front, so three stacked contours form a diagonal echo. Next a coral liquid fill floods up inside the front letters behind a gently waving surface. On the hold, a short bright comet of light keeps racing around every outline. To loop, the strokes retract in the same direction they were drawn and the fill drains away.

Visual DNA

  • Every glyph contour traced from start to end, like a pen on a path
  • Three stacked outlines offset diagonally: butter, mint, cream
  • Wavy liquid fill rises inside the front letters
  • A short bright comet keeps running around the outlines on the hold
  • High-contrast italic serif on deep navy with a faint dot grid
Category
Kinetic Typography
Demo built with
SVG
Energy
Calm
Background
Dark bg

Also known as

Support
Keep aimotions free

No paywall, no sign-up. If a prompt saved you an hour, a coffee keeps new styles coming.

Buy me a coffee

Keys: ← → browse · C copy

Use this style

  1. Step 01Copy the prompt

    It describes the Stroke Draw-On Reveal look (composition, type, palette, texture and timing) without tying you to a tool.

  2. Step 02Replace [TEXT]

    Swap in your word, product name or headline. Short words (4–12 letters) read best in most styles.

  3. Step 03Ask for a format

    Paste it into Claude Opus 5.5, Claude Sonnet 5.5, Claude Fable 5.5, GPT-6 Astra or GPT-6.1 Sol, or a newer model, and request a single HTML file, a component, a shader or a brief. For a hero heading, use “Copy for website title”.

Website titles →Prompt guide →

098KineticCanvas

Echo Trails

echo text effect · repeating text trail · stacked color echo · motion trail typography

Details →
001ReactiveSVG

Bulge Warp Grid

op art hover · bulge distortion text · gravity well cursor · lens warp lines

Details →
041CraftCSS

Pop-Up Book

pop up book text · paper pop up letters · popup card animation · paper engineering

Details →

Keep it free.

aimotions has no paywall and no sign-up. It is funded by people who found a style they love. A coffee on Ko-fi helps pay for hosting and the next batch of styles.

Support on Ko-fi ♥