Nacre

Written for the variant you picked above: Pearl

Write a WebGL1 full-screen fragment shader background (no libraries): mother-of-pearl. Build a film-thickness field from twice-domain-warped four-octave value-noise fBm at a broad scale, drifting very slowly, so it forms wide silky folds. Take a fairly strong normal from its finite differences so the folds have glossy ridges. Colour by thin-film interference, not a palette: thickness in nanometres = base thickness (about 360nm) + 240 × the field + 70 × sin(26 × the field), the last term laying fine banding along the folds like stacked platelets; optical path difference = 2 × 1.53 × thickness × cos θ, where θ is the angle between the normal and a view direction that leans a little towards the edges of the screen; for red, green and blue at 650, 532 and 450nm take 0.5 + 0.5·cos(2π·OPD/λ + π) (the half-wave flip at the top surface). Nacre only returns a little of the light as colour, so keep it low-contrast: colour = base × (1 + (interference − 0.5) × strength), with strength about 0.38. Shade the thinnest parts slightly towards a shade colour and add a soft specular sheen on the fold ridges from a light to the upper left. The pointer tilts the shell: it leans the view direction and nudges the thickness, easing in with a slow 0.05 lerp, so the colours slide across the surface as you move. An optional fleck mode scatters rare tiny cells that flash saturated colours as they catch the light. Render at 0.7× 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 a pastel CSS conic gradient without WebGL. Children sit above the canvas. Selected variant — Pearl (pearl): Pearl base #f1eef2, shade #cfcbdb, strength 0.38, base thickness 360nm: soft pastel pinks, mints and lilacs on white. 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 tilt the shell; the colours slide across it. Motion: The folds drift very slowly; the tilt follows the pointer with a 0.05 lerp and eases out when it leaves. Reduced motion draws one still frame. Accessibility: Decorative and hidden from assistive tech. The pearl and opal looks are light: use dark text on them; the abalone look is mid-dark and needs a scrim for white text. Responsive behavior: Fills its container at any aspect ratio; device pixel ratio capped at 2. Touch: No tilt on touch; the folds keep 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 tilt the shell; the colours slide across it.

Motion

The folds drift very slowly; the tilt follows the pointer with a 0.05 lerp and eases out when it leaves. Reduced motion draws one still frame.

Accessibility

Decorative and hidden from assistive tech. The pearl and opal looks are light: use dark text on them; the abalone look is mid-dark and needs a scrim for white text.

Responsive

Fills its container at any aspect ratio; device pixel ratio capped at 2.

On touch

No tilt on touch; the folds keep drifting.