0..1
StringProgress
把 timeline 當成版面狀態
Section 透過 CSS variables 暴露 progress，讓字體、縮放、透明度與 mask 不用 React scroll state 都可回應。
--progress
v_1.2.0Next.js route study
Scroll Tuning Lab
Built with public attributes
一個更接近官方 promo site 手感的 StringTune route：大型 split text、declarative scroll timelines、parallax layers 與 cursor-lit controls。
Open docs
Attribute-driven
runtime60 FPS
progresssplitparallax
StringTune
Public module surface
Small attributes, large motion.
line/word
StringSplit
文字先生成 motion 骨架
標題先切成 words 與 chars，再用生成的 index 在 CSS 內做 staggered entrance 與 scroll emphasis。
.-s-word
cursor
StringSpotlight
不用 handler 的 hover light
互動按鈕讀取 StringTune 的 pointer angle 與 distance，再用純 CSS 畫出局部 glare layer。
angle/distance
source--theatre-progress
Progress composition
Make scrolling visibly author the page.
01top -> bottom
Measure
StringTune 量度 element 經過 viewport 的 travel。
02--progress
Publish
runtime 會把 eased CSS variable 寫到 source element。
03CSS only
Compose
設計再消費這個 variable 去控制 mask、transform 與節奏。
Implementation notes
What changed from the first pass.
01
Object discovery 要清晰。
React 可以保留 `string` custom DOM attribute。重點是 StringTune 要看見 `[string]`，settings 則可用 `string-*` 或 `data-string-*`。
02
Parallax 會接管 moving element。
因為 StringParallax 會寫 inline transform，額外 CSS transform 要放在 child 或 wrapper，而不是 parallax node。
03
demo 是 CSS-first。
互動質感來自 CSS 消費 public variables，而不是加更多 component state。
CSS-FIRST JS-LIGHT CSS-FIRST JS-LIGHT
Result
The page now uses StringTune as the interaction engine.
Scroll to inspect