Data-viz / scrollytelling · 12.6
Item-reactive background gradient
A bias light behind a TV, changing with the scene.
A background gradient that belongs to whichever item is in front of you, interpolating as scroll advances the carousel.
4 knobs
How it actually works
The obvious build is to sample the image and derive the colours at runtime. Do not. The verified source does not, and per-frame colour extraction would be the most expensive thing on the page for a result a designer could have chosen better in ten minutes. This is a rare case where the cheap way and the good-looking way are the same way, and both of them are "decide in advance".
Each item carries a hand-authored three-colour mood palette: a background and two accent blooms. Scroll advances a continuous index through the carousel, and the background is the interpolation between the palettes of the two items you are between, mixed on the fractional part. The verified cousin interpolates on camera depth rather than scroll offset; the principle is identical and it is the one that matters: the palettes are authored, not extracted.
The knobs, named
Palette, interpolation basis, blend width, transition duration. The palette knob is the argument: three authored colours per item, swapped live, and none of them measured off a pixel.
| Knob | Source | What it teaches |
|---|---|---|
| Palette set | sourced | Three colours per item: a base and two blooms. Authored, never extracted. Swapping the whole set re-tints every item at once. |
| Interpolation basis | sourced | Continuous mixes between neighbours as you travel. Nearest snaps to the item in front, which is what most implementations actually do and why they flicker at the midpoint. |
| Blend width | ours | How much of the gap between two items is spent mixing. Narrow it and a continuous basis starts to behave like a snapping one. |
| Bloom spread | ours | How far the two accent blooms reach. This is the difference between a tinted panel and a light behind the screen. |
sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.
Evidence
INFERRED
Codrops "Building a 3D Infinite Carousel with Reactive Background Gradients" (2025) is INFERRED. The mood-palette cousin is VERIFIED (author): Codrops "Scroll-Reactive 3D Gallery with Three.js, Velocity, and Mood-Based Backgrounds" (2026), which is where the three-colour palette and the interpolate-between-neighbours mechanism come from. The entry is not upgraded on the strength of its cousin.
- Seen on
- Codrops reactive-background articles.
- Dependencies
- Canvas 2D + a 3D carousel layer in the source (specific libraries UNVERIFIED); vanilla CSS gradients + one rAF (ours)
- Difficulty
- moderate
- Performance
- Two property writes per frame on one element. The costly version of this feature, per-frame colour extraction, is the version you must not build.
- Accessibility and the floor
- Background only, so it is aria-hidden and carries no information: every item states its own name in text. Under .anim-gating the field renders at the first item's palette, complete and static.
Notes
Composability. It is the room, not the furniture. Anything scroll-driven can live in front of it, and the ring (1.13) in particular looks like it was designed for it.