PRO

Pixel Cube Field

A grid of RGB-split wireframe cubes that aim at the cursor. Each cube is rasterized the same way as the single Pixel Cube Avatar, twelve edges drawn with an integer Bresenham line into three 8-bit channel buffers with the red and blue passes offset a few degrees from green, and the whole field shares one cell buffer and one canvas. Orientation comes from each cube's offset to the pointer: the cube under the cursor sits head-on and the tilt grows outward, saturating at a set radius, so the grid reads as a lens aimed wherever the mouse is. Cubes are never scaled by distance, so the field stays flat rather than bulging. Every cube eases independently, the fringing widens with how fast each one turned, the focus drifts by itself after three idle seconds, and a click sends a ring of full revolutions outward from the cube you hit. No dependencies.

Component
Install
npx shadcn@latest add https://ui.aryank.space/r/pixel-cube-field.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
gridSize / cellsPerCubenumber / number6 / 17Cubes per side, and the pixel cells each cube box is drawn into. Lower cellsPerCube reads coarser.
maxAngle / radiusnumber / number55 / 3Degrees of tilt reached once a cube is this many cubes from the cursor. Past that the lean stops growing.
smoothingnumber0.12Seconds for a cube to close half the gap to its target angle. Frame-rate independent.
chromDeg / fadenumber / number13 / 0.9Degrees the red and blue passes sit off green, and how much of the previous frame bleeds into this one. Set chromDeg to 0 for a clean wireframe.
autoAnimate / rippleOnClick / rippleSpeedboolean / boolean / numbertrue / true / 2Idle drift after three seconds, the click ripple, and how fast that ripple travels.
size / backgroundnumber / string640 / "#0a0a0a"Rendered size in px, rounded so each cell lands on whole pixels, and the hex backdrop baked into every pixel.
Customize
backgroundcolor

Backdrop the field is rasterized onto.

labeltext

Accessible name for the canvas.

Dependencies
None.