Scroll utilities

Four scroll behaviours, one listener.

Smooth the wheel, flip the header per section, tween the page tokens at a line you choose, and slide a call to action in where it earns its place. Turn each one on or off from the panel.

Use the keyboard — space, page down, arrows — and the nav anchors. They stay native, whatever the panel says.

01 — Smooth

The wheel glides. Nothing else changes.

Each wheel tick moves a target; the page eases toward it with an exponential lerp, so the speed is the same on a 60 Hz laptop and a 144 Hz monitor. The engine reads only wheel events. Keyboard keys, the scrollbar, find-in-page and screen readers all scroll the page themselves, and the engine simply picks up where the browser left it.

LerpLow values pour, high values snap. Drag the slider and feel the range.

TouchOff on coarse pointers. Phones keep their own momentum.

Reduced motionOff entirely when the reader asks for less movement.

02 — Header theme

The header reads the section beneath it.

Mark a section data-theme-section="dark" or "light". Whichever one holds the header's own midline wins, so the flip lands as the seam passes the bar — not a screen early, not a screen late. Two stacked logos crossfade on the same beat.

Switch on hide on scroll down and the bar leaves on the way down and returns the moment you scroll back up.

Own midlineThe trigger sits inside the header, so tall headers flip late by design.

Scrolled stateA backdrop fades in past a threshold you set.

LogosAny child with data-logo-for crossfades with the theme.

03 — Page tokens

Design tokens tween, not just a class.

Give the kit a map of themes — plain CSS custom properties — and it interpolates every colour on the body as sections cross a line you set. Background, ink, hairlines and panel chrome move together, so the page changes character without a hard cut. Anything that is not a colour swaps at the midpoint.

LineHalf the viewport by default. Move it up for an earlier flip.

DurationSet it to zero for an instant swap.

ScopeWritten on the body, so every child inherits at once.

04 — Sticky call to action

A bar that shows up where it helps.

Drop two sentinels in the page. The bar slides in once the first one enters the viewport and slides out once the second one does — usually the footer. Between them it follows the reader down the page; outside them it stays out of the way.

05 — Together

One listener, one frame, four behaviours.

Every sub-feature reads the same scroll state, measured once per frame behind a single passive listener. Turn them on in any combination; the cost stays the same.

Press H to hide the panel.