← DOCS
backgrounds

Starfield

Animated canvas starfield with depth, twinkle, and parallax effects.

npx chaos add starfield

PREVIEW

USAGE

case 'glass-button': return ; case 'neon-glow': return ; case 'floating-button': return ;
import { Starfield } from '@oalacea/chaosui/backgrounds/starfield';

<Starfield />
<Starfield starCount={500} speed={1} />
<Starfield direction="right" twinkle={false} color="#ff0040" />

PROPS

PropTypeDefault
starCountNumber of stars
number200
speedStar movement speed
number0.5
colorStar color
string"#ffffff"
minSizeMinimum star size
number0.5
maxSizeMaximum star size
number2
twinkleEnable twinkling
booleantrue
twinkleSpeedTwinkle speed
number0.02
depthPerspective depth
number1000
directionMovement direction
"center" | "right" | "down" | "random""center"
backgroundColorCanvas background
string"transparent"
mouseParallaxMouse parallax effect
booleantrue
parallaxIntensityParallax strength
number0.5