Moon Animation
Moon Animation is a space animation in the UI HUB space & planets collection. Three stacked canvases fill the root: a 2D sky canvas (drifting Milky Way + twinkling three-depth starfield + occasional shooting star + vignette), a raw-WebGL1 canvas that raytraces the Moon sphere in a fragment shader, and a 2D overlay canvas that draws the dashed hover-feature outline.
The component is driven by 5 documented props (className, style, compact, showHint, hintText), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: Canvas 2D context for the sky/starfield and the overlay (no library); raw WebGL1 context (no library) with a vertex + fragment GLSL program for the raytraced sphere; seeded deterministic RNG (mulberry32 20261014) for the maria/crater/ray tables and the 520-star field.
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 Moon Animation?
A photoreal, fully procedural Moon in a drifting Milky Way. A seeded CPU pass forges a 2048×1024 lunar surface (real near-side maria, ~60 named craters, 11k random craters, bright ray systems) and a raw-WebGL raytraced sphere renders it with Lommel-Seeliger shading, bump-mapped relief, level-of-detail micro-craters, earthshine on the night side and a cursor spotlight. Drag to spin it 360°, scroll to zoom, hover to read feature names and coordinates.
Moon Animation at a glance
- Category
- Space & Planets
- Pricing
- Pro component
- Libraries
- React
- Styling
- Tailwind CSS
- Configurable props
- 5
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Moon Animation works
Three stacked canvases fill the root: a 2D sky canvas (drifting Milky Way + twinkling three-depth starfield + occasional shooting star + vignette), a raw-WebGL1 canvas that raytraces the Moon sphere in a fragment shader, and a 2D overlay canvas that draws the dashed hover-feature outline. Boot forges a seeded (mulberry32 20261014) lunar texture on the CPU: a 2048x1024 (or 1024x512 compact) albedo/height/mare-mask pass with real near-side maria, ~60 named craters, 11,000 random craters and 8 bright ray systems, then bakes it to a Uint8Array (albedo, clampped nx/ny relief, mare mask) uploaded as an RGBA mipmapped texture. The GLSL sphere raytrace computes the body-space normal, samples the albedo/relief/mask, adds two octaves of level-of-detail cellular micro-craters on the sphere, applies Lommel-Seeliger shading with a bump-mapped normal, an opposition surge near full phase, earthshine on the night side and a warm/cool mare tint, plus a hover spotlight and pulsing rings that follow the cursor. The Moon plays real time-compressed motion (optical libration ±7.9°/±6.7°, a 150s phase cycle with earthshine, sky drift/parallactic roll ±14°, and a ±3% perigee-apogee size change); a trackball matrix U is stacked on top so drag spins it a full 360° with inertia. The pointer (mouse or touch) drags to spin, scrolls/pinches or double-taps to zoom 1x-3x, hover reads the nearest named feature (maria, craters, mountain ranges) and shows a label with lat/lon plus a dashed outline, and R/arrows rotate or reset.
Technical information for Moon Animation
| Category | Space & Planets |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| Rendering | HTML canvas, requestAnimationFrame |
| State change | a slowly librating, phase-cycling Moon in a still Milky Way while the lunar surface is forged (progress bar) to a user-spun Moon with drag inertia and zoom, a cursor spotlight, and hover labels naming maria/craters with coordinates |
| Props | 5 configurable |
| Usage example | Not published yet |
What Moon Animation requires
- Canvas 2D context for the sky/starfield and the overlay (no library)
- raw WebGL1 context (no library) with a vertex + fragment GLSL program for the raytraced sphere
- seeded deterministic RNG (mulberry32 20261014) for the maria/crater/ray tables and the 520-star field
- procedural 2048x1024 (or 1024x512 compact) lunar texture generated on the CPU and uploaded as an RGBA mipmapped texture (EXT_texture_filter_anisotropic when available)
- fragment-shader sphere raytrace with Lommel-Seeliger shading, bump-mapped relief, two cellular micro-crater LOD octaves and a hover spotlight
- optical-libration / phase / parallactic-roll motion plus a stacked trackball rotation matrix with drag inertia
- Pointer Events (mouse + touch: pointermove/pointerdown/pointerup/pointerleave/pointercancel) scoped to the component root with getBoundingClientRect-local coordinates
- wheel (passive: false) and double-tap zoom, keyboard (arrows/R) gated on pointer-over
- ResizeObserver resizes the canvases to the root and caps the device pixel ratio
- prefers-reduced-motion matchMedia (slows the clock, disables shooting stars)
- full teardown on unmount (cancel rAF, disconnect ResizeObserver, remove listeners, clear hint timeouts, WEBGL_lose_context)
Moon Animation questions
What is Moon Animation?
A photoreal, fully procedural Moon in a drifting Milky Way. A seeded CPU pass forges a 2048×1024 lunar surface (real near-side maria, ~60 named craters, 11k random craters, bright ray systems) and a raw-WebGL raytraced sphere renders it with Lommel-Seeliger shading, bump-mapped relief, level-of-detail micro-craters, earthshine on the night side and a cursor spotlight. Drag to spin it 360°, scroll to zoom, hover to read feature names and coordinates.
How does Moon Animation work?
Three stacked canvases fill the root: a 2D sky canvas (drifting Milky Way + twinkling three-depth starfield + occasional shooting star + vignette), a raw-WebGL1 canvas that raytraces the Moon sphere in a fragment shader, and a 2D overlay canvas that draws the dashed hover-feature outline. Boot forges a seeded (mulberry32 20261014) lunar texture on the CPU: a 2048x1024 (or 1024x512 compact) albedo/height/mare-mask pass with real near-side maria, ~60 named craters, 11,000 random craters and 8 bright ray systems, then bakes it to a Uint8Array (albedo, clampped nx/ny relief, mare mask) uploaded as an RGBA mipmapped texture. The GLSL sphere raytrace computes the body-space normal, samples the albedo/relief/mask, adds two octaves of level-of-detail cellular micro-craters on the sphere, applies Lommel-Seeliger shading with a bump-mapped normal, an opposition surge near full phase, earthshine on the night side and a warm/cool mare tint, plus a hover spotlight and pulsing rings that follow the cursor. The Moon plays real time-compressed motion (optical libration ±7.9°/±6.7°, a 150s phase cycle with earthshine, sky drift/parallactic roll ±14°, and a ±3% perigee-apogee size change); a trackball matrix U is stacked on top so drag spins it a full 360° with inertia. The pointer (mouse or touch) drags to spin, scrolls/pinches or double-taps to zoom 1x-3x, hover reads the nearest named feature (maria, craters, mountain ranges) and shows a label with lat/lon plus a dashed outline, and R/arrows rotate or reset.
Which category does Moon Animation belong to?
Moon 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 Moon Animation?
Optional class applied to the root container. It defaults to "".
What does the style prop do in Moon Animation?
Optional inline styles for the root container. It defaults to {}.
Is Moon Animation free to use?
Moon 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 Moon Animation use?
Moon Animation uses React and is styled with Tailwind CSS.
What does Moon Animation need to run?
Moon Animation needs Canvas 2D context for the sky/starfield and the overlay (no library), raw WebGL1 context (no library) with a vertex + fragment GLSL program for the raytraced sphere, seeded deterministic RNG (mulberry32 20261014) for the maria/crater/ray tables and the 520-star field and procedural 2048x1024 (or 1024x512 compact) lunar texture generated on the CPU and uploaded as an RGBA mipmapped texture (EXT_texture_filter_anisotropic when available).