Vertical blinds of light rolling across the frame
| Name | Type | Default | Description |
|---|---|---|---|
warp | number | 1 | Fan of the blinds, 0 keeps them straight. |
bandWidth | number | 0.1 | Spacing between the vertical blinds. |
drift | number | 0.2 | How fast the blinds roll across the panel. |
tilt | number | 0.5 | Vertical lean of the light ramp. |
gain | number | 1 | Overall brightness. |
contrast | number | 1.1 | Tone response curve, above 1 deepens the shadows. |
vignette | number | 0.35 | Corner falloff, 0 to 1. |
grain | number | 0.05 | Film grain strength, 0 to 1. |
grainSize | number | 1 | Grain cell size in CSS pixels. |
grainRate | number | 24 | Grain refreshes per second. |
color | string | "#334155" | Base colour of the panel. |
hotColor | string | "#e2e8f0" | Colour reached at the brightest point. |
backgroundColor | string | "#0a0a0a" | Panel backdrop, or "transparent" to show the page through. |
opacity | number | 1 | Master alpha. |
cursorInteraction | boolean | true | Let the light source track the pointer. |
cursorShift | number | 0.6 | How far the light source follows the pointer, 0 to 1. |
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 | 2 | Upper device pixel ratio bound. |
className | string | undefined | Extra classes for the panel. |
children | ReactNode | undefined | Content layered above the panel. |
warpnumberFan of the blinds, 0 keeps them straight.
1bandWidthnumberSpacing between the vertical blinds.
0.1driftnumberHow fast the blinds roll across the panel.
0.2tiltnumberVertical lean of the light ramp.
0.5gainnumberOverall brightness.
1contrastnumberTone response curve, above 1 deepens the shadows.
1.1vignettenumberCorner falloff, 0 to 1.
0.35grainnumberFilm grain strength, 0 to 1.
0.05grainSizenumberGrain cell size in CSS pixels.
1grainRatenumberGrain refreshes per second.
24colorstringBase colour of the panel.
"#334155"hotColorstringColour reached at the brightest point.
"#e2e8f0"backgroundColorstringPanel backdrop, or "transparent" to show the page through.
"#0a0a0a"opacitynumberMaster alpha.
1cursorInteractionbooleanLet the light source track the pointer.
truecursorShiftnumberHow far the light source follows the pointer, 0 to 1.
0.6pausedbooleanFreeze the animation.
falseadaptiveQualitybooleanScale back resolution when the frame budget slips.
truetargetFpsnumberFrame rate the quality meter aims to hold.
60dprnumberUpper device pixel ratio bound.
2classNamestringExtra classes for the panel.
undefinedchildrenReactNodeContent layered above the panel.
undefined