A fixed lattice of isometric diamond tiles that lights up solid figures standing on a faint floor grid: a cube, a staircase, a bar chart, a coil. Every few seconds the next figure builds over the last from the floor up, with a bright front where the tiles turn over. Lit faces close into solid tiles and shaded ones break into grain. A level glint rises through the figure, and the pointer lights the bare lattice like a lamp. The canvas is transparent; the parent paints the page.

Installation

pnpm dlx shadcn@latest add @23rd/iso-lattice

Or from the public GitHub registry:

pnpm dlx shadcn@latest add radiumcoders/23rd.dev/iso-lattice

Usage

Give the parent a height and put copy above the figure in relative z-10. The figure sits in the middle of the canvas, so a hero usually gives it the lower part of the section.

"use client"

import { IsoLattice } from "@/components/ui/iso-lattice"

export function Hero() {
  return (
    <section className="relative isolate flex min-h-svh flex-col overflow-hidden bg-background">
      <div className="relative z-10 mx-auto max-w-xl px-6 pt-24 text-center">
        <h1 className="text-4xl font-medium tracking-tight">
          Builds that <span className="text-orange-700 dark:text-amber-300">assemble themselves</span>
        </h1>
        <p className="mt-3 text-muted-foreground">
          Every commit compiles into the same lattice. Change one piece and
          only that piece moves.
        </p>
      </div>
      <div className="relative min-h-[420px] flex-1">
        <IsoLattice />
      </div>
    </section>
  )
}

Hold one figure, or pick the cycle:

<IsoLattice shapes={["cube"]} />
<IsoLattice shapes={["steps", "pillars"]} interval={6} />

Under prefers-reduced-motion: reduce the first figure holds still with no build, glint or lamp.

Props

Prop	Type	Default
`shapes`	`("cube" \| "steps" \| "pillars" \| "coil")[]`	`["cube", "steps", "pillars", "coil"]`
`interval`	`number`	`4`, seconds per figure
`color`	`string`	theme amber
`size`	`number`	`0.6`, share of the shorter side
`spacing`	`number`	`8`, CSS px between tiles
`glow`	`number`	`0.6`, 0–1, `0` for none
`speed`	`number`	`1`
`floor`	`boolean`	`true`
`interactive`	`boolean`	`true`
`theme`	`"light" \| "dark" \| "auto"`	`auto`
`className`	`string`	none