Atmospheres / background

Galaxy

A layered star field with twinkling light and gentle pointer repulsion.

PLAYGROUND

Preparing preview…

Take it with you.

SOURCE ACCESS

Enter the shared password to copy the complete source, download every file, and install components in your app.

Access lasts 24 hours. Your preview settings stay with you.

Give the background an explicitly sized parent. Demo.tsx contains the complete composition.
Reduced motion renders a static state. Paused, hidden and offscreen instances stop requesting animation frames.
Original shader equations retained. A CSS fallback appears without WebGL2. Canvas dimensions are capped at 2048 pixels.
Speed controls shader drift; rotationSpeed independently controls rotation. disableAnimation freezes pointer interpolation as well as time.

React 19WebGL2OGL 1.0.11

React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.

Prop	Type	Default	Description
`starSpeed`	number	`0.5`	Star speed
`density`	number	`1`	Density
`hueShift`	number	`140`	Hue
`speed`	number	`1`	Drift speed
`glowIntensity`	number	`0.3`	Glow
`saturation`	number	`0`	Saturation
`repulsionStrength`	number	`2`	Repulsion
`twinkleIntensity`	number	`0.3`	Twinkle
`rotationSpeed`	number	`0.1`	Rotation
`autoCenterRepulsion`	number	`0`	Center repulsion
`mouseInteraction`	boolean	`true`	Pointer response
`mouseRepulsion`	boolean	`true`	Repel stars
`transparent`	boolean	`true`	Transparent
`lightMode`	boolean	`false`	Light mode
`focal`	[number, number]	`[0.5, 0.5]`	Normalized focal point.
`rotation`	[number, number]	`[1, 0]`	Cosine and sine of the fixed rotation angle.
`disableAnimation`	boolean	`false`	Alias for full pause, including pointer interpolation.
`time`	number	`undefined`	Explicit shader time in seconds; stops automatic frames. Reduced motion takes precedence.
`paused`	boolean	`false`	Freeze decorative motion; controls remain usable.
`replayToken`	number	`0`	Change to reset decorative motion.
`className`	string	`''`	Additional outer classes.