Sky
Sky is an interactive background in the UI HUB interactive backgrounds collection. A Canvas 2D atmospheric sky: a vertical multi-stop gradient horizon built from three palettes (day: bright blue with faint stars; dusk: violet + orange with a low warm sun; night: deep navy with a bright moon), a warm sun or pale moon rendered from a cached 560x560 offscreen radial-gradient sprite (hot white core + out…
The component is driven by 12 documented props (palette, stars, starCount, twinkleSpeed, clouds, cloudCount and 6 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: Canvas 2D; requestAnimationFrame loop; ResizeObserver.
Preview the interactive background in the browser above, copy the source, and paste it into your project. Interactive Backgrounds components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Sky?
A serene animated sky with a glowing sun or moon, twinkling stars and drifting cumulus clouds eased by pointer parallax.
Sky at a glance
- Category
- Interactive Backgrounds
- Pricing
- Free to use
- Libraries
- React
- Language
- TypeScript
- Styling
- Tailwind CSS
- Configurable props
- 12
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Sky works
A Canvas 2D atmospheric sky: a vertical multi-stop gradient horizon built from three palettes (day: bright blue with faint stars; dusk: violet + orange with a low warm sun; night: deep navy with a bright moon), a warm sun or pale moon rendered from a cached 560x560 offscreen radial-gradient sprite (hot white core + outer falloff haze), a seeded field of 130 twinkling stars concentrated toward the zenith (pow(rng,1.3)*0.85 high-altitude distribution; twinkle = 0.35 + 0.65 * max(0, sin(time * twinkleSpeed * 0.4 * speed + phase)) cosine curve with halo for bright stars), and soft cumulus clouds pre-baked into offscreen 480x220 puff sprites (8-12 overlapping radial-gradient blobs tinted per palette) that drift at dt * speed * (cloudSpeed*2.5 + 6), self-wrap at width + w, and draw a mirrored edge copy when overflowing. Pointer parallax uses a normalized target clamped to [-1,1] with exponential lerp (1 - exp(-4*dt)) across layers: stars 0.2x, orb 0.45x, clouds (0.5 + depth * 0.7)x. DPR capped at 2 (1.5 on canvases >1920px) with setTransform reset on ResizeObserver, cloud x positions re-homed if they pass width*1.5, IntersectionObserver parks the rAF loop off-screen, and prefers-reduced-motion cancels the loop, zeroes parallax and draws one static frame. The decorative canvas is pointer-events none and carries an aria-label describing the active palette.
Technical information for Sky
| Category | Interactive Backgrounds |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| Language | TypeScript |
| Rendering | HTML canvas, CSS gradients, ResizeObserver |
| State change | calm gradient horizon with drifting clouds to pointer-eased parallax shifting the cloud, star and glow layers at different depths |
| Props | 12 configurable |
| Usage example | Included on this page |
What Sky requires
- Canvas 2D
- requestAnimationFrame loop
- ResizeObserver
- IntersectionObserver parking
- seeded rng
- cached orb + cloud sprites
- exponential lerp pointer parallax
- devicePixelRatio cap
- prefers-reduced-motion support
How to use Sky
- Install React if your project does not already use it.
- Copy the usage example from the Source section of this page. It shows the import path and the props the component expects.
- Render <Sky /> in your page using that import path.
- Pass any of the 12 documented props to change colours, density, speed or behaviour.
Sky questions
What is Sky?
A serene animated sky with a glowing sun or moon, twinkling stars and drifting cumulus clouds eased by pointer parallax.
How does Sky work?
A Canvas 2D atmospheric sky: a vertical multi-stop gradient horizon built from three palettes (day: bright blue with faint stars; dusk: violet + orange with a low warm sun; night: deep navy with a bright moon), a warm sun or pale moon rendered from a cached 560x560 offscreen radial-gradient sprite (hot white core + outer falloff haze), a seeded field of 130 twinkling stars concentrated toward the zenith (pow(rng,1.3)*0.85 high-altitude distribution; twinkle = 0.35 + 0.65 * max(0, sin(time * twinkleSpeed * 0.4 * speed + phase)) cosine curve with halo for bright stars), and soft cumulus clouds pre-baked into offscreen 480x220 puff sprites (8-12 overlapping radial-gradient blobs tinted per palette) that drift at dt * speed * (cloudSpeed*2.5 + 6), self-wrap at width + w, and draw a mirrored edge copy when overflowing. Pointer parallax uses a normalized target clamped to [-1,1] with exponential lerp (1 - exp(-4*dt)) across layers: stars 0.2x, orb 0.45x, clouds (0.5 + depth * 0.7)x. DPR capped at 2 (1.5 on canvases >1920px) with setTransform reset on ResizeObserver, cloud x positions re-homed if they pass width*1.5, IntersectionObserver parks the rAF loop off-screen, and prefers-reduced-motion cancels the loop, zeroes parallax and draws one static frame. The decorative canvas is pointer-events none and carries an aria-label describing the active palette.
Which category does Sky belong to?
Sky is listed under Interactive Backgrounds in the UI HUB catalog. Interactive backgrounds react to cursor movement, scroll and pointer position, so the page feels alive instead of static. Every background here is built as a real React component with configurable props, so you can tune colours, density and speed rather than shipping a black box. Preview one in the browser, read the props, then copy the code straight into your project.
What does the palette prop do in Sky?
Colour mood of the sky: day (bright blue, faint stars), dusk (violet + orange horizon, visible stars), night (deep navy, bright stars). It defaults to "dusk".
What does the stars prop do in Sky?
Whether twinkling stars render in the upper sky. It defaults to true.
Is Sky free to use?
Sky is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Sky use?
Sky uses React and is styled with Tailwind CSS.
What does Sky need to run?
Sky needs Canvas 2D, requestAnimationFrame loop, ResizeObserver and IntersectionObserver parking.