Draft Form

A canvas wireframe that turns in 3D over a dashed crosshair and registration circle, like a figure on a drafting sheet. Edges are drawn in the foreground ink with depth fading and the vertices are dotted in the primary colour, so it follows light and dark mode and the palette picker. Choose a nested icosahedron, a stellated cube or two interlocking cylinders. It pauses when off screen and draws a still frame when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add draft-form

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/draft-form.tsx.
3. Paste the code.

Usage

import { DraftForm } from "@/components/ui/draft-form";

export default function Example() {
  return (
    <div className="flex min-h-[400px] items-center justify-center bg-background">
      <DraftForm variant="cube" />
    </div>
  );
}

Props