Blur Study Box
Sixty-four Box3D capsule bodies move behind a frosted render pane, with depth controlling each capsule's blur radius, diffusion ramp, opacity, and dithered edge. The original ninety-six depth samples run in one instanced WebGPU draw instead of sixty-four separate meshes. Drag bodies through a spring joint, set the optical and physical model through props, and export verified square PNGs from 2,048 to 24,000 pixels through tiled GPU readback and stripe-streamed compression.
npx shadcn@latest add @compronents/blur-study-boxInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| Prop | Type | Default | Description |
|---|---|---|---|
| settings | Partial<StudySettings> | source defaults | Optical and physical model: blur, blurCurve, blurDistance, paneZ, opacityFalloff, volumeDensity, ditherStrength, boxDepth, rodLength, rodRadius, popStrength, popTempo, showFloor. Anything left out keeps the study's own value. |
| renderScale | number | 1 | Device pixels per CSS pixel. Cost scales with its square, so 2 is four times the work of 1. |
| paused | boolean | false | Holds the simulation still. Reduced-motion users get this regardless. |
| ref | Ref<{ exportPng }> | — | Imperative handle. Call exportPng(size, onProgress?) to render and download a print-size PNG. |
| className | string | — | Optional class name for sizing the study container. Give its parent an explicit height. |