Form Foundry

A Three.js construction study. Choose a stepped ziggurat, three stacked monoliths, a lattice spire, an arch, a ring tower or a field of columns: blocks drop course by course onto a two-step plinth, settle, hold, then clear and rebuild. Every colour comes from the theme tokens: in light mode the form sits in paper-white haze under a pale sun, in dark mode it is a dusk scene with a moon and a primary-tinted rim light, and it re-colours when the theme or palette changes. Drag to turn the view. When focused, Space pauses, R rebuilds and S changes the form. The scene pauses when off screen or in a hidden tab. When the user prefers reduced motion it shows the finished form as a still frame.

Installation

CLI

npx @modus-ui/cli add form-foundry

Manual

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

Usage

import { FormFoundry } from "@/components/ui/form-foundry";

export default function Example() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden">
      <FormFoundry variant="lattice" />
    </div>
  );
}

Props