CSS Scroll-Driven Circular Typographic Scramble

This is a Scroll-Driven Circular Typographic Scramble. It utilizes experimental CSS animation-timeline to bind complex trigonometric and geometric transitions directly to the user’s scrollbar. Its function is to create a highly engaging, interactive hero section where chaotic, scattered letters perfectly align into a readable circular sentence as the user scrolls down.

Specs

• Weight: ~3 KB. No external libraries. No JavaScript.
• Performance: Ultra-high. All animations and mathematical interpolations (calc()) are handled natively by the browser’s CSS compositor on the GPU, completely avoiding JavaScript scroll event listeners which often cause layout thrashing.
• Theming / Customization: Driven entirely by CSS variables (--circle-size, --letter-spacing, --cta). Includes native light/dark mode support via the light-dark() color function.
• Responsiveness: Fluid. Uses clamp() for typography and vw units for the circle radius, ensuring perfect scaling across all screen sizes.
• Graceful Degradation: [!] Highly experimental. Relies on animation-timeline: scroll() and @property. In unsupported browsers (currently Safari and Firefox), the component utilizes a @supports block to display a fallback warning message, while the text remains static.

Anatomy

The structure breaks a sentence down to the atomic letter level for precise CSS targeting.

• HTML (The Skeleton): An unordered list <ul> where each <li> is a word. Each word is broken into individual <span> tags for letters. Crucially, the <li> uses aria-label to provide the full word to screen readers, while the spans are hidden with aria-hidden="true".
• CSS (The Skin): Organized into modern @layer blocks (base, mouse, demo). It uses sibling-count() and sibling-index() (experimental Chrome features) to mathematically determine each letter’s unique starting position and final resting angle on the circle.
• JS (The Nervous System): Absent. Interaction is purely scroll-driven via CSS.

Logic

The core visual trick relies on mapping a custom CSS property to the scroll timeline:

@property --rotate {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
/* ... */
animation: --scroll-rotate;
animation-timeline: scroll(root block);
/* ... */
--letter-angle: calc(var(--letter-scramble-angle) * (1 - var(--rotate)));

Instead of tracking scroll depth via JS, the CSS native animation-timeline: scroll() gradually interpolates the --rotate variable from 0 to 1. Every single letter <span> calculates its own --letter-angle based on this shared variable. At scroll 0, the multiplier is 1, scattering the letters wildly based on their index. At scroll max (--rotate: 1), the multiplier becomes 0 (1 - 1), snapping every letter perfectly into its final calculated position on the circle radius.

Feel

Mesmerizing and mechanical. As you scroll, the chaotic letters don’t just fade in; they fly from off-screen, spiraling inward with mathematical precision. Because the animation is directly bound to the scroll wheel rather than a time duration, the user has absolute control over the speed, pausing, or reversing the effect instantly, making it feel highly tactile and responsive.