React Drifter Stars
Drifter Stars by @cr0ybot ported to React with Typescript support
Demo
View Demos @ Storybook
Quick Start
- Install package from NPM
npm install @devil7softwares/react-drifter-stars
- Import drifter stars in your component
import DrifterStars from '@devil7softwares/react-drifter-stars'
- Add component to your JSX/TSX
<DrifterStars />
- 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