Chroma Current

Currents of light flowing across a grid of glowing dots

chroma-current-tw

Customize

Color A

Color B

Background

Scale

1.00

Center X

0.50

Center Y

0.50

Pitch

8px

Dot Size

0.62

Variance

0.35

Base Dots

0.12

Stretch

0.20

Streams

Spread

0.50

Speed

0.60

Direction

0°

Turbulence

0.60

Trail

0.60

Intensity

1.00

Bloom

0.60

Grain

0.20

Stir

1.00

Plume

1.00

InteractiveIntroPaused

Props

Name	Type	Default	Description
`colors`	[string, string]	`["#5227FF", "#FF9FFC"]`	Two colours the currents are tinted between, blended in OKLab and drifting slowly along each stream. On light backgrounds they become matching inks.
`backgroundColor`	string	`"transparent"`	Background of the component. Transparent reads the colour behind the component.
`pattern`	"streams" \| "waves" \| "vortex" \| "radial" \| "contours"	`"streams"`	Shape of the flow: meandering currents, clean sine waves, a spiral whirlpool, rays fanning out from a point, or the moving contour lines of a landscape.
`scale`	number	`1`	Size of the pattern: the wavelength of waves, the tightness of the spiral, or the size of contour shapes.
`centerX`	number	`0.5`	Horizontal centre of the vortex and radial patterns, as a fraction of the width. Values outside 0 to 1 place it off-frame.
`centerY`	number	`0.5`	Vertical centre of the vortex and radial patterns, as a fraction of the height from the top. 1.2 rises rays from below the frame.
`pitch`	number	`8`	Distance between dots in pixels.
`dotSize`	number	`0.62`	Size of a fully lit dot as a share of the pitch.
`variance`	number	`0.35`	How much a dot's size follows its brightness: 0 keeps every dot the same size like an LED panel, 1 gives a halftone.
`shape`	"circle" \| "square"	`"circle"`	Shape of each dot.
`baseDots`	number	`0.12`	Faint unlit dots across the whole grid, so the matrix reads even where no current flows.
`stretch`	number	`0.2`	How much bright dots stretch along the direction of the flow, like a slight motion blur.
`streams`	number	`4`	Number of currents, waves, spiral arms, rays or contour levels, from 1 to 16.
`spread`	number	`0.5`	Width of each current.
`speed`	number	`0.6`	How fast the currents flow. 0 holds them still.
`direction`	number	`0`	Direction of the flow in degrees for streams and waves: 0 flows to the right, 90 rises. For vortex and contours, negative values reverse the spin.
`turbulence`	number	`0.6`	How much the currents meander and curl.
`trail`	number	`0.6`	How long the light lingers behind the moving particles. Higher values give smoother, longer streams.
`intensity`	number	`1`	Brightness of the currents.
`bloom`	number	`0.6`	Soft glow around the brightest dots on dark backgrounds.
`grain`	number	`0.2`	Fine film grain over the lit areas.
`interactive`	boolean	`true`	Moving the pointer stirs the currents like a hand through water; clicking or tapping releases a puff of dye.
`stir`	number	`1`	How strongly the pointer stirs the flow.
`plume`	number	`1`	Amount of dye a click releases. 0 turns it off.
`intro`	boolean	`true`	The currents fade in as they start flowing when the component first appears.
`paused`	boolean	`false`	Stops the motion. Reduced-motion users get still currents.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`children`	ReactNode	`—`	Content laid over the currents, such as a hero headline. Clicks on its links and buttons never release dye.
`ref`	{ plume, replay }	`—`	plume(x?, y?, strength?) releases dye at a point given in fractions of the size; replay() replays the intro.
`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]

Two colours the currents are tinted between, blended in OKLab and drifting slowly along each stream. On light backgrounds they become matching inks.

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

backgroundColorstring

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

Default"transparent"

pattern"streams" | "waves" | "vortex" | "radial" | "contours"

Shape of the flow: meandering currents, clean sine waves, a spiral whirlpool, rays fanning out from a point, or the moving contour lines of a landscape.

Default"streams"

scalenumber

Size of the pattern: the wavelength of waves, the tightness of the spiral, or the size of contour shapes.

Default1

centerXnumber

Horizontal centre of the vortex and radial patterns, as a fraction of the width. Values outside 0 to 1 place it off-frame.

Default0.5

centerYnumber

Vertical centre of the vortex and radial patterns, as a fraction of the height from the top. 1.2 rises rays from below the frame.

Default0.5

pitchnumber

Distance between dots in pixels.

Default8

dotSizenumber

Size of a fully lit dot as a share of the pitch.

Default0.62

variancenumber

How much a dot's size follows its brightness: 0 keeps every dot the same size like an LED panel, 1 gives a halftone.

Default0.35

shape"circle" | "square"

Shape of each dot.

Default"circle"

baseDotsnumber

Faint unlit dots across the whole grid, so the matrix reads even where no current flows.

Default0.12

stretchnumber

How much bright dots stretch along the direction of the flow, like a slight motion blur.

Default0.2

streamsnumber

Number of currents, waves, spiral arms, rays or contour levels, from 1 to 16.

Default4

spreadnumber

Width of each current.

Default0.5

speednumber

How fast the currents flow. 0 holds them still.

Default0.6

directionnumber

Direction of the flow in degrees for streams and waves: 0 flows to the right, 90 rises. For vortex and contours, negative values reverse the spin.

Default0

turbulencenumber

How much the currents meander and curl.

Default0.6

trailnumber

How long the light lingers behind the moving particles. Higher values give smoother, longer streams.

Default0.6

intensitynumber

Brightness of the currents.

Default1

bloomnumber

Soft glow around the brightest dots on dark backgrounds.

Default0.6

grainnumber

Fine film grain over the lit areas.

Default0.2

interactiveboolean

Moving the pointer stirs the currents like a hand through water; clicking or tapping releases a puff of dye.

Defaulttrue

stirnumber

How strongly the pointer stirs the flow.

Default1

plumenumber

Amount of dye a click releases. 0 turns it off.

Default1

introboolean

The currents fade in as they start flowing when the component first appears.

Defaulttrue

pausedboolean

Stops the motion. Reduced-motion users get still currents.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

childrenReactNode

Content laid over the currents, such as a hero headline. Clicks on its links and buttons never release dye.

Default—

ref{ plume, replay }

plume(x?, y?, strength?) releases dye at a point given in fractions of the size; replay() replays the intro.

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"]

Two colours the currents are tinted between, blended in OKLab and drifting slowly along each stream. On light backgrounds they become matching inks.

backgroundColor

string

"transparent"

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

pattern

"streams" | "waves" | "vortex" | "radial" | "contours"

"streams"

Shape of the flow: meandering currents, clean sine waves, a spiral whirlpool, rays fanning out from a point, or the moving contour lines of a landscape.

scale

number

1

Size of the pattern: the wavelength of waves, the tightness of the spiral, or the size of contour shapes.

centerX

number

0.5

Horizontal centre of the vortex and radial patterns, as a fraction of the width. Values outside 0 to 1 place it off-frame.

centerY

number

0.5

Vertical centre of the vortex and radial patterns, as a fraction of the height from the top. 1.2 rises rays from below the frame.

pitch

number

8

Distance between dots in pixels.

dotSize

number

0.62

Size of a fully lit dot as a share of the pitch.

variance

number

0.35

How much a dot's size follows its brightness: 0 keeps every dot the same size like an LED panel, 1 gives a halftone.

shape

"circle" | "square"

"circle"

Shape of each dot.

baseDots

number

0.12

Faint unlit dots across the whole grid, so the matrix reads even where no current flows.

stretch

number

0.2

How much bright dots stretch along the direction of the flow, like a slight motion blur.

streams

number

4

Number of currents, waves, spiral arms, rays or contour levels, from 1 to 16.

spread

number

0.5

Width of each current.

speed

number

0.6

How fast the currents flow. 0 holds them still.

direction

number

0

Direction of the flow in degrees for streams and waves: 0 flows to the right, 90 rises. For vortex and contours, negative values reverse the spin.

turbulence

number

0.6

How much the currents meander and curl.

trail

number

0.6

How long the light lingers behind the moving particles. Higher values give smoother, longer streams.

intensity

number

1

Brightness of the currents.

bloom

number

0.6

Soft glow around the brightest dots on dark backgrounds.

grain

number

0.2

Fine film grain over the lit areas.

interactive

boolean

true

Moving the pointer stirs the currents like a hand through water; clicking or tapping releases a puff of dye.

stir

number

1

How strongly the pointer stirs the flow.

plume

number

1

Amount of dye a click releases. 0 turns it off.

intro

boolean

true

The currents fade in as they start flowing when the component first appears.

paused

boolean

false

Stops the motion. Reduced-motion users get still currents.

dpr

number

2

Maximum device pixel ratio for the canvas.

children

ReactNode

—

Content laid over the currents, such as a hero headline. Clicks on its links and buttons never release dye.

ref

{ plume, replay }

—

plume(x?, y?, strength?) releases dye at a point given in fractions of the size; replay() replays the intro.

className

string

—

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

style

CSSProperties

—

Inline styles for the root element.