Motion & InteractionHectorpattern
Scroll Velocity Bus
One RAF writes --scroll-progress and --scroll-velocity; every atmosphere and stage reads the bus without registering listeners.
Hector: Solid, honourable, high-craft work.
Why it matters
Forty scroll listeners is how a calm archive becomes jank. A single writer and CSS variables keep motion physical and cheap.
Key techniques
- Lenis optional under reduced motion.
- Velocity normalised and decayed toward rest.
- Readers are CSS-only wherever possible.
What to steal
The transferable part.Decay the velocity. Instant zero feels digital; a short settle feels like weight.
What not to copy
Context-specific or costly.Do not start a second Lenis instance inside a widget.
Inclusion rationale
Documents the spine every other surface already depends on.
Technical register
Performance
One RAF for the whole document. Widgets must not add scroll listeners.
Mobile
Touch multiplier tuned separately; passive listeners only in the fallback path.
Accessibility
Under reduced motion, Lenis is off and progress still updates for the reading rail.
Study next
Related entries
HermesWeighted EasingA staggered reveal with its timeline exposed as a scrubbable value, so stagger stops being a feeling and becomes a number.Learning value: 5 of 5NyxLayered Depth FieldFour translucent planes at different parallax depths producing depth with no canvas, no shader, and no main-thread cost.Learning value: 4 of 5HephaestusThe Instanced ForgeFour thousand ingots drawn in a single call, with the draw-call figure published next to the frame time so the cost of the scene is stated rather than implied.Learning value: 5 of 5ZeusThe Parametric SingularityA lightning bolt with no model file — a high-segment cylinder displaced along its own normals by 3D noise every frame, orbited by fourteen shards on an underdamped spring.Learning value: 5 of 5