Backgrounds
The two atmospheres that power the live site, lifted into the system as drop-in components. Move your cursor over the grid — it lights the cell beneath it.
Noir glow · live shader
NoirGlowBackground from @tollerud/ui — the packaged @paper-design/shaders-react grain atmosphere (corners shape, yellow ramp, animated). Requires @paper-design/shaders-react in the host app.
<div className="relative min-h-[280px]">
<NoirGlowBackground intensity="medium" speed="medium" className="absolute inset-0" />
<div className="relative z-20">{children}</div>
</div>Noir glow · CSS fallback
Pass forceCssFallback for static export, reduced-motion, or when WebGL is unavailable.
<NoirGlowBackground
intensity="medium"
preserveCenter
forceCssFallback={false}
className="absolute inset-0"
/>Grain gradient · CSS only
A pure-CSS approximation using the same yellow ramp and corner composition — zero WebGL cost. NoirGlowBackground uses a similar fallback when forceCssFallback is set.
Hero readability treatments
Four ways to keep copy readable over the live grain gradient: a local blur scrim, a full-hero blur, a broad left-side shadow, or a scaled/offset shader that keeps motion toward the edges.
Animated grid
A scrolling canvas grid that fades to #060606 at the edges and fills the square under the cursor. Direction, speed, cell size and colors are all props.
<Squares
direction="diagonal" // right | left | up | down | diagonal
speed={0.5}
squareSize={40}
borderColor="#333"
hoverFillColor="#222"
base="#060606"
/>In use
The grain gradient backs the Overview hero; the grid suits full-bleed section dividers and empty states. Both sit behind content at a lower z-index — keep foreground on z-20+.