@devil7softwares/react-drifter-stars

React version of Drifter Stars by Cory Hughart

Usage no npm install needed!

<script type="module">
  import devil7softwaresReactDrifterStars from 'https://cdn.skypack.dev/@devil7softwares/react-drifter-stars';
</script>

README

React Drifter Stars build npm license min minzip

Drifter Stars by @cr0ybot ported to React with Typescript support

Demo

View Demos @ Storybook

Quick Start

  1. Install package from NPM npm install @devil7softwares/react-drifter-stars
  2. Import drifter stars in your component import DrifterStars from '@devil7softwares/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 '@devil7softwares/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.

Options

NOTE: All of the options below are optional.

Prop Type Description
color string Color of particles, flare & lines.
renderMesh boolean Specifies whether mesh should be rendered.
blurSize number Size of blur for overall canvas.
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 Description
render boolean Specifies whether particles should be rendered.
count number Count of the particles to generate.\nNOTE: Particles will be generated even if its not going to be rendered)
sizeBase number Base size for particles. Size of particle will be calculated as "Z-Axis x Multiplier + Base".
sizeMultiplier number Multiplier for particle size calculation. Size of particle will be calculated as "Z-Axis x Multiplier + Base".
flickerSmoothing number Amount of smoothing to apply on flickering. Higher Value = Smoother Flicker.

IFlareOptions

Prop Type Description
render boolean Specifies whether flares should be rendered.
count number Count of the flares to render.
sizeBase number Base size for flare. Size of flare will be calculated as "Z-Axis x Multiplier + Base".
sizeMultiplier number Multiplier for flare size calculation. Size of flare will be calculated as "Z-Axis x Multiplier + Base".

IGlareOptions

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

ILinkOptions

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

IMotionOptions

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

Credits

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