Pluto Animation
Pluto Animation is a space animation in the UI HUB space & planets collection. A single Canvas 2D software renderer — no WebGL, no libraries.
The component is driven by 2 documented props (className, style), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: Canvas 2D context (no WebGL, no three.js/gsap); seeded mulberry32 RNG + permuted 3D gradient value noise with fbm and hash3/worley helpers; equirectangular terrain generator (async, yielding every 32 rows / 256 craters, cancellable) with named ellipsoidal regions (Sputnik Planitia, Tombaugh Regio west lobe, Cthulhu Macula, Lowell Regio, a dark macula).
Preview the space animation in the browser above, copy the source, and paste it into your project. Space & Planets components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Pluto Animation?
A fully procedural, endlessly rotating Pluto rendered entirely in Canvas 2D — no WebGL, no libraries. A seeded CPU pass forges a 2048x1024 equirectangular surface (grey-white nitrogen-and-water ice, pink-grey southern blotches, the dark maculae belt, the reddish Cthulhu Macula and the cream Sputnik Planitia with its convection cells and blocky water-ice mountains), then scatters thousands of power-law impact craters and packs a level-of-detail mip chain. A software sphere renderer raytraces the disc per pixel with slope-based relief, a single sun, limb shading and a thin bluish atmosphere haze. Drag in any direction to turn it a full 360° (Pluto's real retrograde spin), flick for momentum, double-click or 0 to reset, arrow keys to nudge and Space to pause.
Pluto Animation at a glance
- Category
- Space & Planets
- Pricing
- Pro component
- Libraries
- React
- Styling
- Tailwind CSS
- Configurable props
- 2
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Pluto Animation works
A single Canvas 2D software renderer — no WebGL, no libraries. A seeded CPU pass builds a 2048x1024 equirectangular surface: a warm/cool grey-white ice base, northern blue-grey patches, yellow-orange Lowell Regio and high-north terrain, greyish-pink southern blotches with red speckle, an equatorial dark-maculae belt, the reddish Cthulhu Macula (dark maroon -> brick red -> pinkish edge), a second dark patch, the bright pink-grey west lobe of Tombaugh Regio, and the cream Sputnik Planitia with worley convection cells and a blocky water-ice mountain zone along its west rim, all fractured along two axis lines. Pass 2 scatters ~4300 power-law impact craters (with ejecta, ice rims and floor shading) plus 260 brown rim pits. Pass 3 packs 5 bytes/texel (RGB + 2 slope bytes) and builds four mip levels. createRenderer pre-computes per-pixel view tables and raytraces the disc: mip + extra-tap texture fetch, slope bump against the sun direction, limb and haze, plus a thin bluish atmosphere ring and a background haze pass. Drag in any direction to turn it 360 degrees with a re-orthonormalised 3x3 trackball and flick inertia, double-click or 0 resets, arrow keys nudge, Space pauses. prefers-reduced-motion stops the auto-spin (still draggable). The software buffer is full-bleed (fills the container, disc centred on the shorter side, capped at 800px), and the whole loop is gated by an IntersectionObserver and the Page Visibility API, so the planet only rasterises while it is actually on screen.
Technical information for Pluto Animation
| Category | Space & Planets |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| Rendering | HTML canvas, ResizeObserver, requestAnimationFrame |
| State change | a loading overlay counting through terrain generation, then Pluto spinning retrograde under a black sky with a faint bluish rim to the user dragging the dwarf planet in any direction with momentum, double-clicking / pressing 0 to snap back home, or pausing the spin with Space |
| Props | 2 configurable |
| Usage example | Not published yet |
What Pluto Animation requires
- Canvas 2D context (no WebGL, no three.js/gsap)
- seeded mulberry32 RNG + permuted 3D gradient value noise with fbm and hash3/worley helpers
- equirectangular terrain generator (async, yielding every 32 rows / 256 craters, cancellable) with named ellipsoidal regions (Sputnik Planitia, Tombaugh Regio west lobe, Cthulhu Macula, Lowell Regio, a dark macula)
- software sphere renderer with per-pixel precomputed view tables (u/v, light elevation/azimuth, coverage, haze), a 4-level mip chain and extra u-taps at the poles/limb
- slope-bump lighting from the packed gradient bytes plus limb, ambient and a bluish atmosphere haze pass
- 3x3 trackball drag (mul/ortho/turn) with flick inertia, pointer-capture, double-click / key reset
- full-bleed render buffer that fills the container (disc centred on the shorter side, capped at 800px), rebuilt on an rAF-throttled ResizeObserver; pointer maths use getBoundingClientRect
- prefers-reduced-motion matchMedia (stops the auto-spin; still draggable)
- Space toggles pause only while the pointer is over the canvas
- IntersectionObserver + Page Visibility gate: rendering pauses off-screen or when the tab is hidden, and the one-time terrain build is deferred and paused until the box is visible
- full teardown on unmount (cancel rAFs, disconnect ResizeObserver + IntersectionObserver, clear hint/loading timers, remove listeners, abort an in-flight generation)
Pluto Animation questions
What is Pluto Animation?
A fully procedural, endlessly rotating Pluto rendered entirely in Canvas 2D — no WebGL, no libraries. A seeded CPU pass forges a 2048x1024 equirectangular surface (grey-white nitrogen-and-water ice, pink-grey southern blotches, the dark maculae belt, the reddish Cthulhu Macula and the cream Sputnik Planitia with its convection cells and blocky water-ice mountains), then scatters thousands of power-law impact craters and packs a level-of-detail mip chain. A software sphere renderer raytraces the disc per pixel with slope-based relief, a single sun, limb shading and a thin bluish atmosphere haze. Drag in any direction to turn it a full 360° (Pluto's real retrograde spin), flick for momentum, double-click or 0 to reset, arrow keys to nudge and Space to pause.
How does Pluto Animation work?
A single Canvas 2D software renderer — no WebGL, no libraries. A seeded CPU pass builds a 2048x1024 equirectangular surface: a warm/cool grey-white ice base, northern blue-grey patches, yellow-orange Lowell Regio and high-north terrain, greyish-pink southern blotches with red speckle, an equatorial dark-maculae belt, the reddish Cthulhu Macula (dark maroon -> brick red -> pinkish edge), a second dark patch, the bright pink-grey west lobe of Tombaugh Regio, and the cream Sputnik Planitia with worley convection cells and a blocky water-ice mountain zone along its west rim, all fractured along two axis lines. Pass 2 scatters ~4300 power-law impact craters (with ejecta, ice rims and floor shading) plus 260 brown rim pits. Pass 3 packs 5 bytes/texel (RGB + 2 slope bytes) and builds four mip levels. createRenderer pre-computes per-pixel view tables and raytraces the disc: mip + extra-tap texture fetch, slope bump against the sun direction, limb and haze, plus a thin bluish atmosphere ring and a background haze pass. Drag in any direction to turn it 360 degrees with a re-orthonormalised 3x3 trackball and flick inertia, double-click or 0 resets, arrow keys nudge, Space pauses. prefers-reduced-motion stops the auto-spin (still draggable). The software buffer is full-bleed (fills the container, disc centred on the shorter side, capped at 800px), and the whole loop is gated by an IntersectionObserver and the Page Visibility API, so the planet only rasterises while it is actually on screen.
Which category does Pluto Animation belong to?
Pluto Animation is listed under Space & Planets in the UI HUB catalog. Celestial components that render real planets, moons and orbital scenes in the browser: procedurally textured spheres, rotating bodies and interactive space backdrops. Each one is built as a self-contained React component with documented props, so you can drop a rotating moon or planet straight into a hero, a section or a full-page intro. Preview it live, then copy the exact source.
What does the className prop do in Pluto Animation?
Optional class applied to the root container. It defaults to "".
What does the style prop do in Pluto Animation?
Optional inline styles for the root container. It defaults to {}.
Is Pluto Animation free to use?
Pluto Animation is a Pro component on UI HUB. Pro components are labelled in the catalog and come with a documented props table on the component page.
Which libraries does Pluto Animation use?
Pluto Animation uses React and is styled with Tailwind CSS.
What does Pluto Animation need to run?
Pluto Animation needs Canvas 2D context (no WebGL, no three.js/gsap), seeded mulberry32 RNG + permuted 3D gradient value noise with fbm and hash3/worley helpers, equirectangular terrain generator (async, yielding every 32 rows / 256 craters, cancellable) with named ellipsoidal regions (Sputnik Planitia, Tombaugh Regio west lobe, Cthulhu Macula, Lowell Regio, a dark macula) and software sphere renderer with per-pixel precomputed view tables (u/v, light elevation/azimuth, coverage, haze), a 4-level mip chain and extra u-taps at the poles/limb.