Pigment Shore

Written for the variant you picked above: Tide

Write a WebGL1 full-screen fragment shader background (no libraries): a grainy bank of coloured pigment along the bottom edge under a deep, empty sky. The bank's height along x is about 0.2 of the screen, rising to 0.6 at the far left and a little at the far right, roughened by slow noise; the pointer raises a soft bump in it under its x. Body = smoothstep(h + 0.1, h − 0.22, y), with a fine noise on y so the top edge is ragged. Inside, a cloud fBm sets brightness, squared after smoothstep(0.22, 0.74) so there are dark holes as well as bright billows. Crystallise it: compute Voronoi cells at 52 per screen height and blend the cloud value 70% towards the value at each cell's centre, so the pigment breaks into tiny flat flakes; lighten slightly towards cell centres and darken their borders a touch. Colour runs left to right through three pigments, the boundaries wobbled by noise; add two hot hearts, one low on the left and one at the bottom right, and a whitened highlight on the brightest parts. Sky colour above, a little lighter near the bank. Finish with animated film grain, stronger inside the pigment. Render through a small WebGL1 harness: a full-screen triangle, the device pixel ratio capped at 2 and scaled down (and about 30fps) on touch, paused offscreen and in hidden tabs, one still frame under reduced motion, the pointer eased in with a slow lerp and released when it leaves, and a CSS gradient fallback without WebGL. Add a little per-pixel noise so the gradients never band. An optional fade prop softens the bottom edge into the ground colour: a gradient to the ground plus a backdrop blur masked to grow towards the edge. Children sit above the canvas. Selected variant — Tide (tide): Cyan bleeding through indigo into red: top #03060f, left #2aa4e4, mid #3c2f8a, right #f2333a. 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 along the bottom and the bank swells under it. Motion: The pigment drifts and billows slowly; the grain crawls. Reduced motion draws one still frame. Accessibility: Decorative and hidden from assistive tech. Put text in the dark upper part, in white. Responsive behavior: Fills its container at any aspect ratio; device pixel ratio capped at 2. The optional fade softens the bottom edge into the ground colour. Touch: No swell on touch; the pigment 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 along the bottom and the bank swells under it.

Motion

The pigment drifts and billows slowly; the grain crawls. Reduced motion draws one still frame.

Accessibility

Decorative and hidden from assistive tech. Put text in the dark upper part, in white.

Responsive

Fills its container at any aspect ratio; device pixel ratio capped at 2. The optional fade softens the bottom edge into the ground colour.

On touch

No swell on touch; the pigment keeps drifting.