Nodes

Spreads light across a hairline lattice, one crossing igniting the next.

Configurations

Supported configurations for this component.

2 examples

Subject

Ground

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Every prop this component accepts. Any other prop is forwarded to the underlying element.

Prop	Type	Default	Description
seed	`number`	-	fixes the lattice offset, the roots and the whole cascade; default 1337
variant	`'sparse'\|'default'\|'dense'`	-	lattice density (pitch + root count); default 'default' (the canonical look)
emphasis	`'subject'\|'ground'`	-	how much ink it carries; default 'subject'. 'ground' is for an Object lying under content that has to be read
paused	`boolean`	-	freeze on the current frame (off-focus / backgrounded surfaces)
color	`string`	-	resting lattice hairlines; any CSS colour syntax; defaults to border.subtle
glyphColor	`string`	-	resting survey glyphs at each crossing; defaults to border.base
lightColor	`string`	-	travelling light — rays, halo, spark, bloom, all derived from this one value; defaults to text.primary
className	`string`	-	Additional CSS classes applied to the root element.

Draws hundreds of hairlines converging on a single focal point.

Turns a lattice of dots a quarter at a time, the way a puzzle cube twists.

Lists questions that each open their answer below them, one at a time or several at once.