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.
npx shadcn@latest add https://ui.aryank.space/r/pixel-cube-field.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 |
|---|---|---|---|
| gridSize / cellsPerCube | number / number | 6 / 17 | Cubes per side, and the pixel cells each cube box is drawn into. Lower cellsPerCube reads coarser. |
| maxAngle / radius | number / number | 55 / 3 | Degrees of tilt reached once a cube is this many cubes from the cursor. Past that the lean stops growing. |
| smoothing | number | 0.12 | Seconds for a cube to close half the gap to its target angle. Frame-rate independent. |
| chromDeg / fade | number / number | 13 / 0.9 | Degrees 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 / rippleSpeed | boolean / boolean / number | true / true / 2 | Idle drift after three seconds, the click ripple, and how fast that ripple travels. |
| size / background | number / string | 640 / "#0a0a0a" | Rendered size in px, rounded so each cell lands on whole pixels, and the hex backdrop baked into every pixel. |
backgroundcolorBackdrop the field is rasterized onto.
labeltextAccessible name for the canvas.