Planet
A slowly rotating 3D particle sphere built with Three.js, lit from one side, with every particle colored from the Andromeda accent ramp so it follows the system palette. The canvas is transparent, so drop it inside a Card and the void shows through.
Add to your project
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/andromeda-planetProps
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). |
| paused | boolean | false | When true, the planet does not auto-rotate. |
| className | string | - | Additional CSS classes applied to the root element. |
| style | React.CSSProperties | - | Inline styles applied to the root element. |
AI Canvas