Spectral Clouds
Volumetric clouds tinted with drifting spectral light
Customize
Props
38| Name | Type | Default | Description |
|---|---|---|---|
speed | number | 1 | How fast the cloud bank churns. |
steps | number | 40 | Volume samples per ray, higher is smoother and slower. |
octaves | number | 4 | Layers of turbulence folded into the volume, 1 to 6. |
focal | number | 1 | Field of view, lower is more telephoto. |
swirl | number | 0.6 | How fast the core winds and unwinds the cloud. |
swirlFalloff | number | 5 | How quickly the twist fades away from the core. |
waveAmp | number | 0.5 | Depth of the turbulence folds. |
waveFreq | number | 4 | Size of the largest fold, higher is finer. |
waveLapse | number | 1.6 | How much finer each successive fold gets. |
waveSpeed | number | 0.3 | How fast the folds travel. |
thickness | number | 0.25 | Half height of the cloud slab. |
softness | number | 0.008 | Smallest step a ray may take, lower is sharper and slower. |
passthrough | number | 0.15 | How far rays coast once they leave the slab. |
sky | number | 7 | How sharply brightness falls off toward the edges of the slab. |
reach | number | 3.2 | How far a ray travels before it is abandoned. |
density | number | 1.2 | Overall opacity of the cloud. |
spectrum | number | 0.85 | How much of the spectral rainbow shows through, 0 to 1. |
colorWave | number | 12 | How tightly the spectrum bands wrap the slab. |
colorSpeed | number | 0.3 | How fast the spectrum sways back and forth. |
colorTwist | number | 1 | How much depth skews the spectrum. |
bloom | number | 0.35 | Strength of the hot core. |
bloomPower | number | 3 | How tightly the hot core clings to the densest cloud. |
grain | number | 0.035 | Film grain strength, 0 to 1. |
vignette | number | 0.25 | Corner darkening, 0 to 1. |
opacity | number | 1 | Master alpha. |
cursorSteer | number | 0.12 | How far the pointer leans the view. |
color | string | "#e9d5ff" | Colour the whole cloud is tinted with. |
highlightColor | string | "#f5d0fe" | Colour of the hot core. |
backgroundColor | string | "#0a0a0a" | Backdrop colour, or "transparent" to show the page through. |
grainRate | number | 24 | Grain refreshes per second. |
cursorInteraction | boolean | true | Let the pointer lean the view. |
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. |
maxFps | number | 40 | Upper bound on rendered frames per second. |
dpr | number | 1.1 | Upper device pixel ratio bound. |
className | string | - | Extra classes for the wrapper. |
children | ReactNode | - | Content layered above the clouds. |
speednumberHow fast the cloud bank churns.
1stepsnumberVolume samples per ray, higher is smoother and slower.
40octavesnumberLayers of turbulence folded into the volume, 1 to 6.
4focalnumberField of view, lower is more telephoto.
1swirlnumberHow fast the core winds and unwinds the cloud.
0.6swirlFalloffnumberHow quickly the twist fades away from the core.
5waveAmpnumberDepth of the turbulence folds.
0.5waveFreqnumberSize of the largest fold, higher is finer.
4waveLapsenumberHow much finer each successive fold gets.
1.6waveSpeednumberHow fast the folds travel.
0.3thicknessnumberHalf height of the cloud slab.
0.25softnessnumberSmallest step a ray may take, lower is sharper and slower.
0.008passthroughnumberHow far rays coast once they leave the slab.
0.15skynumberHow sharply brightness falls off toward the edges of the slab.
7reachnumberHow far a ray travels before it is abandoned.
3.2densitynumberOverall opacity of the cloud.
1.2spectrumnumberHow much of the spectral rainbow shows through, 0 to 1.
0.85colorWavenumberHow tightly the spectrum bands wrap the slab.
12colorSpeednumberHow fast the spectrum sways back and forth.
0.3colorTwistnumberHow much depth skews the spectrum.
1bloomnumberStrength of the hot core.
0.35bloomPowernumberHow tightly the hot core clings to the densest cloud.
3grainnumberFilm grain strength, 0 to 1.
0.035vignettenumberCorner darkening, 0 to 1.
0.25opacitynumberMaster alpha.
1cursorSteernumberHow far the pointer leans the view.
0.12colorstringColour the whole cloud is tinted with.
"#e9d5ff"highlightColorstringColour of the hot core.
"#f5d0fe"backgroundColorstringBackdrop colour, or "transparent" to show the page through.
"#0a0a0a"grainRatenumberGrain refreshes per second.
24cursorInteractionbooleanLet the pointer lean the view.
truepausedbooleanFreeze the animation.
falseadaptiveQualitybooleanScale back resolution when the frame budget slips.
truetargetFpsnumberFrame rate the quality meter aims to hold.
60maxFpsnumberUpper bound on rendered frames per second.
40dprnumberUpper device pixel ratio bound.
1.1classNamestringExtra classes for the wrapper.
-childrenReactNodeContent layered above the clouds.
-