Uranus Animation
Uranus Animation is a space animation in the UI HUB space & planets collection. A full-bleed raw-WebGL1 fragment shader raytraces one sphere over a procedural atmosphere — no textures, 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: raw WebGL1 (no three.js/gsap) — one full-screen triangle, a single fragment shader, and uU/uV/uA 'planet frame in view space' uniforms; h21/h31 value noise with a 4-octave fbm and an ln() narrow-ring helper; procedural planet frame (uU/uV/uA) raytraced in the shader: broad belts + fine latitude streaks, greener equator / bluer mid latitudes, a pole haze cap brighter on the sunlit pole, two crossfading methane streak samples and a faster thin high-altitude haze.
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 Uranus Animation?
A fully procedural, endlessly rotating Uranus rendered by a single raw-WebGL1 fragment shader — one raytraced sphere, no textures, no libraries. An fbm/domain-warped methane atmosphere gives broad soft belts with fine latitude streaks, a slightly greener equator and bluer mid latitudes, a bright polar haze cap (stronger on the sunlit pole), evolving methane cloud streaks and a thin high-altitude haze drifting a little faster than the belts. The planet's faint 13-ring system is drawn procedurally too — a dusty inner band, six narrow bright rings, the hair-thin epsilon ring and a field of tiny twinkling ring particles — and its bands cast soft shadows onto the cloud tops. Drag in any direction to turn it through any angle, flick for momentum, double-click or r to reset, arrow keys to nudge and Space to pause, and press i to reveal the spin axis, the pole marker and a live latitude/longitude or ring-name probe.
Uranus 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 Uranus Animation works
A full-bleed raw-WebGL1 fragment shader raytraces one sphere over a procedural atmosphere — no textures, no libraries. The shader samples a value-noise fbm/domain-warped cloud deck in the planet frame: broad soft belts plus fine latitude streaks, a slightly greener equator and bluer mid latitudes, a bright polar haze cap that is stronger on the sunlit pole, two crossfading methane cloud-streak samples that keep evolving, a thin high-altitude haze drifting a little faster than the belts, and the planet's faint 13-ring system (a dusty inner band, six narrow bright rings, the hair-thin epsilon (e) ring and a field of tiny twinkling ring particles) drawn as a procedural rotated-plane pass whose bands also cast soft shadow stripes back onto the cloud tops. A second 2D overlay canvas draws the inspect legend and a live probe. Drag in any direction to turn the planet through any angle via the same orientation trackball as the reference (planet frame U/V/pole A, re-orthonormalised after every rotation) with flick momentum, and double-click / r resets. Hovering the canvas enables the keyboard: i toggles inspect (spin-axis dashes, the pole marker and a readout of the hovered latitude/longitude or ring name), Space pauses, Escape clears, arrow keys nudge and r resets. prefers-reduced-motion starts it paused. The render loop is gated by an IntersectionObserver and the Page Visibility API so an off-screen tile never burns the GPU.
Technical information for Uranus Animation
| Category | Space & Planets |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| Rendering | WebGL shaders, HTML canvas, requestAnimationFrame |
| State change | Uranus quietly spinning on its tilted axis under a black sky, its rings hazy and faint, no legend or probe visible to the user dragging the planet through any angle with momentum, double-clicking / pressing r to snap back home, or hovering + pressing i to reveal the spin axis and probe the atmosphere or a ring by name |
| Props | 2 configurable |
| Usage example | Not published yet |
What Uranus Animation requires
- raw WebGL1 (no three.js/gsap) — one full-screen triangle, a single fragment shader, and uU/uV/uA 'planet frame in view space' uniforms
- h21/h31 value noise with a 4-octave fbm and an ln() narrow-ring helper
- procedural planet frame (uU/uV/uA) raytraced in the shader: broad belts + fine latitude streaks, greener equator / bluer mid latitudes, a pole haze cap brighter on the sunlit pole, two crossfading methane streak samples and a faster thin high-altitude haze
- ringLayers(rr) profile (dusty band mask, six narrow rings via ln(), a hair-thin epsilon ring) plus a per-cell ring-particle pass with twinkle, and the ring bands casting shadow stripes onto the cloud tops
- orientation trackball (planet frame U/V/pole A with re-orthonormalisation) driven by drag in any direction with flick momentum
- pointer maths use getBoundingClientRect-local coordinates; drag uses pointer capture
- DPR capped at 2 with a 3.2e6 px budget; sized from the container with a ResizeObserver (the window resize became a ResizeObserver on the root)
- 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, remove listeners, deleteProgram/deleteShader/deleteBuffer; never loseContext)
Uranus Animation questions
What is Uranus Animation?
A fully procedural, endlessly rotating Uranus rendered by a single raw-WebGL1 fragment shader — one raytraced sphere, no textures, no libraries. An fbm/domain-warped methane atmosphere gives broad soft belts with fine latitude streaks, a slightly greener equator and bluer mid latitudes, a bright polar haze cap (stronger on the sunlit pole), evolving methane cloud streaks and a thin high-altitude haze drifting a little faster than the belts. The planet's faint 13-ring system is drawn procedurally too — a dusty inner band, six narrow bright rings, the hair-thin epsilon ring and a field of tiny twinkling ring particles — and its bands cast soft shadows onto the cloud tops. Drag in any direction to turn it through any angle, flick for momentum, double-click or r to reset, arrow keys to nudge and Space to pause, and press i to reveal the spin axis, the pole marker and a live latitude/longitude or ring-name probe.
How does Uranus Animation work?
A full-bleed raw-WebGL1 fragment shader raytraces one sphere over a procedural atmosphere — no textures, no libraries. The shader samples a value-noise fbm/domain-warped cloud deck in the planet frame: broad soft belts plus fine latitude streaks, a slightly greener equator and bluer mid latitudes, a bright polar haze cap that is stronger on the sunlit pole, two crossfading methane cloud-streak samples that keep evolving, a thin high-altitude haze drifting a little faster than the belts, and the planet's faint 13-ring system (a dusty inner band, six narrow bright rings, the hair-thin epsilon (e) ring and a field of tiny twinkling ring particles) drawn as a procedural rotated-plane pass whose bands also cast soft shadow stripes back onto the cloud tops. A second 2D overlay canvas draws the inspect legend and a live probe. Drag in any direction to turn the planet through any angle via the same orientation trackball as the reference (planet frame U/V/pole A, re-orthonormalised after every rotation) with flick momentum, and double-click / r resets. Hovering the canvas enables the keyboard: i toggles inspect (spin-axis dashes, the pole marker and a readout of the hovered latitude/longitude or ring name), Space pauses, Escape clears, arrow keys nudge and r resets. prefers-reduced-motion starts it paused. The render loop is gated by an IntersectionObserver and the Page Visibility API so an off-screen tile never burns the GPU.
Which category does Uranus Animation belong to?
Uranus 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 Uranus Animation?
Optional class applied to the root container. It defaults to "".
What does the style prop do in Uranus Animation?
Optional inline styles for the root container. It defaults to {}.
Is Uranus Animation free to use?
Uranus 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 Uranus Animation use?
Uranus Animation uses React and is styled with Tailwind CSS.
What does Uranus Animation need to run?
Uranus Animation needs raw WebGL1 (no three.js/gsap) — one full-screen triangle, a single fragment shader, and uU/uV/uA 'planet frame in view space' uniforms, h21/h31 value noise with a 4-octave fbm and an ln() narrow-ring helper, procedural planet frame (uU/uV/uA) raytraced in the shader: broad belts + fine latitude streaks, greener equator / bluer mid latitudes, a pole haze cap brighter on the sunlit pole, two crossfading methane streak samples and a faster thin high-altitude haze and ringLayers(rr) profile (dusty band mask, six narrow rings via ln(), a hair-thin epsilon ring) plus a per-cell ring-particle pass with twinkle, and the ring bands casting shadow stripes onto the cloud tops.