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.