Mars Animation
Mars Animation is a space animation in the UI HUB space & planets collection. A fully procedural, endlessly rotating Mars rendered entirely in Canvas 2D — no WebGL, no libraries.
The component is driven by 3 documented props (className, style, compact), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: Canvas 2D context only (no WebGL, no three.js/gsap) — one offscreen disc buffer per level-of-detail plus the visible canvas; seeded mulberry32 RNG + 3D Perlin value noise with fbm, plus unit()/cross()/dot()/norm() vector helpers; an 8192-entry colour-ramp LUT (256 albedo x 32 dust-hue steps, grey basalt -> red -> yellow ochre).
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 Mars Animation?
A fully procedural, endlessly rotating Mars rendered entirely in Canvas 2D — no WebGL, no libraries. A seeded CPU pass forges a seamless equirectangular surface (the broad albedo features of Syrtis Major, Acidalia Planitia and the Mare belts; the bright Hellas and Argyre basins; the Tharsis bulge and Olympus Mons; the Valles Marineris and Kasei Valles canyons; the spiral-capped polar ice caps; ~2,300 power-law craters with ejecta rays and wind streaks) and raytraces the disc per pixel with bump-mapped relief, a dust-laned Milky Way behind it and two moons. Drag in any direction to turn the planet, flick for momentum, double-click or r to reset, arrow keys to nudge and Space to pause. A Sun slider re-lights the scene, and pressing i reveals the rotation axis, a graticule and a live probe that names the hovered feature, canyon, crater or moon.
Mars Animation at a glance
- Category
- Space & Planets
- Pricing
- Pro component
- Libraries
- React
- Styling
- Tailwind CSS
- Configurable props
- 3
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Mars Animation works
A fully procedural, endlessly rotating Mars rendered entirely in Canvas 2D — no WebGL, no libraries. A seeded CPU pass forges a seamless equirectangular surface in slices (broad albedo features like Syrtis Major, Acidalia Planitia and the Mare belts; the bright Hellas and Argyre basins; the Tharsis bulge with Olympus Mons and the Ascraeus/Pavonis/Arsia group; the Valles Marineris, Ius Chasma, Kasei Valles and Noctis Labyrinthus canyons; the spiral-capped polar ice caps; the 71°N rings; plus ~2,300 power-law craters with ejecta rays and wind streaks) packed into albedo / east-north slope / dust-hue / cloud channels at 2048x1024, then raytraces the disc per pixel with bump-mapped relief, a dust-laned Milky Way behind it, twinkling stars, a dusty-orange limb glow and two moons (Phobos and Deimos) that circle in front and behind. Drag in any direction to turn the planet via a three-vector trackball (north axis + lon0 + east, re-projected after every rotation) with flick momentum, and double-click / r resets. Hovering the canvas enables the keyboard: i toggles inspect (rotation axis, dashed graticule, orbit ellipses and a probe that names the hovered feature, canyon, crater or moon with its latitude/longitude), Space pauses, Escape clears, arrow keys nudge and r resets. A Sun slider re-lights the whole scene. prefers-reduced-motion starts it paused. Rendering is gated by an IntersectionObserver and the Page Visibility API so an off-screen tile never burns CPU, and it auto-drops to a coarser level-of-detail if a frame runs long.
Technical information for Mars Animation
| Category | Space & Planets |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| Rendering | HTML canvas, requestAnimationFrame |
| State change | Mars quietly spinning under a deep-space Milky Way, its rust-red disc, polar caps and two moons visible, no legend or probe to the user dragging the planet through any angle with momentum, double-clicking / pressing r to snap back home, sliding the Sun to re-light the scene, or hovering + pressing i to reveal the axis, graticule, orbits and a live probe that names the hovered geography |
| Props | 3 configurable |
| Usage example | Not published yet |
What Mars Animation requires
- Canvas 2D context only (no WebGL, no three.js/gsap) — one offscreen disc buffer per level-of-detail plus the visible canvas
- seeded mulberry32 RNG + 3D Perlin value noise with fbm, plus unit()/cross()/dot()/norm() vector helpers
- an 8192-entry colour-ramp LUT (256 albedo x 32 dust-hue steps, grey basalt -> red -> yellow ochre)
- an async (generator) surface texture build in short 14ms slices so the page never freezes: a 1024x512 broad-feature pass (domain-warped fbm, angular-radius dark/bright feature blobs, volcano bumps, canyon trenches, polar caps, 71°N rings, cloud ridges) resampled to 2048x1024 with fine grain, then ~2,300 power-law craters with ejecta rays and wind streaks, then east/north slope quantisation + baked ambient occlusion
- per-pixel sphere map sets (px/py/pz + light-dependent qx/qy/qz, PL, haze, cloud-shade, uB, EL, NL, vRow, cRow) built once per size; orient() refreshes only while the user turns the planet; renderPlanet does a horizontal-wrap texture fetch + bump-shaded diffuse + cloud + haze, then putImageData
- a hand-built background canvas: a dust-laned Milky Way band (additive radial gradients), dark dust lanes, 560 multi-tint stars with glow and ~70 twinklers, rebuilt on resize
- orientation trackball (north axis AX + lon0 XP + east YP, re-projected after every rotation) driven by drag in any direction with exponential flick momentum, pointer capture, double-click / r to reset
- two moons (Phobos, Deimos) drawn as lit radial-gradient discs that pass in front of and behind the planet along dashed orbit ellipses
- full-bleed canvas that fills the container (disc centred on the shorter side) at a uniform DPR-capped scale on a rAF-throttled ResizeObserver (the window resize became a ResizeObserver on the root); pointer maths use getBoundingClientRect and scale to the backing store per axis
- adaptive level-of-detail: drops to a coarser map set if frames run long, and renders the coarse set while dragging
- a re-lightable Sun slider (light-set refresh across both map sets)
- inspect probe (hover + i / Escape) that names the hovered named feature, canyon or crater, or one of the two moons, with latitude/longitude and a drawn graticule + axis
- keyboard (i / Space / Escape / arrows / r) gated on pointer-over so page keys are never hijacked
- prefers-reduced-motion matchMedia (starts paused; still draggable)
- IntersectionObserver + Page Visibility gate: rendering pauses off-screen or when the tab is hidden
- full teardown on unmount (cancel rAF, disconnect ResizeObserver + IntersectionObserver, clear the boot timer, remove all canvas / Sun-slider / window-keyboard listeners)
Mars Animation questions
What is Mars Animation?
A fully procedural, endlessly rotating Mars rendered entirely in Canvas 2D — no WebGL, no libraries. A seeded CPU pass forges a seamless equirectangular surface (the broad albedo features of Syrtis Major, Acidalia Planitia and the Mare belts; the bright Hellas and Argyre basins; the Tharsis bulge and Olympus Mons; the Valles Marineris and Kasei Valles canyons; the spiral-capped polar ice caps; ~2,300 power-law craters with ejecta rays and wind streaks) and raytraces the disc per pixel with bump-mapped relief, a dust-laned Milky Way behind it and two moons. Drag in any direction to turn the planet, flick for momentum, double-click or r to reset, arrow keys to nudge and Space to pause. A Sun slider re-lights the scene, and pressing i reveals the rotation axis, a graticule and a live probe that names the hovered feature, canyon, crater or moon.
How does Mars Animation work?
A fully procedural, endlessly rotating Mars rendered entirely in Canvas 2D — no WebGL, no libraries. A seeded CPU pass forges a seamless equirectangular surface in slices (broad albedo features like Syrtis Major, Acidalia Planitia and the Mare belts; the bright Hellas and Argyre basins; the Tharsis bulge with Olympus Mons and the Ascraeus/Pavonis/Arsia group; the Valles Marineris, Ius Chasma, Kasei Valles and Noctis Labyrinthus canyons; the spiral-capped polar ice caps; the 71°N rings; plus ~2,300 power-law craters with ejecta rays and wind streaks) packed into albedo / east-north slope / dust-hue / cloud channels at 2048x1024, then raytraces the disc per pixel with bump-mapped relief, a dust-laned Milky Way behind it, twinkling stars, a dusty-orange limb glow and two moons (Phobos and Deimos) that circle in front and behind. Drag in any direction to turn the planet via a three-vector trackball (north axis + lon0 + east, re-projected after every rotation) with flick momentum, and double-click / r resets. Hovering the canvas enables the keyboard: i toggles inspect (rotation axis, dashed graticule, orbit ellipses and a probe that names the hovered feature, canyon, crater or moon with its latitude/longitude), Space pauses, Escape clears, arrow keys nudge and r resets. A Sun slider re-lights the whole scene. prefers-reduced-motion starts it paused. Rendering is gated by an IntersectionObserver and the Page Visibility API so an off-screen tile never burns CPU, and it auto-drops to a coarser level-of-detail if a frame runs long.
Which category does Mars Animation belong to?
Mars 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 Mars Animation?
Optional class applied to the root container. It defaults to "".
What does the style prop do in Mars Animation?
Optional inline styles for the root container. It defaults to {}.
Is Mars Animation free to use?
Mars 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 Mars Animation use?
Mars Animation uses React and is styled with Tailwind CSS.
What does Mars Animation need to run?
Mars Animation needs Canvas 2D context only (no WebGL, no three.js/gsap) — one offscreen disc buffer per level-of-detail plus the visible canvas, seeded mulberry32 RNG + 3D Perlin value noise with fbm, plus unit()/cross()/dot()/norm() vector helpers, an 8192-entry colour-ramp LUT (256 albedo x 32 dust-hue steps, grey basalt -> red -> yellow ochre) and an async (generator) surface texture build in short 14ms slices so the page never freezes: a 1024x512 broad-feature pass (domain-warped fbm, angular-radius dark/bright feature blobs, volcano bumps, canyon trenches, polar caps, 71°N rings, cloud ridges) resampled to 2048x1024 with fine grain, then ~2,300 power-law craters with ejecta rays and wind streaks, then east/north slope quantisation + baked ambient occlusion.