Scroll Morph
Display typography that morphs letter-spacing from wide-spaced to compressed as you scroll — an editorial typographic journey in one word.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| accentColor | string | "#a855f7" | Accent color for the eyebrow label, divider line, and tag pills |
| word | string | "UILORA" | The display word to morph — works best with 4–8 uppercase characters |
| subtext | string | "The component library for premium interfaces" | Supporting text that fades in once the letters converge |
When to Use
Use as a brand statement hero, section divider, or loading screen. One word at enormous scale scrolling through three typographic states creates a memorable brand moment.
Best Practices
Short words (4–7 chars) work best — they fill the viewport cleanly. Use all-caps for maximum impact. The subtext should be one short sentence that lands the brand promise.
Why This Component Matters
Letter-spacing morphed by scroll progress is rarely seen in production — it requires understanding both CSS and MotionValues deeply. When done right, it makes the brand feel like it has physical weight.
FAQ
QCan I use a multi-word phrase?
Yes — but use a short phrase (2–3 words max). Longer text will overflow on mobile.
QHow do the three phases work?
Phase 1 (0→0.32): letters expand to 0.7em spacing. Phase 2 (0.32→0.66): converge to natural. Phase 3 (0.66→1): compress slightly to -0.04em.
QCan I add a background image?
Yes — add an absolutely-positioned img or video inside the sticky container, behind z-index 10.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.