The eye is a light source.
A radial gradient follows the cursor, gently darkening the room around it. The document becomes a stage lit from wherever the reader is looking.
Capability 08 — Ambient layers
Environmental polish, composable.
Four restrained layers stacked over ordinary typography. Toggle them on and off to see each contribution, and every combination in between. None of it shouts; all of it lifts.
The difference between decoration and atmosphere is that atmosphere is felt before it’s seen.
Every surface has a texture.
An SVG fractal-noise filter, sampled once and tiled, multiplies at 18% opacity. Nothing animates; the texture is the point. Without it, the page looks like a screenshot of a page.
Nothing is ever really still.
Twenty-four tiny earth-toned rectangles drift upward, swaying on sine waves, pulsing in opacity. Below the threshold of distraction, above the threshold of dead.
The sky changes as the story does.
Three radial gradients crossfade as you scroll — dawn light at the top, warm interior in the middle, deep night by the end. The scrollbar becomes a clock.
How this is built
Four layers, individually cheap, collectively cinematic.
Each primitive is under a hundred lines. None of them are novel — what matters is that they compose cleanly, respect reduced-motion, and tear down on route change without leaking rAF loops or event listeners. Every file below is open in the repo.
01CursorSpotlightRadial gradient pinned to the pointer, lerped at 0.18 for smoothness. Auto-disables on touch devices.View source
02GrainOverlayInline SVG fractal-noise filter, tiled at 320×320 and multiplied at 18% opacity. Static — the texture is the point.View source
03AmbientParticles24 earth-toned rectangles drifting up a canvas, swaying on sine waves. Pulses in opacity, pauses on visibilitychange.View source
04AtmosphereShiftThree radial gradients crossfaded by scrollYProgress via motion/react's useTransform. Warm-stone palette here.View source
05Layer togglesEach layer is a plain component toggled by local state. Lets you see the contribution of each, and every combination.View source
06prefers-reduced-motionAll four layers disable when the user opts out. The typography still reads; the ambience is surplus, not essential.View source