React Drifter Stars

Drifter Stars by @cr0ybot ported to React with Typescript support

Demo

View Demos @ Storybook

Quick Start

1. Install package from NPM npm install react-drifter-stars
2. Import drifter stars in your component import DrifterStars from 'react-drifter-stars'
3. Add component to your JSX/TSX <DrifterStars />
4. Import default stylesheet from package for default background. Or use your own css. import 'react-drifter-stars/dist/styles.css'

Note: The component is transparent by default and takes full width and height of window. And can be used with your existing background.

Requires React 18 or 19.

Options

NOTE: All of the options below are optional.

Prop	Type	Default	Description
color	string	#FFEED4	Color of particles, flare & lines.
colorVar	string		Name of a CSS custom property to read the color from. See Theming with CSS variables.
renderMesh	boolean	false	Specifies whether mesh should be rendered.
blurSize	number	0	Size of blur for overall canvas.
respectReducedMotion	boolean	true	Paints a single static frame instead of animating while the OS asks for reduced motion. See Reduced motion.
pixelRatio	boolean | number	false	Renders at the display's pixel density for sharper stars. true follows devicePixelRatio capped at 2, or pass a fixed ratio.
sizeMode	'window' | 'element'	'window'	Whether the canvas sizes to the viewport or to its own element box. See Sizing.
transformCanvasSize	function		Called with the width & height the canvas is about to use, returns the size to use instead.
particle	IParticleOptions		Particle related options.
flare	IFlareOptions		Particle flare options.
glare	IGlareOptions		Glare related options.
links	ILinkOptions		Link generation options.
motion	IMotionOptions		Motion/movement options.

IParticleOptions

Prop	Type	Default	Description
render	boolean	true	Specifies whether particles should be rendered.
count	number	40	Count of the particles to generate. (NOTE: Particles will be generated even if its not going to be rendered)
sizeBase	number	1	Base size for particles. Size of particle will be calculated as "Z-Axis x Multiplier + Base".
sizeMultiplier	number	0.5	Multiplier for particle size calculation. Size of particle will be calculated as "Z-Axis x Multiplier + Base".
flicker	boolean	false	Enables opacity flickering, which makes the particles twinkle.
flickerSmoothing	number	15	Amount of smoothing to apply on flickering. Higher Value = Smoother Flicker. Only applies while flicker is enabled.

IFlareOptions

Prop	Type	Default	Description
render	boolean	false	Specifies whether flares should be rendered. Flares are only created when this is enabled.
count	number	10	Count of the flares to render.
sizeBase	number	100	Base size for flare. Size of flare will be calculated as "Z-Axis x Multiplier + Base".
sizeMultiplier	number	100	Multiplier for flare size calculation. Size of flare will be calculated as "Z-Axis x Multiplier + Base".

IGlareOptions

Prop	Type	Default	Description
render	boolean	true	Specifies whether particle glare should be rendered.
angle	number	-60	Angle for glare to generate.
opacityMultiplier	number	0.05	Glare opacity multiplier.

ILinkOptions

Prop	Type	Default	Description
render	boolean	true	Specifies whether links should be rendered.
lineWidth	number	1	Width of link line to generate.
opacity	number	0.25	Opactity for link line. A number between 0 & 1.
chance	number	75	Probability for a new line to appear per frame. Higher Value = Smaller Chance.
fade	number	90	Number of frames for link to fade-out.
speed	number	1	Distance a link travels in 1 frame.
minLength	number	5	Minimum number of particles to link when a new line is generated.
maxLength	number	7	Maximum number of particles to link when a new line is generated.

IMotionOptions

Prop	Type	Default	Description
enabled	boolean	true	Enables/disables moving animation of particles.
ratio	number	0.05	Amount of motion to be generated. Used to generate motion based on mouse movement/device orientation changes.
randomMotion	boolean	true	Enables random motions even without user interation.
noiseLength	number	1000	Length of noice for random motion.
noiseStrength	number	1	Strength of noice for random motion.

Theming with CSS variables

Pass colorVar instead of color to take the color from a CSS custom property. It is resolved from the canvas element's computed style and re-resolved whenever the theme changes, so a light/dark toggle recolors the stars on the next frame without resetting their positions.

:root {
  --star-rgb: 199, 167, 255;
}

:root[data-theme='light'] {
  --star-rgb: 130, 103, 173;
}

<DrifterStars colorVar='--star-rgb' />

A bare "r, g, b" triplet is wrapped as rgb(...), which lets the same token be reused elsewhere with a custom alpha. Any other value (#ffeed4, rgb(1, 2, 3), rebeccapurple, ...) is used as-is.

Theme changes are picked up from the data-theme, class and style attributes of <html>, and from prefers-color-scheme. color takes precedence when both are given.

Reduced motion

By default the animation loop does not run at all while the operating system asks for reduced motion, a single static frame is painted instead. Toggling the setting starts and stops the animation without remounting. Pass respectReducedMotion={false} to opt out.

Sizing

The canvas follows the window by default. Set sizeMode='element' to follow the canvas element's own box instead, which is what you want when it lives in a container rather than filling the viewport. A ResizeObserver keeps it in step, including while the animation is not running.

NOTE: In this mode the canvas must be sized by CSS (the bundled stylesheet does this with position: fixed; inset: 0). Without it the element's box follows the backing store and the two feed into each other.

transformCanvasSize still gets the final say in both modes.

Credits

• Cory Hughart (@cr0ybot) - For original Drifter Stars animation.
• Steve Courtney - For Celsius GS's Drifter poster art