All studies64 / 74
Text
Stroke draw
A wordmark draws its outline letter by letter in champagne, then floods with platinum fill and lets the line go.
Where it earns its place
A one-time brand moment: an intro, a launch page or a case study title where the wordmark should feel made rather than placed.
What we changed
- Rewrote the GSAP timeline with framer-motion: per-letter dash offsets on SVG tspans and a clip rect for the fill, no extra dependency.
- Waits for Syncopate 700 to load before measuring and drawing, so the outline traced is always the brand face, not a fallback.
- The stroke fades out after the fill passes, so the resting wordmark is a single clean colour instead of a double outline.
- Dropped the hover, loop and scroll trigger modes; the draw plays once with a replay control, and reduced motion shows the finished mark.
- Kept the original's structure: two stacked text layers, the viewBox fitted to the measured glyph box, and a left-to-right fill wipe.