Rising Particles
Particles glowing softly as they rise and drift upward
Customize
Props
31| Name | Type | Default | Description |
|---|---|---|---|
speed | number | 1 | How fast the motes climb. |
count | number | 100 | How many motes are in the air. |
minSize | number | 0.02 | Diameter of the smallest mote, in screen heights. |
maxSize | number | 0.06 | Diameter of the largest mote, in screen heights. |
spread | number | 1 | Horizontal reach of the field, 1 fills a square viewport. |
sway | number | 0.05 | How far a mote drifts sideways as it rises. |
swayRate | number | 0.6 | How quickly that drift oscillates. |
depth | number | 0.65 | Difference in speed and scale between the nearest and farthest motes. |
coreSize | number | 0.35 | Radius of the solid centre, as a fraction of the mote. |
coreSoftness | number | 0.85 | Edge softness of that centre. |
glow | number | 1 | Brightness of the halo around each mote. |
glowFalloff | number | 2 | How steeply the halo falls off, higher is tighter. |
fade | number | 0.35 | How far into the top and bottom edges a mote fades. |
gain | number | 0.9 | Overall brightness before the highlight rolloff. |
bloom | number | 0.35 | How much the brightest cores wash out toward white. |
color | string | "#b34dff" | Colour of the nearest motes. |
farColor | string | "#5b2bd9" | Colour of the farthest motes. |
grain | number | 0.04 | Film grain strength, 0 to 1. |
grainRate | number | 24 | Grain refreshes per second. |
vignette | number | 0.25 | Corner darkening, 0 to 1. |
backgroundColor | string | "#0a0a0a" | Panel backdrop, or "transparent" to show the page through. |
opacity | number | 1 | Master alpha. |
cursorInteraction | boolean | true | Let the pointer push motes out of the way. |
cursorPush | number | 0.12 | How far motes are pushed. |
cursorRadius | number | 0.35 | Reach of that push. |
paused | boolean | false | Freeze the animation. |
adaptiveQuality | boolean | true | Scale back resolution when the frame budget slips. |
targetFps | number | 60 | Frame rate the quality meter aims to hold. |
dpr | number | 1.75 | Upper device pixel ratio bound. |
className | string | - | Optional className applied to the root. |
children | ReactNode | - | Content layered above the particle field. |
speednumberHow fast the motes climb.
1countnumberHow many motes are in the air.
100minSizenumberDiameter of the smallest mote, in screen heights.
0.02maxSizenumberDiameter of the largest mote, in screen heights.
0.06spreadnumberHorizontal reach of the field, 1 fills a square viewport.
1swaynumberHow far a mote drifts sideways as it rises.
0.05swayRatenumberHow quickly that drift oscillates.
0.6depthnumberDifference in speed and scale between the nearest and farthest motes.
0.65coreSizenumberRadius of the solid centre, as a fraction of the mote.
0.35coreSoftnessnumberEdge softness of that centre.
0.85glownumberBrightness of the halo around each mote.
1glowFalloffnumberHow steeply the halo falls off, higher is tighter.
2fadenumberHow far into the top and bottom edges a mote fades.
0.35gainnumberOverall brightness before the highlight rolloff.
0.9bloomnumberHow much the brightest cores wash out toward white.
0.35colorstringColour of the nearest motes.
"#b34dff"farColorstringColour of the farthest motes.
"#5b2bd9"grainnumberFilm grain strength, 0 to 1.
0.04grainRatenumberGrain refreshes per second.
24vignettenumberCorner darkening, 0 to 1.
0.25backgroundColorstringPanel backdrop, or "transparent" to show the page through.
"#0a0a0a"opacitynumberMaster alpha.
1cursorInteractionbooleanLet the pointer push motes out of the way.
truecursorPushnumberHow far motes are pushed.
0.12cursorRadiusnumberReach of that push.
0.35pausedbooleanFreeze the animation.
falseadaptiveQualitybooleanScale back resolution when the frame budget slips.
truetargetFpsnumberFrame rate the quality meter aims to hold.
60dprnumberUpper device pixel ratio bound.
1.75classNamestringOptional className applied to the root.
-childrenReactNodeContent layered above the particle field.
-