Lego Dither
A spinning 3D marble hand rebuilt from a six-frame Lego stud sprite sheet. The hand renders into a luminance buffer, a fullscreen shader selects one colored stud per cell, and pointer movement rotates the model while painting a fading, warping trail through the same dither field. A self-contained Three.js interpretation of DEEO Studio's 3D Lego Dither artifact.
npx shadcn@latest add https://ui.aryank.space/r/lego-dither.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 |
|---|---|---|---|
| modelUrl / spriteUrl | string / string | BLANK-hosted Lego Dither assets | GLB hand model and horizontal six-glyph sprite sheet. |
| cellSize / modelScale | number / number | 7 / 1.15 | Stud size in CSS pixels and normalized hand scale. |
| spinSpeed / pointerRotation | number / number | 0.26 / 0.15 | Automatic Y rotation and pointer-driven X/Z rotation. |
| trailSize / trailDecay / distortion | number / number / number | 0.041 / 0.08 / 0.18 | Pointer stroke width, color-step delay, and hand scatter. |
| className | string | — | Optional class applied to the full-size canvas wrapper. |
modelUrl / spriteUrlasset-urlBlob-hosted GLB and six-frame Lego stud sprite sheet used by the two render passes.
cellSize / modelScale / spinSpeedtextStud resolution, fitted hand size, and autonomous rotation speed.
pointerRotation / trailSize / trailDecay / distortiontextPointer tilt, stacked-color trail timing, and the hand scatter strength.
three