Pixel Cube Avatar
A wireframe cube rasterized onto a 17 by 17 pixel grid with RGB channel separation. Twelve edges are projected through a two-axis rotation and drawn with an integer Bresenham line into three 8-bit channel buffers; the red and blue passes sit a few degrees off green and scale slightly apart, so the wireframe splits into chromatic fringes, and each frame blends the last one back in so motion smears a decaying trail. It idles still, spins on hover, follows a drag, coasts on release, and returns on a randomized spring to whichever of two rest poses is nearer. A click fires a multi-turn tumble with a decaying sine wobble on top. Canvas 2D and one rAF loop, no dependencies.
npx shadcn@latest add https://ui.aryank.space/r/pixel-cube-avatar.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 |
|---|---|---|---|
| size | number | 320 | Rendered size in px. Rounded so each of the 17 cells lands on a whole number of pixels. |
| background | string | "#161616" | Hex only. It is baked into every pixel, so a transparent or named colour will not work. |
| label | string | "Rotating pixel cube" | Accessible name for the canvas, which has role img. |
backgroundcolorBackdrop the cube is rasterized onto.
labeltextAccessible name for the canvas.