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 { PlanetDemoContainer } from "./demo-container"
export default function PixelPlanetDemo() { return <PlanetDemoContainer type="earth" />}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.
This commands the CLI to fetch the component’s code and dependencies directly from its JSON definition.
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. |
orbitControls | boolean | false | Enables drag-to-rotate interaction. Implied true if orbitControlsSensitivity is set. |
orbitControlsSensitivity | number | -0.005 | Sensitivity for the drag-to-rotate interaction. |
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 { PlanetDemoContainer } from "./demo-container"
export default function PixelPlanetDemo() { return <PlanetDemoContainer type="earth" />}Volcanic world with flowing magma.
import { PlanetDemoContainer } from "./demo-container"
export default function PixelPlanetLavaDemo() { return <PlanetDemoContainer type="lava" initialSeed={42} />}Frozen planet with icy plains.
import { PlanetDemoContainer } from "./demo-container"
export default function PixelPlanetIceDemo() { return <PlanetDemoContainer type="ice" initialSeed={42} />}Gas Giant 1
Section titled “Gas Giant 1”Massive planet with atmospheric bands.
import { PlanetDemoContainer } from "./demo-container"
export default function PixelPlanetGasGiant1Demo() { return <PlanetDemoContainer type="gas_giant_1" initialSeed={42} />}Gas Giant 2
Section titled “Gas Giant 2”Alternative gas giant variant.
import { PlanetDemoContainer } from "./demo-container"
export default function PixelPlanetGasGiant2Demo() { return <PlanetDemoContainer type="gas_giant_2" initialSeed={42} />}Asteroid
Section titled “Asteroid”Irregular rocky body.
import { PlanetDemoContainer } from "./demo-container"
export default function PixelPlanetAsteroidDemo() { return <PlanetDemoContainer type="asteroid" initialSeed={42} />}Luminous celestial object.
import { PlanetDemoContainer } from "./demo-container"
export default function PixelPlanetStarDemo() { return <PlanetDemoContainer type="star" initialSeed={42} />}Barren planet with dry terrain.
import { PlanetDemoContainer } from "./demo-container"
export default function PixelPlanetDryDemo() { return <PlanetDemoContainer type="dry" initialSeed={42} />}No Atmosphere
Section titled “No Atmosphere”Rocky planet with no atmosphere.
import { PlanetDemoContainer } from "./demo-container"
export default function PixelPlanetNoAtmosphereDemo() { return <PlanetDemoContainer type="no_atmosphere" initialSeed={42} />}