Blur Study Grid
A hundred capsules on a ten by ten grid pivot to face the pointer behind a frosted render pane, with each cell's seeded depth setting its own blur radius, diffusion ramp, opacity, and dithered edge. The original ninety-six depth samples run in one instanced WebGPU draw instead of a hundred separate meshes. Settings change live without restarting the renderer, and verified square PNGs from 2,048 to 24,000 pixels export through tiled GPU readback and stripe-streamed compression.
npx shadcn@latest add @compronents/blur-study-gridInstalls 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 model: blur, blurCurve, blurDistance, paneZ, depthSpread, opacityFalloff, volumeDensity, ditherStrength, rodLength, rodRadius, trackingSpeed. Anything left out keeps the study's own value, and changing it while mounted does not restart the study. |
| 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 | Freezes pointer tracking. 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. |