0..1
StringProgress
Timeline as layout state
Sections expose progress through CSS variables, so typography, scale, opacity, and masks can all respond without React scroll state.
--progress
v_1.2.0Next.js route study
Scroll Tuning Lab
Built with public attributes
A StringTune-heavy route that behaves closer to the official promo site: oversized split text, declarative scroll timelines, parallax layers, and cursor-lit controls.
Open docs
Attribute-driven
runtime60 FPS
progresssplitparallax
StringTune
Public module surface
Small attributes, large motion.
line/word
StringSplit
Text gets a motion skeleton
The headline is split into words and characters, then CSS uses the generated indexes for staggered entrance and scroll-shaped emphasis.
.-s-word
cursor
StringSpotlight
Hover light without handlers
Interactive pills read pointer angle and distance from StringTune, then render a local glare layer entirely in CSS.
angle/distance
source--theatre-progress
Progress composition
Make scrolling visibly author the page.
01top -> bottom
Measure
StringTune measures an element's travel through the viewport.
02--progress
Publish
The runtime writes an eased CSS variable on the source element.
03CSS only
Compose
The design consumes that variable for masks, transforms, and rhythm.
Implementation notes
What changed from the first pass.
01
Object discovery is explicit.
React can keep `string` as a custom DOM attribute. The important part is that StringTune sees `[string]`, while settings can use `string-*` or `data-string-*`.
02
Parallax owns the moving element.
Because StringParallax writes inline transform, extra CSS transforms sit on children or wrappers instead of the parallax node.
03
The demo is CSS-first.
The interaction quality comes from expressive CSS consuming public variables, not from adding more component state.
CSS-FIRST JS-LIGHT CSS-FIRST JS-LIGHT
Result
The page now uses StringTune as the interaction engine.
Scroll to inspect