Burst

Draws hundreds of hairlines converging on a single focal point.

Variants

Supported configurations for this component.

2 examples

Irregular

Symmetry

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
density	`'sparse'\|'standard'\|'dense'`	-	how much of the lattice is wired back; defaults to 'standard'
variant	`'irregular'\|'symmetry'`	-	sanctioned face: low gathered focus or four-way frame-centred mirror; defaults to 'irregular'
seed	`number`	-	layout seed — same seed, same field, every reload
paused	`boolean`	-	freeze to the composed still frame
color	`string`	-	strand ink — any CSS colour (hex, rgb(), a var()); defaults to border.base via `var(--andromeda-border-base, …)`
dotColor	`string`	-	resting endpoint / mid-strand dots; defaults to border.strong via `var(--andromeda-border-strong, …)`
lightColor	`string`	-	travelling pulses and the flash of a dot they hit; defaults to text.primary via `var(--andromeda-text-primary, …)`
className	`string`	-	Additional CSS classes applied to the root element.

Displays a status message in the flow of the page, at a severity from note to fault.

Represents a person as a square image tile that falls back to their initials.

Displays the state a row or cell reports, such as online, queued, or fault.