Eclipse

A dark shape eclipsing a soft, color-shifting corona of light

eclipse-tw

Customize

First Color

Second Color

Background

Size

0.36

Offset X

0.00

Offset Y

0.00

Rotation

0°

Spin

2.0°/s

Roundness

0.20

Wobble

0.030

Light Angle

-35°

Light Offset

0.12

Corona

1.00

Intensity

1.00

Rim

1.00

Softness

0.20

Contrast

0.35

Interior

0.00

Streaks

0.00

Ambient

0.35

Speed

1.00

Parallax

0.50

Flare

1.00

Bloom

0.50

Grain

0.30

InteractiveIntroPaused

Props

Name	Type	Default	Description
`colors`	[string, string]	`["#5227FF", "#FF9FFC"]`	The two colours of the light, blended around the eclipse. The deep field colour is derived from the first. On light backgrounds they become matching inks.
`backgroundColor`	string	`"transparent"`	Background of the component. Transparent reads the colour behind the component.
`shape`	"circle" \| "blob" \| "triangle" \| "diamond" \| "pentagon" \| "hexagon"	`"circle"`	The dark shape in front of the light.
`size`	number	`0.36`	Radius of the shape as a share of the frame height. Larger values crop it.
`offsetX`	number	`0`	Moves the eclipse sideways, as a share of the frame width.
`offsetY`	number	`0`	Moves the eclipse down (positive) or up (negative), as a share of the frame height.
`rotation`	number	`0`	Rotation of the shape, in degrees.
`spin`	number	`2`	Slow rotation of the shape, in degrees per second.
`roundness`	number	`0.2`	Rounds the corners of the polygon shapes.
`wobble`	number	`0.03`	Slow organic breathing of the outline.
`lightAngle`	number	`-35`	Direction the light leaks from, in degrees (0 is right, 90 is up).
`lightOffset`	number	`0.12`	How far the light sits behind the shape off-centre, which thickens the crescent on that side.
`corona`	number	`1`	How far the glow spreads out from the shape.
`intensity`	number	`1`	Brightness of the light.
`rim`	number	`1`	Width of the coloured band of light just inside the shape's edge.
`softness`	number	`0.2`	Blur of the shape's silhouette.
`contrast`	number	`0.35`	How much brighter the lit side is than the far side.
`interior`	number	`0`	Lets a sweep of colour show through the shape, like light behind smoked glass.
`streaks`	number	`0`	Soft radial streaks running through the glow.
`ambient`	number	`0.35`	Strength of the deep colour washing the space around the eclipse.
`speed`	number	`1`	Speed of the drifting light, colour and outline.
`parallax`	number	`0.5`	How far the light peeks around the shape toward the pointer.
`interactive`	boolean	`true`	Click or tap to make the light flare out from that side of the shape.
`flareStrength`	number	`1`	Brightness of the flare a click sends out, from 0 to 2.
`bloom`	number	`0.5`	Soft glow around the brightest light.
`grain`	number	`0.3`	Fine film grain over the lit areas.
`intro`	boolean	`true`	The corona brightens and spreads out from the shape when the component appears.
`paused`	boolean	`false`	Stops the motion. Reduced-motion users get a still eclipse.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`children`	ReactNode	`—`	Content laid over the scene. Clicks on its links and buttons never trigger flares.
`ref`	{ flare, replay }	`—`	flare(angle?, strength?) sends a flare from an angle in degrees, replay() plays the intro again.
`className`	string	`—`	Classes for the root element. It fills its parent, with a 320px minimum height.
`style`	CSSProperties	`—`	Inline styles for the root element.

colors[string, string]

The two colours of the light, blended around the eclipse. The deep field colour is derived from the first. On light backgrounds they become matching inks.

Default["#5227FF", "#FF9FFC"]

backgroundColorstring

Background of the component. Transparent reads the colour behind the component.

Default"transparent"

The dark shape in front of the light.

Default"circle"

sizenumber

Radius of the shape as a share of the frame height. Larger values crop it.

Default0.36

offsetXnumber

Moves the eclipse sideways, as a share of the frame width.

Default0

offsetYnumber

Moves the eclipse down (positive) or up (negative), as a share of the frame height.

Default0

rotationnumber

Rotation of the shape, in degrees.

Default0

spinnumber

Slow rotation of the shape, in degrees per second.

Default2

roundnessnumber

Rounds the corners of the polygon shapes.

Default0.2

wobblenumber

