Concentric Tides

Fine glowing arcs pinching into a bright hourglass

concentric-tides-tw

Customize

Arcs

Waist

Background

Lines

Thickness

1.00px

Spread

0.36

Ghost

0.60

Glow

1.00

Intensity

1.00

Speed

1.00

Breathe

0.40

Angle

0°

Center Y

0.50

Hue Shift

0°

Color Cycle

0.00

Surge

1.00

Hover Boost

0.50

Click SurgeInteractivePaused

Props

Name	Type	Default	Description
`colors`	[string, string]	`["#B19EEF", "#FF9FFC"]`	Colour of the arcs and colour of the glowing waist where they converge. The brightest point burns toward white.
`backgroundColor`	string	`"#0A0A0A"`	Colour behind the arcs.
`mode`	"auto" \| "glow" \| "ink"	`"auto"`	glow adds light for dark backgrounds, ink draws coloured lines for light ones. auto picks from the background brightness.
`lineCount`	number	`18`	Number of bright arcs in the fan. More arcs merge into a longer glowing waist.
`thickness`	number	`1`	Width of each arc in pixels.
`spread`	number	`0.36`	How far the fan opens at the left and right edges, as a fraction of the height.
`ghost`	number	`0.6`	Visibility of the faint outer arcs that sweep off toward the corners, from 0 to 3.
`glow`	number	`1`	Bloom around the converging waist, from 0 (crisp lines only) to 3.
`intensity`	number	`1`	Overall exposure.
`speed`	number	`1`	How fast the arcs sweep through the fan. Negative values sweep the other way.
`breathe`	number	`0.4`	Slow opening and closing of the fan, like a tide, from 0 to 2.
`angle`	number	`0`	Rotation of the whole composition in degrees.
`centerY`	number	`0.5`	Vertical position of the waist, from 0 (top) to 1 (bottom). Useful for leaving room for a headline.
`hueShift`	number	`0`	Rotates both colours around the colour wheel, in degrees.
`colorCycle`	number	`0`	Speed at which both colours drift back and forth around the colour wheel. 0 keeps them fixed.
`surge`	number	`1`	Strength of a surge: the fan swells open, brightens and speeds up, then settles back on a spring.
`clickSurge`	boolean	`true`	Clicking the background sends a surge.
`hoverBoost`	number	`0.5`	How much the sweep quickens and the waist brightens while the pointer is over the component, from 0 to 2.
`interactive`	boolean	`true`	Respond to hover and clicks.
`paused`	boolean	`false`	Freeze the sweep. Reduced-motion users always get a still frame.
`quality`	number	`1`	Resolution scale from 0.25 to 1. Lower values are cheaper on large screens.
`ref`	{ surge }	`—`	surge(strength) sends a surge from code, for example when a form is submitted.
`children`	ReactNode	`—`	Content placed over the background.
`className`	string	`—`	Classes for the root element. It fills its parent, with a 240px minimum height.
`style`	CSSProperties	`—`	Inline styles for the root element.

colors[string, string]

Colour of the arcs and colour of the glowing waist where they converge. The brightest point burns toward white.

Default["#B19EEF", "#FF9FFC"]

backgroundColorstring

Colour behind the arcs.

Default"#0A0A0A"

mode"auto" | "glow" | "ink"

glow adds light for dark backgrounds, ink draws coloured lines for light ones. auto picks from the background brightness.

Default"auto"

lineCountnumber

Number of bright arcs in the fan. More arcs merge into a longer glowing waist.

Default18

thicknessnumber

Width of each arc in pixels.

Default1

spreadnumber

How far the fan opens at the left and right edges, as a fraction of the height.

Default0.36

ghostnumber

Visibility of the faint outer arcs that sweep off toward the corners, from 0 to 3.

Default0.6

glownumber

Bloom around the converging waist, from 0 (crisp lines only) to 3.

Default1

intensitynumber

Overall exposure.

Default1

speednumber

How fast the arcs sweep through the fan. Negative values sweep the other way.

Default1

breathenumber

Slow opening and closing of the fan, like a tide, from 0 to 2.

Default0.4

anglenumber

Rotation of the whole composition in degrees.

Default0

centerYnumber

Vertical position of the waist, from 0 (top) to 1 (bottom). Useful for leaving room for a headline.

Default0.5

hueShiftnumber

Rotates both colours around the colour wheel, in degrees.

Default0

colorCyclenumber

Speed at which both colours drift back and forth around the colour wheel. 0 keeps them fixed.

Default0

surgenumber

Strength of a surge: the fan swells open, brightens and speeds up, then settles back on a spring.

Default1

clickSurgeboolean

Clicking the background sends a surge.

Defaulttrue

hoverBoostnumber

How much the sweep quickens and the waist brightens while the pointer is over the component, from 0 to 2.

Default0.5

interactiveboolean

Respond to hover and clicks.

Defaulttrue

pausedboolean

Freeze the sweep. Reduced-motion users always get a still frame.

Defaultfalse

qualitynumber

Resolution scale from 0.25 to 1. Lower values are cheaper on large screens.

Default1

ref{ surge }

surge(strength) sends a surge from code, for example when a form is submitted.

Default—

childrenReactNode

Content placed over the background.

Default—

classNamestring

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

Default—

styleCSSProperties

Inline styles for the root element.

Default—

Name

Type

Default

Description

colors

[string, string]

["#B19EEF", "#FF9FFC"]

Colour of the arcs and colour of the glowing waist where they converge. The brightest point burns toward white.

backgroundColor

string

"#0A0A0A"

Colour behind the arcs.

mode

"auto" | "glow" | "ink"

"auto"

glow adds light for dark backgrounds, ink draws coloured lines for light ones. auto picks from the background brightness.

lineCount

number

18

Number of bright arcs in the fan. More arcs merge into a longer glowing waist.

thickness

number

1

Width of each arc in pixels.

spread

number

0.36

How far the fan opens at the left and right edges, as a fraction of the height.

ghost

number

0.6

Visibility of the faint outer arcs that sweep off toward the corners, from 0 to 3.

glow

number

1

Bloom around the converging waist, from 0 (crisp lines only) to 3.

intensity

number

1

Overall exposure.

speed

number

1

How fast the arcs sweep through the fan. Negative values sweep the other way.

breathe

number

0.4

Slow opening and closing of the fan, like a tide, from 0 to 2.

angle

number

0

Rotation of the whole composition in degrees.

centerY

number

0.5

Vertical position of the waist, from 0 (top) to 1 (bottom). Useful for leaving room for a headline.

hueShift

number

0

Rotates both colours around the colour wheel, in degrees.

colorCycle

number

0

Speed at which both colours drift back and forth around the colour wheel. 0 keeps them fixed.

surge

number

1

Strength of a surge: the fan swells open, brightens and speeds up, then settles back on a spring.

clickSurge

boolean

true

Clicking the background sends a surge.

hoverBoost

number

0.5

How much the sweep quickens and the waist brightens while the pointer is over the component, from 0 to 2.

interactive

boolean

true

Respond to hover and clicks.

paused

boolean

false

Freeze the sweep. Reduced-motion users always get a still frame.

quality

number

1

Resolution scale from 0.25 to 1. Lower values are cheaper on large screens.

ref

{ surge }

—

surge(strength) sends a surge from code, for example when a form is submitted.

children

ReactNode

—

Content placed over the background.

className

string

—

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

style

CSSProperties

—

Inline styles for the root element.