Scroll-Driven Sticky Text Reveal

Scroll-Driven Sticky Text Reveal is a high-end typographic interface. It utilizes modern CSS scroll timelines to synchronize the visual state of a list with the user’s scroll position. As items move through a designated “focal point,” they transition from a dimmed state to a vibrant highlight, creating a seamless reading experience.

Specs

• Engine: CSS Scroll-driven Animations (view-timeline).
• Typography: Fluid scaling using pow() and clamp().
• Architecture: Organized via CSS @layer (normalize, base, stick, effect).
• Logic: 100% CSS-driven animations (JS used for config only).

Anatomy

The layout relies on a specific structural relationship between a sticky container and its children.

• HTML: A header serves as the sticky chassis. Inside, a section contains the static prompt (“you can”) and a ul list of actions. Screen-reader-only text ensures accessibility.
• CSS: The “Highlight” is achieved through background-attachment: fixed. The gradient is anchored to the viewport, while the text scrolls through it. @layer prevents specificity wars, and light-dark() handles theme color switching natively.
• JS: Minimal. It updates data-attributes for themes and CSS variables for live-tuning. It also wraps updates in document.startViewTransition for smooth theme cross-fades.

Logic

The elegance of this snippet lies in the “Fixed Masking” technique. Instead of calculating the position of each list item, the code uses a viewport-fixed background on the text itself.

li {
  background: linear-gradient(
    180deg,
    var(--dimmed) 0 calc(var(--start) - 0.5lh),
    var(--accent) calc(var(--start) - 0.55lh) calc(var(--start) + 0.55lh),
    var(--dimmed) calc(var(--start) + 0.5lh)
  );
  background-attachment: fixed;
  color: #0000;
  background-clip: text;
}

By setting background-attachment: fixed, the gradient remains stationary relative to the screen. As the text (clipped to the background) scrolls, it “passes through” the accent color at the exact same physical coordinates every time.

Feel

The experience is precise and tactile. The use of scroll-snap-type: y proximity provides a magnetic pull to the text, ensuring that words land perfectly within the focal point. It feels like a high-end physical dial, where digital information snaps into focus.