Mercury Animation
Mercury Animation is a space animation in the UI HUB space & planets collection. A single full-bleed WebGL canvas (three.js) holds one sphere and nothing else.
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: three.js (WebGLRenderer, Scene, PerspectiveCamera, SphereGeometry, MeshStandardMaterial, ShaderMaterial, Points, Texture, Quaternion); two asset textures served from /assets/mercury-animation/mercury_texture.jpg (2048x1024 colour, sRGB) and mercury_bump.jpg (2048x1024 relief, linear), each with max anisotropy; an inlined 170-entry [lon,lat,brightness] crater-ray glint table mapped onto the sphere radius 1.004.
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 Mercury Animation?
A realistic, endlessly spinning Mercury globe built with three.js on a full-bleed WebGL canvas — one sphere, nothing else. A photographic 2048x1024 equirectangular colour map and its relief (bump) map wrap a MeshStandardMaterial sphere lit by a single low sun from the upper left, edged with a thin blue-gold rim glow; 170 twinkling glints sit on the brightest crater rays as children of the planet so they turn with it, over 2,400 drifting background stars. Drag in any direction to turn it a full 360° on both axes with fading momentum, wheel or two-finger pinch to zoom 0.6x-2.2x, double-click to reset and Space to pause.
Mercury Animation at a glance
- Category
- Space & Planets
- Pricing
- Pro component
- Libraries
- React and Three.js
- Styling
- Tailwind CSS
- Configurable props
- 2
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Mercury Animation works
A single full-bleed WebGL canvas (three.js) holds one sphere and nothing else. Two textures are loaded from /assets/mercury-animation/ — a 2048x1024 equirectangular colour map (sRGB) and its grayscale relief (bump) map — and applied to a SphereGeometry(1,192,128) MeshStandardMaterial (map + bumpMap + emissiveMap, bumpScale 0.4, roughness 0.97, metalness 0, emissiveIntensity 0.1). A low sun from the upper left (DirectionalLight 1.25 at (-2.4,1.4,2.8) + AmbientLight 0.42) lights the crater relief and casts a soft shadow on the right limb. A thin blue-gold additive BackSide shell gives the rim glow, 170 twinkling glints (from a [lon,lat,brightness] crater-ray table) are added as children of the planet so they turn with it, and 2,400 background stars fill the field — both star and glint fields are additive point sprites with a twinkle/core+spike shader. The inner mesh spins on its own axis (one turn per 60s) while an outer group carries the user's world-space quaternion: drag in any direction to turn it 360 degrees on both axes with fading flick momentum, wheel or two-finger pinch zooms 0.6x to 2.2x, double-click resets, Space toggles pause. prefers-reduced-motion starts it paused.
Technical information for Mercury Animation
| Category | Space & Planets |
|---|---|
| Libraries | React and Three.js |
| Styling | Tailwind CSS |
| Rendering | HTML canvas, requestAnimationFrame |
| State change | a Mercury globe quietly spinning on its axis under a still starfield, its rayed craters glinting, the fading loader visible briefly while the textures load to the user dragging the globe in any direction with momentum, zooming closer or further, double-clicking to snap back home, or pausing the spin with Space |
| Props | 2 configurable |
| Usage example | Not published yet |
What Mercury Animation requires
- three.js (WebGLRenderer, Scene, PerspectiveCamera, SphereGeometry, MeshStandardMaterial, ShaderMaterial, Points, Texture, Quaternion)
- two asset textures served from /assets/mercury-animation/mercury_texture.jpg (2048x1024 colour, sRGB) and mercury_bump.jpg (2048x1024 relief, linear), each with max anisotropy
- an inlined 170-entry [lon,lat,brightness] crater-ray glint table mapped onto the sphere radius 1.004
- additive point-sprite shaders for 2,400 twinkling background stars and the 170 ray glints (twinkle from a per-point phase, core+4-point-spike falloff)
- world-space quaternion drag (premultiplied axis-angle on both axes) with fading flick momentum
- wheel and two-finger pinch zoom clamped 0.6x-2.2x, double-click reset to the home quaternion
- ResizeObserver drives renderer.setSize and camera aspect (planet ~60% of the shorter side)
- prefers-reduced-motion matchMedia (starts paused)
- Space toggles pause only while the pointer is over the canvas
- full teardown on unmount (cancel rAF, disconnect ResizeObserver, remove listeners, dispose geometries/materials/textures, renderer.dispose + forceContextLoss)
Mercury Animation questions
What is Mercury Animation?
A realistic, endlessly spinning Mercury globe built with three.js on a full-bleed WebGL canvas — one sphere, nothing else. A photographic 2048x1024 equirectangular colour map and its relief (bump) map wrap a MeshStandardMaterial sphere lit by a single low sun from the upper left, edged with a thin blue-gold rim glow; 170 twinkling glints sit on the brightest crater rays as children of the planet so they turn with it, over 2,400 drifting background stars. Drag in any direction to turn it a full 360° on both axes with fading momentum, wheel or two-finger pinch to zoom 0.6x-2.2x, double-click to reset and Space to pause.
How does Mercury Animation work?
A single full-bleed WebGL canvas (three.js) holds one sphere and nothing else. Two textures are loaded from /assets/mercury-animation/ — a 2048x1024 equirectangular colour map (sRGB) and its grayscale relief (bump) map — and applied to a SphereGeometry(1,192,128) MeshStandardMaterial (map + bumpMap + emissiveMap, bumpScale 0.4, roughness 0.97, metalness 0, emissiveIntensity 0.1). A low sun from the upper left (DirectionalLight 1.25 at (-2.4,1.4,2.8) + AmbientLight 0.42) lights the crater relief and casts a soft shadow on the right limb. A thin blue-gold additive BackSide shell gives the rim glow, 170 twinkling glints (from a [lon,lat,brightness] crater-ray table) are added as children of the planet so they turn with it, and 2,400 background stars fill the field — both star and glint fields are additive point sprites with a twinkle/core+spike shader. The inner mesh spins on its own axis (one turn per 60s) while an outer group carries the user's world-space quaternion: drag in any direction to turn it 360 degrees on both axes with fading flick momentum, wheel or two-finger pinch zooms 0.6x to 2.2x, double-click resets, Space toggles pause. prefers-reduced-motion starts it paused.
Which category does Mercury Animation belong to?
Mercury 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 Mercury Animation?
Optional class applied to the root container. It defaults to "".
What does the style prop do in Mercury Animation?
Optional inline styles for the root container. It defaults to {}.
Is Mercury Animation free to use?
Mercury 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 Mercury Animation use?
Mercury Animation uses React and Three.js and is styled with Tailwind CSS.
What does Mercury Animation need to run?
Mercury Animation needs three.js (WebGLRenderer, Scene, PerspectiveCamera, SphereGeometry, MeshStandardMaterial, ShaderMaterial, Points, Texture, Quaternion), two asset textures served from /assets/mercury-animation/mercury_texture.jpg (2048x1024 colour, sRGB) and mercury_bump.jpg (2048x1024 relief, linear), each with max anisotropy, an inlined 170-entry [lon,lat,brightness] crater-ray glint table mapped onto the sphere radius 1.004 and additive point-sprite shaders for 2,400 twinkling background stars and the 170 ray glints (twinkle from a per-point phase, core+4-point-spike falloff).