Eclipse
A turbulent spectral corona burning around a dark eclipse
Customize
Props
19| Name | Type | Default | Description |
|---|---|---|---|
speed | number | 1 | Playback rate of the corona drift. |
radius | number | 0.33 | Radius of the dark disc relative to the panel height. |
edgeSoftness | number | 0.55 | Width of the disc's soft edge as a fraction of its radius. |
reach | number | 1 | How far the corona extends from the disc. |
turbulence | number | 1 | Amplitude of the noise rippling the corona. |
streaks | number | 1 | Strength of the rotating angular streaks. |
brightness | number | 1 | Overall intensity of the corona. |
colorCycle | number | 1 | Rate at which the palette cycles. |
colors | string[] | undefined | Up to four palette colours. Omit for the full spectrum. |
backgroundColor | string | "#101519" | Panel backdrop, or "transparent". |
coreColor | string | "#101519" | Colour of the disc itself. |
opacity | number | 1 | Master opacity of the effect. |
cursorInteraction | boolean | true | Let the pointer stir the corona like a liquid. |
cursorStrength | number | 1 | How strongly pointer motion drags and swirls the corona. |
cursorRadius | number | 0.3 | Size of the stirred region relative to the panel height. |
paused | boolean | false | Freeze the animation. |
dpr | number | 1.75 | Upper device pixel ratio bound. |
className | string | undefined | Extra classes applied to the root. |
children | ReactNode | undefined | Content layered above the effect. |
speednumberPlayback rate of the corona drift.
1radiusnumberRadius of the dark disc relative to the panel height.
0.33edgeSoftnessnumberWidth of the disc's soft edge as a fraction of its radius.
0.55reachnumberHow far the corona extends from the disc.
1turbulencenumberAmplitude of the noise rippling the corona.
1streaksnumberStrength of the rotating angular streaks.
1brightnessnumberOverall intensity of the corona.
1colorCyclenumberRate at which the palette cycles.
1colorsstring[]Up to four palette colours. Omit for the full spectrum.
undefinedbackgroundColorstringPanel backdrop, or "transparent".
"#101519"coreColorstringColour of the disc itself.
"#101519"opacitynumberMaster opacity of the effect.
1cursorInteractionbooleanLet the pointer stir the corona like a liquid.
truecursorStrengthnumberHow strongly pointer motion drags and swirls the corona.
1cursorRadiusnumberSize of the stirred region relative to the panel height.
0.3pausedbooleanFreeze the animation.
falsedprnumberUpper device pixel ratio bound.
1.75classNamestringExtra classes applied to the root.
undefinedchildrenReactNodeContent layered above the effect.
undefined