BACK TO DIRECTORY
Starry Sky adds a container block that behaves like the core Cover block — you
can nest any blocks on top of it (headings, paragraphs, buttons, etc.) — but
instead of a background image it paints a realistic night sky on an HTML canvas:
- Hundreds of stars with varied sizes, brightness, and true stellar colours
(blue-white, white, warm, orange, and red), rendered with a soft glow. - Diffraction “sparkle” spikes on the brightest stars.
- Gentle twinkling.
- Mouse interaction: the whole field parallaxes with the pointer (nearer stars
move more), and stars near the cursor are pushed away and spring back — a
push-and-pull that follows the mouse. - Click the sky to launch a shooting star from that point.
- Occasional shooting stars drift by on their own, at a rate you set
(shooting stars per minute; 0 to turn them off).
Settings (block sidebar):
- Minimum height
- Star density
- React to mouse movement (on/off)
- Twinkle (on/off)
- Shooting star on click (on/off)
- Shooting stars per minute (0–30; 0 = off)
- Sky colour
- Vertical alignment of the overlaid content (toolbar)
Accessibility & performance:
- Respects
prefers-reduced-motion(renders a static sky, no animation or
pointer reaction). - Uses pre-baked sprites and pauses rendering while the block is off-screen.