Material Spotlight
A cursor-driven material reveal on a 3D model. A near-matte standard material lit by a room-environment IBL gets a shader patch that carves a soft sphere of low-roughness, darker diffuse around the pointer's world-space hit — a wet, polished spotlight that follows the cursor and eases away. Three.js + WebGL.
npx shadcn@latest add https://ui.aryank.space/r/material-spotlight.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | "…/material-spotlight/model.glb" | Model URL (.glb / .gltf), same-origin or CORS-enabled. |
| background | string | "#dddcd7" | Clear / background color. |
| radius | number | 0.15 | Radius of the polished spotlight, in world units. |
| softness | number | 0.35 | Soft falloff width past the radius. |
| lerp | number | 0.05 | Follow easing for the hit point and activation per frame. |
| exposure | number | 0.65 | ACES tone-mapping exposure. |
backgroundcolorClear color behind the model.
radius / softnesstextSize of the polished sphere and the feather past its edge.
srcasset-urlGLB model, hosted through https://ui.aryank.space/assets/material-spotlight/model.glb.
three