No.171 · Backgrounds· New

Contour Plasma

A slow plasma field stepped into soft contour bands, like a topographic heat map: flat terraces of a four-colour ramp with hairlines at their edges, sliding calmly past each other. The pointer lifts the field around it.

The prompt

Written for the variant you picked above: Dusk

Write a WebGL1 full-screen fragment shader background (no libraries): the classic plasma — the sum of four sine waves (one along x, one along y, one diagonal and one radial from a centre that drifts in a slow loop), running at about a third of the usual speed — normalised to 0–1 and cut into terraces. Multiply by the band count (default 9), take the integer part as the terrace and colour it flat from a four-stop ramp at the terrace's midpoint. Shade each terrace very slightly from its low edge to its high edge so the steps read as relief, and draw a hairline in the line colour at every band edge. WebGL1 has no fwidth without an extension, so estimate the band's change over one pixel with two extra samples and use it to anti-alias the hairline at any zoom. Vignette lightly. The pointer adds a soft Gaussian lift to the field, so the terraces swell around it, easing in and out. Render at 0.9× device pixels (lower and about 30fps on touch), pause offscreen and in hidden tabs, draw one still frame under reduced motion, and fall back to stepped CSS radial gradients without WebGL. Children sit above the canvas. Selected variant — Dusk (dusk): Ramp #14112b → #4b2a6b → #c4577a → #f6c39a with hairlines in #0b0918: night into a peach horizon. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Move the pointer to swell the terraces around it. Motion: The field drifts slowly and continuously; the pointer's lift eases in and out and follows with a 0.06 lerp. Reduced motion draws one still frame. Accessibility: Decorative and hidden from assistive tech. The brightest band can be light; use a scrim behind light text. Responsive behavior: Fills its container at any aspect ratio; device pixel ratio capped at 2; hairlines stay one pixel wide. Touch: No pointer effect on touch; the field keeps drifting. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction: Move the pointer to swell the terraces around it.
Motion: The field drifts slowly and continuously; the pointer's lift eases in and out and follows with a 0.06 lerp. Reduced motion draws one still frame.
Accessibility: Decorative and hidden from assistive tech. The brightest band can be light; use a scrim behind light text.
Responsive: Fills its container at any aspect ratio; device pixel ratio capped at 2; hairlines stay one pixel wide.
On touch: No pointer effect on touch; the field keeps drifting.