Neptune Animation
Neptune Animation is a space animation in the UI HUB space & planets collection. A single full-bleed raw-WebGL1 canvas raytraces one sphere over a procedural fragment shader — 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 a mat3 'view -> planet' uniform; hash13/hash12 value noise with fbm3 and fbm4 octave sums for the cloud deck, nebula and domain warp; procedural planet frame: lat=asin(q.y), lon=atan(q.x,q.z) sampled after a re-orthonormalised 3x3 rotation (mul/tr/Rx/Ry/Rz/ortho + a glm column-major upload).
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 Neptune Animation?
A fully procedural, endlessly rotating Neptune built on a raw WebGL1 fragment shader — one raytraced sphere, no textures, no libraries. Differential zonal winds band the blue methane deck (equator lags, high latitudes run ahead) while four domain-warped eddies twist the flow, bright cirrus belts brighten cloud tops, and the Great Dark Spot drifts west with bright companion clouds as the Small Dark Spot races south. A pointer-following light leans the planet toward the cursor with parallax stars behind. Drag in any direction to turn it a full 360° with fading momentum, wheel or two-finger pinch to zoom 0.7x-1.8x, double-click to reset, arrow keys to turn and +/- to zoom, and hover a storm for a named callout.
Neptune 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 Neptune Animation works
A single full-bleed raw-WebGL1 canvas raytraces one sphere over a procedural fragment shader — no textures, no libraries. The shader samples a domain-warped cloud deck in the planet frame: four twisting eddies (twist() curls the sampling coords around a point), two-phase differential zonal winds (equator lags, high latitudes run ahead, capped by a pair of flow-map phases), value-noise fbm3/fbm4 bands for the blue methane tone, gaussian latitude belts of bright cirrus, the Great Dark Spot (an elongated ellipse drifting west with bright companion clouds), and the faster southern Small Dark Spot. The sky behind is near-black with a faint nebula and a sparse twinkling star grid (parallax by pointer). A pointer-following light direction lights the disk (diffuse + limb + rim + inner atmosphere), the planet leans slightly toward the pointer, and hovering a storm eases an accelerating highlight (uHi) and shows a pill callout with its name. Drag in any direction to turn it 360 degrees via a re-orthonormalised 3x3 trackball with flick momentum, wheel or two-finger pinch zooms 0.7x to 1.8x, double-click resets, arrow keys turn and +/- zoom, 0 resets. prefers-reduced-motion freezes the flow.
Technical information for Neptune Animation
| Category | Space & Planets |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| Rendering | WebGL shaders, HTML canvas, requestAnimationFrame |
| State change | Neptune quietly spinning under a still starfield, a slow parallax drift following the cursor, no callout visible to the user dragging the planet in any direction with momentum, zooming 0.7x-1.8x, hovering a storm to reveal its named callout, or double-clicking / pressing 0 to snap back home |
| Props | 2 configurable |
| Usage example | Not published yet |
What Neptune Animation requires
- raw WebGL1 (no three.js/gsap) — one full-screen triangle, a single fragment shader, and a mat3 'view -> planet' uniform
- hash13/hash12 value noise with fbm3 and fbm4 octave sums for the cloud deck, nebula and domain warp
- procedural planet frame: lat=asin(q.y), lon=atan(q.x,q.z) sampled after a re-orthonormalised 3x3 rotation (mul/tr/Rx/Ry/Rz/ortho + a glm column-major upload)
- twist() domain-warped eddies and two-phase differential zonal winds (wz = -0.009*cos(2*lat)+0.003*sin(9*lat))
- Great Dark Spot (drifting lat/lon ellipse + companion clouds) and a faster southern Small Dark Spot, both picked in JS with the same ell() maths for the hover callout
- pointer-following light (default [-0.55,0.42,0.72]) with lean + star parallax easing, hover highlight uniform (uHi) and a DOM pill label
- 3x3 trackball drag with flick momentum, pointer-capture, two-finger pinch and wheel zoom clamped 0.7x-1.8x, double-click / key reset
- dynamic resolution guard: DPR-base * quality with a 2.4e6 px cap, dropping quality 0.8x if frames run slow
- ResizeObserver scopes sizing to the container; keyboard is guarded to fire only over the canvas
- full teardown on unmount (cancel rAF, disconnect ResizeObserver, remove listeners, WEBGL_lose_context)
Neptune Animation questions
What is Neptune Animation?
A fully procedural, endlessly rotating Neptune built on a raw WebGL1 fragment shader — one raytraced sphere, no textures, no libraries. Differential zonal winds band the blue methane deck (equator lags, high latitudes run ahead) while four domain-warped eddies twist the flow, bright cirrus belts brighten cloud tops, and the Great Dark Spot drifts west with bright companion clouds as the Small Dark Spot races south. A pointer-following light leans the planet toward the cursor with parallax stars behind. Drag in any direction to turn it a full 360° with fading momentum, wheel or two-finger pinch to zoom 0.7x-1.8x, double-click to reset, arrow keys to turn and +/- to zoom, and hover a storm for a named callout.
How does Neptune Animation work?
A single full-bleed raw-WebGL1 canvas raytraces one sphere over a procedural fragment shader — no textures, no libraries. The shader samples a domain-warped cloud deck in the planet frame: four twisting eddies (twist() curls the sampling coords around a point), two-phase differential zonal winds (equator lags, high latitudes run ahead, capped by a pair of flow-map phases), value-noise fbm3/fbm4 bands for the blue methane tone, gaussian latitude belts of bright cirrus, the Great Dark Spot (an elongated ellipse drifting west with bright companion clouds), and the faster southern Small Dark Spot. The sky behind is near-black with a faint nebula and a sparse twinkling star grid (parallax by pointer). A pointer-following light direction lights the disk (diffuse + limb + rim + inner atmosphere), the planet leans slightly toward the pointer, and hovering a storm eases an accelerating highlight (uHi) and shows a pill callout with its name. Drag in any direction to turn it 360 degrees via a re-orthonormalised 3x3 trackball with flick momentum, wheel or two-finger pinch zooms 0.7x to 1.8x, double-click resets, arrow keys turn and +/- zoom, 0 resets. prefers-reduced-motion freezes the flow.
Which category does Neptune Animation belong to?
Neptune 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 Neptune Animation?
Optional class applied to the root container. It defaults to "".
What does the style prop do in Neptune Animation?
Optional inline styles for the root container. It defaults to {}.
Is Neptune Animation free to use?
Neptune 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 Neptune Animation use?
Neptune Animation uses React and is styled with Tailwind CSS.
What does Neptune Animation need to run?
Neptune Animation needs raw WebGL1 (no three.js/gsap) — one full-screen triangle, a single fragment shader, and a mat3 'view -> planet' uniform, hash13/hash12 value noise with fbm3 and fbm4 octave sums for the cloud deck, nebula and domain warp, procedural planet frame: lat=asin(q.y), lon=atan(q.x,q.z) sampled after a re-orthonormalised 3x3 rotation (mul/tr/Rx/Ry/Rz/ortho + a glm column-major upload) and twist() domain-warped eddies and two-phase differential zonal winds (wz = -0.009*cos(2*lat)+0.003*sin(9*lat)).