Stars Background

Starry sky with cursor parallax. Pro · Effects › Backgrounds

A starfield that drifts upwards in three parallax layers, with a few brighter stars twinkling out of step, and leans towards the pointer on a spring — the near layers further than the far ones, so the sky has depth. Each layer is one painted box-shadow list the compositor slides, so a few hundred stars cost one layer; the twinkle is opacity only. The field is sized to the area and its star count follows the area's size, denser in a small one; the drift pauses off screen and in a hidden tab, and stops under reduced motion.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add stars-background

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { StarsBackground } from 'valyro-ui-pro';

Props

Prop	Type	Default
`speed`	`number`	`50`	Seconds the nearest stars take to drift 2000 px up; the farther layers are slower (default 50).
`factor`	`number`	`0.05`	How far the field leans towards the pointer, as a share of the pointer's distance from the centre (default 0.05).
`starColor`	`string`		Star colour (default: the theme's `--ui-stars-background-color`, else its foreground).
`parallax`	`boolean`	`true`	Lean towards the pointer with a spring (default true; never on touch or under reduced motion). Nearer layers lean further, for depth.
`twinkle`	`boolean`	`true`	A few brighter stars that slowly twinkle, each group on its own beat (default true; still under reduced motion).

Related components

Aurora Background — Slow aurora behind your content
Gradient Background — Slowly shifting gradient
Bubble Background — Soft colored bubbles, one follows the cursor
Hexagon Background — Hexagon grid with a glowing trail
Hole Background — Portal tunnel with rings and particles
Fireworks Background — Fireworks for wins and achievements, launch on click
Spotlight — Stage beams and a cursor spotlight
Meteors — Falling meteors
Background Pattern — Fading dot, grid and line backgrounds
Particles — Particle field that reacts to the cursor
Glass Lens — Glass lens with real refraction
Morphing Capsule — Capsule that flows between states

Previous: Bubble Background · Next: Hexagon Background · All Effects