Planet

Renders a slowly rotating particle sphere as a hero object.

Variants

Supported configurations for this component.

2 examples

Shell

Mantle

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
particleCount	`number`	6000	Number of surface particles; 6000 reads dense at 320 to 480px.
particleSize	`number`	0.028	Per-particle point size in world units.
rotationSpeed	`number`	0.0035	Auto-rotation speed in radians per frame (assumes about 60fps).
variant	`'shell' \| 'mantle'`	'shell'	Surface construction; Mantle divides the particles between a porous shell and a smaller inner body.
paused	`boolean`	false	When true, the planet does not auto-rotate.
seed	`number`	1	Seeds the particle field. The same seed always builds the same planet, so a shot can be reproduced and two renders can be compared, screenshotted or regression-tested.
color	`string`	-	Lit-body colour, any CSS colour syntax; defaults to `var(--andromeda-text-secondary, oklch(0.877 0.002 286.2))`. The terminator and the highlight specks are derived from this and `shadowColor`, so one value recolours the whole planet.
shadowColor	`string`	-	Unlit-side colour, any CSS colour syntax; defaults to `var(--andromeda-border-base, oklch(0.413 0.002 286.2))`.
className	`string`	-	Additional CSS classes applied to the root element.
style	`React.CSSProperties`	-	Inline styles 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.