Marble Grid

Written for the variant you picked above: Night

Build a grid of feature cards where the active one fills with liquid marble. Props: items [{id, title, body, icon, color}], theme and motion. Three columns (two below 900px of width, one below 560px) with 18px gaps; cards are at least 300px tall with 28px corners, a near-black fill and a 1px hairline, the icon in a 56px rounded chip at the top-left (tinted in the card's colour) and the title (up to 1.9rem, 600) and a muted line at the bottom. One WebGL canvas serves the whole grid: it lives in a layer that's moved under the active card (positioned to the card's offset box, same radius, behind it) and its colour uniform switches to that card's colour, so there's only ever one context. The shader is a liquid marble: Inigo-Quilez-style double domain warp of four-octave value-noise fBm at a broad scale drifting slowly, mapped from 22% of the colour through the colour to 55% towards white in the brightest folds, with thin dark veins where the second warp field crosses its midpoint, and soft light from the top left. Activating a card (pointer enter, focus or tap) moves the layer there and floods it in with a clip-path circle that grows from where the pointer entered (the centre for keyboard) over 850ms; the card's background turns transparent so the marble shows, its icon chip turns white, its text turns white, and every other card fades to 55%. Leaving the grid (or focus leaving it) clears it. Arrow keys move focus across the grid, Home and End jump. Pause the canvas offscreen and in hidden tabs, draw a still frame under reduced motion (no flood, a short fade instead), and fall back to a CSS radial gradient without WebGL. Selected variant — Night (night): Palette for this theme (Night): --mgrid-card #111112; --mgrid-chip #2a2a2c; --mgrid-ink #f3f3f1; --mgrid-line rgba(255, 255, 255, 0.06); --mgrid-muted #9a9a95. 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 "night". 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: Point at, focus or tap a card to flood it with marble; arrow keys move between cards; leave the grid to clear it. Motion: The marble floods in from the pointer's entry point over 850ms and folds slowly while active; other cards dim over 350ms; the icon chip pops to white. Reduced motion: a 150ms fade over a still marble. Accessibility: Cards are focusable articles with headings; focus shows the same state as hover and arrow keys move between cards. The canvas is decorative; text on the marble is white with a soft shadow. Responsive behavior: Three, two or one columns from the container's width; the marble layer follows the active card's box at every size. Touch: Tap a card to flood it. 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

Point at, focus or tap a card to flood it with marble; arrow keys move between cards; leave the grid to clear it.

Motion

The marble floods in from the pointer's entry point over 850ms and folds slowly while active; other cards dim over 350ms; the icon chip pops to white. Reduced motion: a 150ms fade over a still marble.

Accessibility

Cards are focusable articles with headings; focus shows the same state as hover and arrow keys move between cards. The canvas is decorative; text on the marble is white with a soft shadow.

Responsive

Three, two or one columns from the container's width; the marble layer follows the active card's box at every size.

On touch

Tap a card to flood it.