The scroll-zoom "flying through text" effect

A lot of premium-feeling product pages open with a sequence where a giant word sits centered on screen, then as you keep scrolling it rushes toward you — scaling up far past the viewport, fading out right as the next word arrives small and settles into place. It reads like a camera flying through a tunnel of oversized text. It's genuinely just a handful of numbers on a timeline, no video, no WebGL, no scroll-jacking.

Eachwordownsasliceofoneshared0-to-1scrollvalue.Nothingishappeningsimultaneouslybyaccident—everyword'sarrivalandexitisadeliberatewindowonthesametimeline.

The section wraps a tall, pinned container — same position: sticky pattern as the sheet-stack section — and useScroll reports one continuous 0-to-1 value for how far you've scrolled through it. Each word divides that range into its own slot: it starts small and transparent, scales up to a resting size and full opacity, holds there while you keep scrolling, then — in its exit window — scales up roughly nine times its resting size while fading out, at the exact moment the next word is entering its own slot at a small scale. The overlap is what sells the illusion: word one is mid-exit while word two is mid-entrance, occupying the same few frames.

typescript
// Each word gets four checkpoints on the shared 0–1 timeline:
// [enterStart, settled, exitStart, exitEnd]
const scale = useTransform(
  progress,
  [enterStart, settled, exitStart, exitEnd],
  [0.55, 1, 1, 9]     // small → resting → resting → huge
);
const opacity = useTransform(
  progress,
  [enterStart, settled, exitStart, exitEnd],
  [0, 1, 1, 0]        // fades in on arrival, fades out on exit
);

Scaling from 1 to 9 is the easy half. The part that makes it read as flight rather than "a word getting bigger" is that the opacity fade-out is compressed into a much narrower window than the scale-up — the word is still small-ish and readable for most of its exit, then rushes past full size and vanishes in the last few percent of its slot. If opacity faded out at the same rate as the scale grew, the word would just get faint and huge at the same steady pace, which reads as dissolving, not approaching. The mismatch between how fast it scales versus how fast it fades is the whole trick.

scrollYProgress itself is not smoothed — it's an exact, sometimes-jittery reflection of scroll position, especially on a trackpad sending rapid small deltas. Every transform in this sequence reads from a useSpring-wrapped copy of that value instead of the raw one, which is what keeps a giant word's scale from visibly stepping instead of gliding when your scroll input isn't perfectly smooth. It's a small addition — one extra hook — for a section where any stutter in a 9x scale-up would be the first thing anyone noticed.