Slow organic breathing of the outline.

Default0.03

lightAnglenumber

Direction the light leaks from, in degrees (0 is right, 90 is up).

Default-35

lightOffsetnumber

How far the light sits behind the shape off-centre, which thickens the crescent on that side.

Default0.12

coronanumber

How far the glow spreads out from the shape.

Default1

intensitynumber

Brightness of the light.

Default1

rimnumber

Width of the coloured band of light just inside the shape's edge.

Default1

softnessnumber

Blur of the shape's silhouette.

Default0.2

contrastnumber

How much brighter the lit side is than the far side.

Default0.35

interiornumber

Lets a sweep of colour show through the shape, like light behind smoked glass.

Default0

streaksnumber

Soft radial streaks running through the glow.

Default0

ambientnumber

Strength of the deep colour washing the space around the eclipse.

Default0.35

speednumber

Speed of the drifting light, colour and outline.

Default1

parallaxnumber

How far the light peeks around the shape toward the pointer.

Default0.5

interactiveboolean

Click or tap to make the light flare out from that side of the shape.

Defaulttrue

flareStrengthnumber

Brightness of the flare a click sends out, from 0 to 2.

Default1

bloomnumber

Soft glow around the brightest light.

Default0.5

grainnumber

Fine film grain over the lit areas.

Default0.3

introboolean

The corona brightens and spreads out from the shape when the component appears.

Defaulttrue

pausedboolean

Stops the motion. Reduced-motion users get a still eclipse.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

childrenReactNode

Content laid over the scene. Clicks on its links and buttons never trigger flares.

Default—

ref{ flare, replay }

flare(angle?, strength?) sends a flare from an angle in degrees, replay() plays the intro again.

Default—

classNamestring

Classes for the root element. It fills its parent, with a 320px minimum height.

Default—

styleCSSProperties

Inline styles for the root element.

Default—

Name

Type

Default

Description

colors

[string, string]

["#5227FF", "#FF9FFC"]

The two colours of the light, blended around the eclipse. The deep field colour is derived from the first. On light backgrounds they become matching inks.

backgroundColor

string

"transparent"

Background of the component. Transparent reads the colour behind the component.

shape

"circle"

The dark shape in front of the light.

size

number

0.36

Radius of the shape as a share of the frame height. Larger values crop it.

offsetX

number

0

Moves the eclipse sideways, as a share of the frame width.

offsetY

number

0

Moves the eclipse down (positive) or up (negative), as a share of the frame height.

rotation

number

0

Rotation of the shape, in degrees.

spin

number

2

Slow rotation of the shape, in degrees per second.

roundness

number

0.2

Rounds the corners of the polygon shapes.

wobble

number

0.03

Slow organic breathing of the outline.

lightAngle

number

-35

Direction the light leaks from, in degrees (0 is right, 90 is up).

lightOffset

number

0.12

How far the light sits behind the shape off-centre, which thickens the crescent on that side.

corona

number

1

How far the glow spreads out from the shape.

intensity

number

1

Brightness of the light.

rim

number

1

Width of the coloured band of light just inside the shape's edge.

softness

number

0.2

Blur of the shape's silhouette.

contrast

number

0.35

How much brighter the lit side is than the far side.

interior

number

0

Lets a sweep of colour show through the shape, like light behind smoked glass.

streaks

number

0

Soft radial streaks running through the glow.

ambient

number

0.35

Strength of the deep colour washing the space around the eclipse.

speed

number

1

Speed of the drifting light, colour and outline.

parallax

number

0.5

How far the light peeks around the shape toward the pointer.

interactive

boolean

true

Click or tap to make the light flare out from that side of the shape.

flareStrength

number

1

Brightness of the flare a click sends out, from 0 to 2.

bloom

number

0.5

Soft glow around the brightest light.

grain

number

0.3

Fine film grain over the lit areas.

intro

boolean

true

The corona brightens and spreads out from the shape when the component appears.

paused

boolean

false

Stops the motion. Reduced-motion users get a still eclipse.

dpr

number

2

Maximum device pixel ratio for the canvas.

children

ReactNode

—

Content laid over the scene. Clicks on its links and buttons never trigger flares.

ref

{ flare, replay }

—

flare(angle?, strength?) sends a flare from an angle in degrees, replay() plays the intro again.

className

string

—

Classes for the root element. It fills its parent, with a 320px minimum height.

style

CSSProperties

—

Inline styles for the root element.