Voxel Arc

A curved horizon of square voxels rolling like a calm sea

voxel-arc-tw

Customize

Color

Accent

Background

Density

1.00

Voxel Size

0.55

Roundness

0.20

Tilt

1.00

Horizon

0.56

Curvature

0.50

Wave Height

1.00

Wave Length

1.00

Speed

0.50

Turbulence

0.40

Brightness

1.00

Glow

1.00

Haze

0.70

Bloom

0.50

Focus

0.25

Aperture

0.35

Grain

0.25

Ripples

1.00

InteractiveIntroPaused

Props

Name	Type	Default	Description
`color`	string	`"#5227FF"`	Colour of the voxel field in the troughs and the distance.
`accentColor`	string	`"#B19EEF"`	Colour the crests and the horizon light up in. Both colours become matching inks on light backgrounds.
`backgroundColor`	string	`"transparent"`	Background of the component. Transparent reads the colour behind the component.
`density`	number	`1`	How many voxels make up the field. Higher values give finer pixels.
`voxelSize`	number	`0.55`	Size of each voxel as a share of the grid spacing.
`roundness`	number	`0.2`	Corner rounding, from 0 (square pixels) to 1 (round dots).
`tilt`	number	`1`	How flat the voxels lie on the surface. 1 lies them on the waves in perspective; 0 turns them to face the viewer.
`horizon`	number	`0.56`	Height of the horizon as a fraction of the frame, from the top.
`curvature`	number	`0.5`	How much the horizon curves away at the sides, from 0 (flat) to 1.5 (a planet's limb).
`waveHeight`	number	`1`	Height of the rolling waves. 0 gives a still, flat field.
`waveLength`	number	`1`	Length of the waves. Lower values give a choppier surface.
`speed`	number	`0.5`	How fast the waves roll in. 0 holds the field still.
`turbulence`	number	`0.4`	Amount of smaller, crossing waves riding on the swell.
`brightness`	number	`1`	Overall brightness of the voxels.
`glow`	number	`1`	Light along the horizon, so the far edge of the field reads as a glowing arc.
`haze`	number	`0.7`	Soft atmosphere hugging the horizon. 0 keeps the sky the page colour.
`bloom`	number	`0.5`	Soft glow around the brightest voxels on dark backgrounds.
`focus`	number	`0.25`	Distance that is in sharp focus, from 0 (the nearest voxels) to 1 (the horizon).
`aperture`	number	`0.35`	Depth of field. Higher values soften voxels away from the focus into haze.
`grain`	number	`0.25`	Fine film grain over the lit areas.
`interactive`	boolean	`true`	Moving the pointer over the field leaves a wake; clicking or tapping drops a ripple into it.
`ripples`	number	`1`	Strength of the wake and the ripples.
`intro`	boolean	`true`	Light comes up from the horizon toward the viewer when the field first appears.
`paused`	boolean	`false`	Stops the motion. Reduced-motion users get a still field.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`children`	ReactNode	`—`	Content laid over the field, such as a hero headline. Clicks on its links and buttons never drop ripples.
`ref`	{ ripple, replay }	`—`	ripple(x?, y?, strength?) drops a ripple 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.

colorstring

Colour of the voxel field in the troughs and the distance.

Default"#5227FF"

accentColorstring

Colour the crests and the horizon light up in. Both colours become matching inks on light backgrounds.

Default"#B19EEF"

backgroundColorstring

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

Default"transparent"

densitynumber

How many voxels make up the field. Higher values give finer pixels.

Default1

voxelSizenumber

Size of each voxel as a share of the grid spacing.

Default0.55

roundnessnumber

Corner rounding, from 0 (square pixels) to 1 (round dots).

Default0.2

tiltnumber

How flat the voxels lie on the surface. 1 lies them on the waves in perspective; 0 turns them to face the viewer.

Default1

horizonnumber

Height of the horizon as a fraction of the frame, from the top.

Default0.56

curvaturenumber

How much the horizon curves away at the sides, from 0 (flat) to 1.5 (a planet's limb).

Default0.5

waveHeightnumber

Height of the rolling waves. 0 gives a still, flat field.

Default1

waveLengthnumber

Length of the waves. Lower values give a choppier surface.

Default1

speednumber

How fast the waves roll in. 0 holds the field still.

Default0.5

turbulencenumber

Amount of smaller, crossing waves riding on the swell.

Default0.4

brightnessnumber

Overall brightness of the voxels.

Default1

glownumber

Light along the horizon, so the far edge of the field reads as a glowing arc.

Default1

hazenumber

Soft atmosphere hugging the horizon. 0 keeps the sky the page colour.

Default0.7

bloomnumber

Soft glow around the brightest voxels on dark backgrounds.

Default0.5

focusnumber

Distance that is in sharp focus, from 0 (the nearest voxels) to 1 (the horizon).

Default0.25

aperturenumber

Depth of field. Higher values soften voxels away from the focus into haze.

Default0.35

grainnumber

Fine film grain over the lit areas.

Default0.25

interactiveboolean

Moving the pointer over the field leaves a wake; clicking or tapping drops a ripple into it.

Defaulttrue

ripplesnumber

Strength of the wake and the ripples.

Default1

introboolean

Light comes up from the horizon toward the viewer when the field first appears.

Defaulttrue

pausedboolean

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

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

childrenReactNode

Content laid over the field, such as a hero headline. Clicks on its links and buttons never drop ripples.

Default—

ref{ ripple, replay }

ripple(x?, y?, strength?) drops a ripple 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

color

string

"#5227FF"

Colour of the voxel field in the troughs and the distance.

accentColor

string

"#B19EEF"

Colour the crests and the horizon light up in. Both colours become matching inks on light backgrounds.

backgroundColor

string

"transparent"

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

density

number

1

How many voxels make up the field. Higher values give finer pixels.

voxelSize

number

0.55

Size of each voxel as a share of the grid spacing.

roundness

number

0.2

Corner rounding, from 0 (square pixels) to 1 (round dots).

tilt

number

1

How flat the voxels lie on the surface. 1 lies them on the waves in perspective; 0 turns them to face the viewer.

horizon

number

0.56

Height of the horizon as a fraction of the frame, from the top.

curvature

number

0.5

How much the horizon curves away at the sides, from 0 (flat) to 1.5 (a planet's limb).

waveHeight

number

1

Height of the rolling waves. 0 gives a still, flat field.

waveLength

number

1

Length of the waves. Lower values give a choppier surface.

speed

number

0.5

How fast the waves roll in. 0 holds the field still.

turbulence

number

0.4

Amount of smaller, crossing waves riding on the swell.

brightness

number

1

Overall brightness of the voxels.

glow

number

1

Light along the horizon, so the far edge of the field reads as a glowing arc.

haze

number

0.7

Soft atmosphere hugging the horizon. 0 keeps the sky the page colour.

bloom

number

0.5

Soft glow around the brightest voxels on dark backgrounds.

focus

number

0.25

Distance that is in sharp focus, from 0 (the nearest voxels) to 1 (the horizon).

aperture

number

0.35

Depth of field. Higher values soften voxels away from the focus into haze.

grain

number

0.25

Fine film grain over the lit areas.

interactive

boolean

true

Moving the pointer over the field leaves a wake; clicking or tapping drops a ripple into it.

ripples

number

1

Strength of the wake and the ripples.

intro

boolean

true

Light comes up from the horizon toward the viewer when the field first appears.

paused

boolean

false

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

dpr

number

2

Maximum device pixel ratio for the canvas.

children

ReactNode

—

Content laid over the field, such as a hero headline. Clicks on its links and buttons never drop ripples.

ref

{ ripple, replay }

—

ripple(x?, y?, strength?) drops a ripple 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.