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.