1.0.6 • Published 2 years ago
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