Iron Bloom

Written for the variant you picked above: Ink

Write a WebGL1 full-screen fragment shader background (no libraries): a pool of black ferrofluid seen from a low camera looking down at about 23°, raymarched as a height field (up to 110 steps, each step a third of the height gap, at least 0.004). The surface is gentle crossing sine swells plus a little value noise, drifting slowly, so it reads as slow liquid. Around a magnet it rises into a soft mound topped by a crown of spikes: three cosines 120° apart (the hexagonal lattice ferrofluid forms in a field), raised to the fifth power so they come to points and scaled by a Gaussian of the distance to the magnet so the centre spikes are tallest; the lattice turns very slowly, and the swells calm near the crown. The magnet wanders on its own in a slow loop across the pool, so the crown is always visible; when the pointer is over the background, intersect the pointer's ray with the pool and ease the magnet there (0.05 lerp), then let it wander again when the pointer leaves. Shade it as glossy black: a normal from finite differences, the reflected ray looked up in a dark studio of three soft horizontal softboxes and a hot key light to the upper left, weighted by Schlick Fresnel, so all you see are thin bright reflections sliding over black. An iridescent option tints those reflections by the surface direction, like a petrol film. Fade into the ground colour with distance and vignette the corners. Render at 0.6× device pixels (lower and about 30fps on touch), pause offscreen and in hidden tabs, draw one still frame under reduced motion with the crown standing, and fall back to soft CSS gradients without WebGL. Children sit above the canvas. Selected variant — Ink (ink): Palette { base #050506, light #f2f2f4, tint #30303a }: black fluid with white highlights. 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 over the fluid and the crown of spikes follows it; move away and the magnet wanders off on its own. Motion: The surface flows and the magnet wanders continuously; the pointer pulls the magnet with a slow 0.05 lerp. Reduced motion draws one still frame with the crown standing. Accessibility: Decorative and hidden from assistive tech. Mostly black, so white text reads well away from the crown; use a scrim near it. Responsive behavior: Fills its container; device pixel ratio capped at 2; lighter render and frame rate on touch screens. Touch: No pointer on touch; the magnet keeps wandering on its own. 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 over the fluid and the crown of spikes follows it; move away and the magnet wanders off on its own.

Motion

The surface flows and the magnet wanders continuously; the pointer pulls the magnet with a slow 0.05 lerp. Reduced motion draws one still frame with the crown standing.

Accessibility

Decorative and hidden from assistive tech. Mostly black, so white text reads well away from the crown; use a scrim near it.

Responsive

Fills its container; device pixel ratio capped at 2; lighter render and frame rate on touch screens.

On touch

No pointer on touch; the magnet keeps wandering on its own.