Saturn Animation
Saturn Animation is a space animation in the UI HUB space & planets collection. A single full-bleed 2D canvas holds a fixed 608x1080 stage. Boot seeds a deterministic LCG (a 256x256 value-noise lattice at seed 7, 340 twinkling stars at seed 42 and 15,000 ring particles at seed 2024 in C/B/A tone bands with Cassini and Encke gaps), precomputes per-pixel constants for a 2x-supersampled planet sprite…
The component is driven by 4 documented props (className, style, 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 (no library); seeded deterministic LCG RNG (linear congruential 1664525/1013904223) for the noise lattice, starfield and ring particles; precomputed per-pixel sphere constants and a CPU raytrace into an offscreen 2x planet sprite.
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 Saturn Animation?
A cinematic procedural Saturn rendered entirely in Canvas 2D — no WebGL, no libraries. A per-pixel CPU raytrace spins a true oblate sphere with differential rotation, banded albedo, a pale storm oval and a dark spot, limb-darkened and lit from a single direction, while 15,000 ring particles orbit at real Keplerian speeds across C/B/A tone bands with Cassini and Encke gaps, cast the planet's shadow and pass both behind and in front of the planet. A small moon circles on the equatorial plane under a drifting twinkling starfield. Move to offset and roll the scene, drag to boost the spin, click for a ring-sized burst — all closed-form and seekable, honouring prefers-reduced-motion.
Saturn Animation at a glance
- Category
- Space & Planets
- Pricing
- Pro component
- Libraries
- React
- Styling
- Tailwind CSS
- Configurable props
- 4
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Saturn Animation works
A single full-bleed 2D canvas holds a fixed 608x1080 stage. Boot seeds a deterministic LCG (a 256x256 value-noise lattice at seed 7, 340 twinkling stars at seed 42 and 15,000 ring particles at seed 2024 in C/B/A tone bands with Cassini and Encke gaps), precomputes per-pixel constants for a 2x-supersampled planet sprite (unit sphere x/y/z, limb-darkening + diffuse light term, edge alpha), then each frame draws the far ring half, an atmospheric glow, a black occluder disc, the CPU-raytraced planet sprite (differential-latitude spin, banded albedo, pale storm oval, dark spot, ring-shadow band, limb darkening), the near ring half with the planet's shadow cast on it, the equatorial moon (clipped behind the planet when far) and a drifting twinkling starfield. Ring opening (rho) and roll (theta) sweep on a 22s closed-form cycle, the pole tilt follows the ring (e = asin rho) and every motion term is closed-form so any time renders directly. The pointer offsets and rolls the whole scene, a drag adds a decaying spin boost, a click swells the ring/moon radii (burst), and the hint fades on first contact or after 6s.
Technical information for Saturn Animation
| Category | Space & Planets |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| Rendering | HTML canvas, ResizeObserver, requestAnimationFrame |
| State change | a quietly rotating ringed planet and its moon under a still starfield, ring particles drifting at Keplerian speeds, the hint visible to the pointer offsetting and rolling the scene, a drag boosting the spin, a click bursting the ring and moon outward |
| Props | 4 configurable |
| Usage example | Not published yet |
What Saturn Animation requires
- Canvas 2D context (no library)
- seeded deterministic LCG RNG (linear congruential 1664525/1013904223) for the noise lattice, starfield and ring particles
- precomputed per-pixel sphere constants and a CPU raytrace into an offscreen 2x planet sprite
- Keplerian differential ring orbit (w ~ r^-1.5) with C/B/A tone bands, Cassini and Encke gaps and the planet's shadow on the far ring
- closed-form seekable motion (ring opening/roll on a 22s cycle, differential spin, equatorial moon orbit)
- Pointer Events (mouse + touch: pointermove/pointerdown/pointerup/pointerleave/pointercancel) scoped to the component canvas with getBoundingClientRect-local coordinates and setPointerCapture
- ResizeObserver cover-fits the 608x1080 buffer to the stage (scaled by the larger axis to fill the box edge-to-edge, overflow centred and cropped, never stretched)
- prefers-reduced-motion matchMedia (parks the clock; the scene still draws a static pose)
- full teardown on unmount (cancel rAF, disconnect ResizeObserver, remove listeners, clear the hint timeout)
Saturn Animation questions
What is Saturn Animation?
A cinematic procedural Saturn rendered entirely in Canvas 2D — no WebGL, no libraries. A per-pixel CPU raytrace spins a true oblate sphere with differential rotation, banded albedo, a pale storm oval and a dark spot, limb-darkened and lit from a single direction, while 15,000 ring particles orbit at real Keplerian speeds across C/B/A tone bands with Cassini and Encke gaps, cast the planet's shadow and pass both behind and in front of the planet. A small moon circles on the equatorial plane under a drifting twinkling starfield. Move to offset and roll the scene, drag to boost the spin, click for a ring-sized burst — all closed-form and seekable, honouring prefers-reduced-motion.
How does Saturn Animation work?
A single full-bleed 2D canvas holds a fixed 608x1080 stage. Boot seeds a deterministic LCG (a 256x256 value-noise lattice at seed 7, 340 twinkling stars at seed 42 and 15,000 ring particles at seed 2024 in C/B/A tone bands with Cassini and Encke gaps), precomputes per-pixel constants for a 2x-supersampled planet sprite (unit sphere x/y/z, limb-darkening + diffuse light term, edge alpha), then each frame draws the far ring half, an atmospheric glow, a black occluder disc, the CPU-raytraced planet sprite (differential-latitude spin, banded albedo, pale storm oval, dark spot, ring-shadow band, limb darkening), the near ring half with the planet's shadow cast on it, the equatorial moon (clipped behind the planet when far) and a drifting twinkling starfield. Ring opening (rho) and roll (theta) sweep on a 22s closed-form cycle, the pole tilt follows the ring (e = asin rho) and every motion term is closed-form so any time renders directly. The pointer offsets and rolls the whole scene, a drag adds a decaying spin boost, a click swells the ring/moon radii (burst), and the hint fades on first contact or after 6s.
Which category does Saturn Animation belong to?
Saturn 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 Saturn Animation?
Optional class applied to the root container. It defaults to "".
What does the style prop do in Saturn Animation?
Optional inline styles for the root container. It defaults to {}.
Is Saturn Animation free to use?
Saturn 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 Saturn Animation use?
Saturn Animation uses React and is styled with Tailwind CSS.
What does Saturn Animation need to run?
Saturn Animation needs Canvas 2D context (no library), seeded deterministic LCG RNG (linear congruential 1664525/1013904223) for the noise lattice, starfield and ring particles, precomputed per-pixel sphere constants and a CPU raytrace into an offscreen 2x planet sprite and Keplerian differential ring orbit (w ~ r^-1.5) with C/B/A tone bands, Cassini and Encke gaps and the planet's shadow on the far ring.