Jupiter Animation
Jupiter Animation is a space animation in the UI HUB space & planets collection. A two-pass raw-WebGL1 pipeline — no textures, no libraries. A bake fragment shader paints a 2048x1024 equirectangular surface into an FBO in 16 scissored strips (one strip per frame, so the page never stalls): a latitude colour palette (30 stops, south pole to north pole) sampled from a 1024x1 texture unit, domain-warp…
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) — two programs (a bake shader and a raytraced-sphere shader) sharing one full-screen quad; hash/vn value noise with a 4-octave fbm, a wrapped-angle helper wr() and an embedding emb() for the domain warp; a latitude colour palette (30 stops, south pole to north pole) baked into a 1024x1 texture on unit 1 and sampled by the bake shader.
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 Jupiter Animation?
A fully procedural, endlessly rotating Jupiter rendered by a two-pass raw-WebGL1 pipeline — no textures, no libraries. A bake shader paints a 2048x1024 equirectangular surface in 16 scissored strips so the page never stalls: a latitude colour palette warped by two stages of fbm domain warp, zone/belt turbulence tied to the Great Red Spot's longitudes, popcorn convective cells in the bright zones, diagonal festoons and dark blue-grey hot spots on the equatorial belt edge, a polar haze, the swirling Great Red Spot itself, plus 56 seeded small ovals and dots (white ovals, brown dots and a ringed oval around the Great Belt Arc). A second raytraced sphere shader samples that baked map with a single sun, limb shading, a warm and a cool limb glow and a sparse star field. Drag in any direction to turn the planet, flick for momentum, wheel or two-finger pinch to zoom 0.5x-2.4x, double-click to reset and Space to pause.
Jupiter 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 Jupiter Animation works
A two-pass raw-WebGL1 pipeline — no textures, no libraries. A bake fragment shader paints a 2048x1024 equirectangular surface into an FBO in 16 scissored strips (one strip per frame, so the page never stalls): a latitude colour palette (30 stops, south pole to north pole) sampled from a 1024x1 texture unit, domain-warped by two fbm stages into zones and belts, with turbulence strength driven by the Great Red Spot's longitudes; popcorn convective cells brighten the zones, diagonal festoons and dark blue-grey hot spots sit on the equatorial belt edge, a polar haze cools the poles, the swirling Great Red Spot is drawn with a white collar and a dark core, and 56 seeded ovals/dots (white ovals, brown dots and a ringed oval around the Great Belt Arc) are stamped via per-oval uniforms. A second raytraced sphere shader samples the baked map on the fly: a sparse star field, a warm horizon haze, a single sun with limb shading, a warm and a cool limb glow and a soft edge alpha. Drag in any direction to turn the planet via a tilt/yaw trackball with flick momentum, wheel or two-finger pinch zooms 0.5x-2.4x, double-click resets, and Space pauses. 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 Jupiter Animation
| Category | Space & Planets |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| Rendering | WebGL shaders, HTML canvas, requestAnimationFrame |
| State change | Jupiter quietly spinning on a black sky, its zones/belts, festoons and the Great Red Spot visible, no drag to the user dragging the planet in any direction with momentum, zooming 0.5x-2.4x with the wheel / pinch, double-clicking to snap back home, or pausing the spin with Space |
| Props | 2 configurable |
| Usage example | Not published yet |
What Jupiter Animation requires
- raw WebGL1 (no three.js/gsap) — two programs (a bake shader and a raytraced-sphere shader) sharing one full-screen quad
- hash/vn value noise with a 4-octave fbm, a wrapped-angle helper wr() and an embedding emb() for the domain warp
- a latitude colour palette (30 stops, south pole to north pole) baked into a 1024x1 texture on unit 1 and sampled by the bake shader
- an FBO-backed 2048x1024 surface bake painted in 16 scissored strips (one per frame) so the page never stalls
- bake-stage maths: two fbm domain-warp passes (broad meanders + fine folds), turbulence banded by the Great Red Spot longitudes, popcorn cells, festoons, hot spots, polar haze, the Great Red Spot (spiral swirls + white collar) and 56 seeded ovals/dots passed as vec4/vec2 uniform arrays
- raytraced sphere sampling the baked map on unit 0: roll/tilt rotation, a single sun with limb shading, warm + cool limb glows, a warm horizon haze and a sparse star field
- trackball drag (yaw + tilt, tilt clamped +/-PI/2) with a 0.94/frame flick, pointer-capture, wheel + two-finger pinch zoom clamped 0.5x-2.4x, double-click reset
- sizing from the container box with a DPR cap and a 1.6e6 px budget, rebuilt on a rAF-throttled ResizeObserver (the window resize became a ResizeObserver on the root)
- 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 strip bake is deferred and paused until the box is visible
- full teardown on unmount (cancel rAF, disconnect ResizeObserver + IntersectionObserver, remove listeners, deleteProgram/deleteShader/deleteBuffer/deleteTexture/deleteFramebuffer; never loseContext)
Jupiter Animation questions
What is Jupiter Animation?
A fully procedural, endlessly rotating Jupiter rendered by a two-pass raw-WebGL1 pipeline — no textures, no libraries. A bake shader paints a 2048x1024 equirectangular surface in 16 scissored strips so the page never stalls: a latitude colour palette warped by two stages of fbm domain warp, zone/belt turbulence tied to the Great Red Spot's longitudes, popcorn convective cells in the bright zones, diagonal festoons and dark blue-grey hot spots on the equatorial belt edge, a polar haze, the swirling Great Red Spot itself, plus 56 seeded small ovals and dots (white ovals, brown dots and a ringed oval around the Great Belt Arc). A second raytraced sphere shader samples that baked map with a single sun, limb shading, a warm and a cool limb glow and a sparse star field. Drag in any direction to turn the planet, flick for momentum, wheel or two-finger pinch to zoom 0.5x-2.4x, double-click to reset and Space to pause.
How does Jupiter Animation work?
A two-pass raw-WebGL1 pipeline — no textures, no libraries. A bake fragment shader paints a 2048x1024 equirectangular surface into an FBO in 16 scissored strips (one strip per frame, so the page never stalls): a latitude colour palette (30 stops, south pole to north pole) sampled from a 1024x1 texture unit, domain-warped by two fbm stages into zones and belts, with turbulence strength driven by the Great Red Spot's longitudes; popcorn convective cells brighten the zones, diagonal festoons and dark blue-grey hot spots sit on the equatorial belt edge, a polar haze cools the poles, the swirling Great Red Spot is drawn with a white collar and a dark core, and 56 seeded ovals/dots (white ovals, brown dots and a ringed oval around the Great Belt Arc) are stamped via per-oval uniforms. A second raytraced sphere shader samples the baked map on the fly: a sparse star field, a warm horizon haze, a single sun with limb shading, a warm and a cool limb glow and a soft edge alpha. Drag in any direction to turn the planet via a tilt/yaw trackball with flick momentum, wheel or two-finger pinch zooms 0.5x-2.4x, double-click resets, and Space pauses. 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 Jupiter Animation belong to?
Jupiter 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 Jupiter Animation?
Optional class applied to the root container. It defaults to "".
What does the style prop do in Jupiter Animation?
Optional inline styles for the root container. It defaults to {}.
Is Jupiter Animation free to use?
Jupiter 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 Jupiter Animation use?
Jupiter Animation uses React and is styled with Tailwind CSS.
What does Jupiter Animation need to run?
Jupiter Animation needs raw WebGL1 (no three.js/gsap) — two programs (a bake shader and a raytraced-sphere shader) sharing one full-screen quad, hash/vn value noise with a 4-octave fbm, a wrapped-angle helper wr() and an embedding emb() for the domain warp, a latitude colour palette (30 stops, south pole to north pole) baked into a 1024x1 texture on unit 1 and sampled by the bake shader and an FBO-backed 2048x1024 surface bake painted in 16 scissored strips (one per frame) so the page never stalls.