Voxel Form

Component

About

An animated SVG object made of vector voxels that builds itself cell by cell, with a draggable build-progress scrubber and four camera angles — useful as a decorative hero, card or loading indicator.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Voxel Form to your project and fits it to your theme.

Code

How Voxel Form is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import VoxelForm from "@/components/ui/voxel-form";

export default function VoxelFormDemo() {
  return (
    <div className="flex min-h-[420px] w-full items-center justify-center bg-background p-10">
      <VoxelForm
        shape="gear"
        view="iso"
        variant="solid"
        behavior="build"
        resolution={6}
        interactive
        showPlate
        size={320}
        label="FORM / 28"
      />
    </div>
  );
}