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 @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