PixelPlanet
Add interactive 3D pixel art planets to your application using PixelPlanet.
PixelPlanet is a React Three Fiber component that renders customizable, interactive 3D pixel art planets. You can control the planet type, surface colors, rotation speed, and atmospheric effects.
import { PixelPlanet } from "@/components/ui/pixel-planet"
export default function PixelPlanetDemo() { return ( <div className="flex h-64 w-64 items-center justify-center"> <PixelPlanet type="earth" seed={123} className="h-full w-full" /> </div> )}Installation
Section titled “Installation”The most reliable way to install a component from a custom third-party registry without modifying your project configuration is to use the absolute URL to the component’s generated JSON definition.
Run the following command in your terminal:
npx shadcn@latest add https://pixel-planet-component.vercel.app/r/pixel-planet.jsonThis commands the CLI to fetch the component’s code and dependencies directly from the repository’s build output folder (`/r`).
Import the component and specify a type to render a planet.
import { PixelPlanet } from "@/components/pixel-planet"
export default function Page() { return ( <div className="h-[400px] w-full"> <PixelPlanet type="earth" /> </div> )}Properties
Section titled “Properties”The component accepts the following properties for customization:
| Property | Type | Default | Description |
|---|---|---|---|
type | PlanetType | "earth" | The celestial body type (e.g., earth, lava, gas-giant). |
seed | string | number | 123 | Seed for randomized surface patterns. |
animate | boolean | true | Enables or disables the rotation animation. |
className | string | undefined | Additional CSS classes for the container. |
Celestial body types
Section titled “Celestial body types”You can choose from several predefined planet types:
Life-bearing planet with oceans and clouds.
import { PixelPlanet } from "@/components/ui/pixel-planet"
export default function PixelPlanetDemo() { return ( <div className="flex h-64 w-64 items-center justify-center"> <PixelPlanet type="earth" seed={123} className="h-full w-full" /> </div> )}Volcanic world with flowing magma.
import { PixelPlanet } from "@/components/ui/pixel-planet"
export default function PixelPlanetLavaDemo() { return ( <div className="flex h-64 w-64 items-center justify-center"> <PixelPlanet type="lava" seed={42} className="h-full w-full" /> </div> )}Frozen planet with icy plains.
import { PixelPlanet } from "@/components/ui/pixel-planet"
export default function PixelPlanetIceDemo() { return ( <div className="flex h-64 w-64 items-center justify-center"> <PixelPlanet type="ice" seed={42} className="h-full w-full" /> </div> )}Gas Giant 1
Section titled “Gas Giant 1”Massive planet with atmospheric bands.
import { PixelPlanet } from "@/components/ui/pixel-planet"
export default function PixelPlanetGasGiant1Demo() { return ( <div className="flex h-64 w-64 items-center justify-center"> <PixelPlanet type="gas_giant_1" seed={42} className="h-full w-full" /> </div> )}Gas Giant 2
Section titled “Gas Giant 2”Alternative gas giant variant.
import { PixelPlanet } from "@/components/ui/pixel-planet"
export default function PixelPlanetGasGiant2Demo() { return ( <div className="flex h-64 w-64 items-center justify-center"> <PixelPlanet type="gas_giant_2" seed={42} className="h-full w-full" /> </div> )}Asteroid
Section titled “Asteroid”Irregular rocky body.
import { PixelPlanet } from "@/components/ui/pixel-planet"
export default function PixelPlanetAsteroidDemo() { return ( <div className="flex h-64 w-64 items-center justify-center"> <PixelPlanet type="asteroid" seed={42} className="h-full w-full" /> </div> )}Luminous celestial object.
import { PixelPlanet } from "@/components/ui/pixel-planet"
export default function PixelPlanetStarDemo() { return ( <div className="flex h-64 w-64 items-center justify-center bg-zinc-950"> <PixelPlanet type="star" seed={42} className="h-full w-full" /> </div> )}Barren planet with dry terrain.
import { PixelPlanet } from "@/components/ui/pixel-planet"
export default function PixelPlanetDryDemo() { return ( <div className="flex h-64 w-64 items-center justify-center"> <PixelPlanet type="dry" seed={42} className="h-full w-full" /> </div> )}No Atmosphere
Section titled “No Atmosphere”Rocky planet with no atmosphere.
import { PixelPlanet } from "@/components/ui/pixel-planet"
export default function PixelPlanetNoAtmosphereDemo() { return ( <div className="flex h-64 w-64 items-center justify-center"> <PixelPlanet type="no_atmosphere" seed={42} className="h-full w-full" /> </div> )}