- Docs
- Components
- Backgrounds
- Neural Float
Neural Float
Soft neural filaments drifting weightlessly across the canvas
Customize
Props
42| Name | Type | Default | Description |
|---|---|---|---|
colorCold | string | "#2659d9" | Cool end of the strand gradient. |
colorHot | string | "#d966d9" | Warm end of the strand gradient. |
backgroundColor | string | "#0a0a0a" | Fill behind the field. |
strands | number | 12 | Number of strand pairs woven through the field. |
strandDrift | number | 6 | How far the strand count breathes above and below its base. |
strandWidth | number | 1 | Tightness of the bright center of each strand. |
haloWidth | number | 1 | Spread of the halo around each strand. |
haloStrength | number | 0.5 | Brightness of that halo. |
speed | number | 1 | Global time multiplier. |
zoom | number | 1 | Field magnification, where higher values pull the weave closer. |
rotation | number | 0 | Rotation of the whole field in degrees. |
turbulence | number | 0.15 | How far turbulence bends each strand off its axis. |
turbulenceScale | number | 4 | Frequency of the turbulence that bends the strands. |
warp | number | 0.05 | Whole-field warp applied before the strands are drawn. |
pulseFrequency | number | 18 | Frequency of the light pulses running along each strand. |
pulseSpeed | number | 5 | Travel speed of those pulses. |
segmentFrequency | number | 6 | Frequency of the mask that breaks strands into segments. |
segmentSpeed | number | 2 | Drift speed of that mask. |
coreIntensity | number | 1.15 | Brightness of the plasma core at the center. |
coreFalloff | number | 5 | How quickly the core falls away from the center. |
swirlArms | number | 3 | Number of arms in the core swirl. |
swirlSpeed | number | 3 | Rotation speed of the core swirl. |
chromaticAberration | number | 0.006 | Lens-style color separation. |
posterize | number | 6 | Posterization steps, where lower values band harder. |
dither | number | 0.3 | How much of the posterized image bleeds through. |
ditherScale | number | 2 | Block size of the posterize sampling grid. |
fadeStart | number | 0.3 | Distance at which the field starts fading out. |
fadeEnd | number | 1.2 | Distance at which the field has fully faded. |
gamma | number | 0.9 | Output gamma, where lower values lift the shadows. |
brightness | number | 1 | Overall brightness multiplier. |
opacity | number | 1 | Master alpha from 0 to 1. |
cursorInteraction | boolean | true | Let the field drift toward the cursor. |
cursorParallax | number | 0.12 | How far the field drifts toward the cursor. |
detail | number | 3 | Turbulence octaves, the main quality and cost dial. |
adaptiveQuality | boolean | true | Drop resolution automatically to hold the frame rate. |
targetFps | number | 60 | Frame rate the adaptive scaler aims for. |
dpr | number | 2 | Upper bound on device pixel ratio, clamped to the real screen density. |
paused | boolean | false | Freeze all motion. |
children | ReactNode | undefined | Content rendered above the field. |
width | number | string | "100%" | Container width. |
height | number | string | "100%" | Container height. |
className | string | "" | Additional CSS classes. |
colorColdstringCool end of the strand gradient.
"#2659d9"colorHotstringWarm end of the strand gradient.
"#d966d9"backgroundColorstringFill behind the field.
"#0a0a0a"strandsnumberNumber of strand pairs woven through the field.
12strandDriftnumberHow far the strand count breathes above and below its base.
6strandWidthnumberTightness of the bright center of each strand.
1haloWidthnumberSpread of the halo around each strand.
1haloStrengthnumberBrightness of that halo.
0.5speednumberGlobal time multiplier.
1zoomnumberField magnification, where higher values pull the weave closer.
1rotationnumberRotation of the whole field in degrees.
0turbulencenumberHow far turbulence bends each strand off its axis.
0.15turbulenceScalenumberFrequency of the turbulence that bends the strands.
4warpnumberWhole-field warp applied before the strands are drawn.
0.05pulseFrequencynumberFrequency of the light pulses running along each strand.
18pulseSpeednumberTravel speed of those pulses.
5segmentFrequencynumberFrequency of the mask that breaks strands into segments.
6segmentSpeednumberDrift speed of that mask.
2coreIntensitynumberBrightness of the plasma core at the center.
1.15coreFalloffnumberHow quickly the core falls away from the center.
5swirlArmsnumberNumber of arms in the core swirl.
3swirlSpeednumberRotation speed of the core swirl.
3chromaticAberrationnumberLens-style color separation.
0.006posterizenumberPosterization steps, where lower values band harder.
6dithernumberHow much of the posterized image bleeds through.
0.3ditherScalenumberBlock size of the posterize sampling grid.
2fadeStartnumberDistance at which the field starts fading out.
0.3fadeEndnumberDistance at which the field has fully faded.
1.2gammanumberOutput gamma, where lower values lift the shadows.
0.9brightnessnumberOverall brightness multiplier.
1opacitynumberMaster alpha from 0 to 1.
1cursorInteractionbooleanLet the field drift toward the cursor.
truecursorParallaxnumberHow far the field drifts toward the cursor.
0.12detailnumberTurbulence octaves, the main quality and cost dial.
3adaptiveQualitybooleanDrop resolution automatically to hold the frame rate.
truetargetFpsnumberFrame rate the adaptive scaler aims for.
60dprnumberUpper bound on device pixel ratio, clamped to the real screen density.
2pausedbooleanFreeze all motion.
falsechildrenReactNodeContent rendered above the field.
undefinedwidthnumber | stringContainer width.
"100%"heightnumber | stringContainer height.
"100%"classNamestringAdditional CSS classes.
""