gamma logo

1

Voxel Wall

Previous

A dark voxel tunnel with volumetric light rays, drifting cubes, and mouse-driven camera parallax.

Installation

pnpm dlx shadcn@latest add @gammaui/voxel-wall

The VoxelWallScene component renders a full-screen voxel tunnel: thousands of instanced cubes form a room with a rectangular light portal at the far end. Cubes subtly drift toward the light, god rays and bloom add atmosphere, and the camera responds to pointer movement.

Props

PropTypeDefaultDescription
classNamestring—Optional class name for the outer wrapper div.
heightstring | number"100%"Height of the canvas container.

Example Variants

Hero background

<div className="fixed inset-0">
  <VoxelWallScene />
</div>

Fixed-height preview

<div className="h-[500px] w-full overflow-hidden rounded-xl">
  <VoxelWallScene height="100%" />
</div>

Features

  • Instanced voxel tunnel — Procedurally generated room with a glowing portal opening.
  • God rays & bloom — Cinematic light rays and soft glow effects.
  • Mouse parallax — Camera sways and follows pointer movement.
  • Drifting cubes — Edge and debris cubes animate toward the light source.
  • Dust motes — Subtle particle field in the light beam.

Tips

  • Always give the parent container an explicit height; the canvas fills its wrapper.
  • Performance scales with instance count; reduce debris in wall.tsx if needed on low-end devices.