PRO

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.

Component
Install
npx shadcn@latest add https://ui.aryank.space/r/pixel-cube-avatar.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
sizenumber320Rendered size in px. Rounded so each of the 17 cells lands on a whole number of pixels.
backgroundstring"#161616"Hex only. It is baked into every pixel, so a transparent or named colour will not work.
labelstring"Rotating pixel cube"Accessible name for the canvas, which has role img.
Customize
backgroundcolor

Backdrop the cube is rasterized onto.

labeltext

Accessible name for the canvas.

Dependencies
None.