Outlined letterforms draw themselves on, then flood with fill.
Every prop is wired to the controls underneath. Any change replays the animation, and the refresh button replays it on demand.
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | "Draw Attention" | The heading copy rendered as measured SVG glyphs. |
strokeColor | string | "#A78BFA" | Color used for the drawing outline. |
fillColor | string | "#F8FAFC" | Color that floods into the glyphs after the outline draw. |
strokeWidth | number | 1.4 | Width of the SVG text outline. |
drawDuration | number | 1.6 | Seconds each character outline spends drawing on. |
fillDelay | number | 0.2 | Seconds to wait after the outline draw before the fill begins. |
stagger | number | 0.05 | Delay in seconds between each character animation. |
ease | string | "power2.out" | GSAP easing used for the outline draw. |
trigger | "mount" | "hover" | "scroll" | "loop" | "mount" | Chooses when the draw timeline starts. |
fillMode | "fade" | "wipe" | "none" | "wipe" | Controls whether fill appears with a fade, left-to-right wipe, or not at all. |
fontSize | number | string | 128 | SVG font size before the responsive viewBox scales the wordmark. |
fontWeight | number | string | 800 | Weight of the rendered letterforms. |
letterSpacing | number | string | -4 | Tracking applied during measurement and rendering. |
reverse | boolean | false | Draws the stagger from the final character back to the first. |
Keyboard shortcuts and ARIA behavior.