Obsidian Flow

Written for the variant you picked above: Dark

Build a full-bleed animated background: glossy black liquid under a faint grid, with no text, nav or buttons of its own, and an optional slot for content laid over it. Shader (one WebGL full-screen triangle): domain-warped fbm (four octaves, two levels of warp, drifting at 0.06 of time) read as a height field. Take the normal from finite differences (scaled 0.32), light it with one cold key from the upper right (0.35, 0.55, 0.75): a tight specular (power 22) in a pale steel #9fb4cc at 0.7, a broad sheen (power 4) and a strong Fresnel rim (×1.25) in #2b3a4c over a near-black #07090c base, so the surface reads as small, many swirls of wet obsidian. A gloss prop (0.4 to 1.6) scales both reflections. The liquid darkens toward the bottom of the frame. A fine mouse pointer adds a small circular ripple (sin of distance × 26, fading with distance) that eases in and out. Over it: a square grid of 1px lines at 5.5% white, cells about 7% of the width (56 to 136px), and a floor gradient over the bottom 22% fading to black. Performance: render at 0.6 of the device pixels (0.45 on touch, about 30fps there), pause offscreen and in hidden tabs. Reduced motion or motion={false} renders one still frame. Without WebGL a radial gradient (#1b2430 to #07090c) stands in. Selected variant — Dark (dark): Palette for this theme (Dark): --obsf-fallback radial-gradient(80% 70% at 60% 40%, #1b2430, #07090c 70%); --obsf-floor #000000; --obsf-grid rgb(255 255 255 / 0.055). Treat these as the root colour tokens, one value per role, and name them to suit your code. Select it with the theme option set to "dark". Keep every dimension, spacing value, state and motion from the brief unchanged, and keep text at 4.5:1 contrast or better on these surfaces. 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: A fine pointer leaves a soft ripple in the liquid; nothing else responds. Content placed inside works as normal. Motion: Continuous slow folding; the ripple eases in over about half a second and out when the pointer leaves. Paused offscreen and in hidden tabs; still under reduced motion. Accessibility: Decorative: the canvas and grid are aria-hidden and it has no text. Anything placed over it needs its own contrast check (white text on the dark version passes easily). Responsive behavior: Fills its container at any size; the grid cells scale with the width. Touch: No ripple on touch; the liquid keeps folding at a lower frame rate. 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

A fine pointer leaves a soft ripple in the liquid; nothing else responds. Content placed inside works as normal.

Motion

Continuous slow folding; the ripple eases in over about half a second and out when the pointer leaves. Paused offscreen and in hidden tabs; still under reduced motion.

Accessibility

Decorative: the canvas and grid are aria-hidden and it has no text. Anything placed over it needs its own contrast check (white text on the dark version passes easily).

Responsive

Fills its container at any size; the grid cells scale with the width.

On touch

No ripple on touch; the liquid keeps folding at a lower frame rate.