Surface study no. 04
A studio for identities that move. We cast brands in liquid metal, then let them settle into something you can hold.
A live WebGL background of polished, book-matched marble: domain-warped veins of varying width that fade in and out along their length, finer hairline veins, a sparse crackle, a warm metallic tint at the vein edges and a cloudy translucent depth around them, mirrored around a hairline joint the way two slabs are opened like a book. The stone is rendered once into a texture; only the polish moves, a large softbox reflection that drifts slowly across the surface, shimmers through a fine micro relief and follows the cursor. Colors, scale, vein count, warp, book matching, gloss and speed are all props. The veins surface softly out of the flat ground on load; it pauses offscreen, holds a still frame for reduced motion and shows a soft stone gradient without WebGL.
The import and the props worth knowing about, in one place.
import { MarbleSlab } from "@/components/beste/component/marble-slab";
// As a layer behind content
<section className="relative min-h-[40rem]">
<MarbleSlab className="absolute inset-0" />
<div className="relative">...</div>
</section>
// A dark Nero Marquina with white veins
<MarbleSlab
className="min-h-[32rem]"
groundColor="#16161a"
veinColor="#e9e6e1"
accentColor="#8a8f99"
veins={0.7}
warp={0.8}
bookMatch={false}
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
groundColor | string | — | The stone's ground, the bright body between the veins. |
veinColor | string | — | The main veins and the cloudy shadows around them. |
accentColor | string | — | A metallic warmth that gathers along the edges of the veins. |
scale | number | — | Size of the pattern; higher values show more of the slab. |
veins | number | — | How many major veins cross the slab, 0 to 1. |
warp | number | — | How much the veins bend and wander, 0 to 1. |
bookMatch | boolean | — | Mirror the slab around a center joint, the way two cut slabs are opened like a book. |
gloss | number | — | Strength of the polished reflection, 0 to 1. |
speed | number | — | Speed of the studio light drifting across the polish, 1 is the default pace. |
interactive | boolean | — | The reflection follows the cursor. |
paused | boolean | — | Freeze the light where it is. |
className | string | — | |
children | ReactNode | — |