Glimmer Wrap

A field of fine glints drifting past, flashing as they catch the light

glimmer-wrap-tw

Customize

Color A

Color B

Background

Count

1500

Size

1.60px

Size Variance

0.60

Brightness

1.00

Spread

1.00

Hollow

0.06

Perspective

0.70

Center X

0.50

Center Y

0.50

Speed

0.50

Twist

0.00

Turbulence

0.00

Trail

0.08

Glitter

0.50

Glint Size

1.00

Twinkle

0.50

Focus

0.62

Aperture

0.45

Boost

7.0

Parallax

0.50

WavesIntroPaused

Props

Name	Type	Default	Description
`colors`	[string, string]	`["#FFFFFF", "#B19EEF"]`	Two colours each glint is tinted between, blended in OKLab. On light backgrounds they turn into matching inks automatically.
`backgroundColor`	string	`"transparent"`	Background of the component. Transparent reads the colour behind the component.
`count`	number	`1500`	Number of glints in the field, up to 9000.
`size`	number	`1.6`	Size of a glint in pixels at the middle of the field.
`sizeVariance`	number	`0.6`	How much glint sizes vary.
`brightness`	number	`1`	Overall brightness of the field.
`spread`	number	`1`	Width of the field around the centre.
`hollow`	number	`0.06`	Size of the empty core around the centre, from 0 (filled) to 0.95 (a tunnel). Keeps the middle clear for content.
`perspective`	number	`0.7`	Depth of the field. Higher values fling near glints wider and faster.
`centerX`	number	`0.5`	Horizontal position of the vanishing point, as a fraction of the width.
`centerY`	number	`0.5`	Vertical position of the vanishing point. Above the frame gives falling snow; below it, glints rising from a horizon.
`speed`	number	`0.5`	Speed of travel through the field. 0 holds still.
`direction`	"outward" \| "inward"	`"outward"`	Fly into the field, or drift backwards out of it.
`twist`	number	`0`	Spiral twist of the field with depth. Negative values twist the other way.
`turbulence`	number	`0`	Gentle wobble in each glint's path.
`trail`	number	`0.08`	Shutter length for motion streaks. Streaks grow with speed, so warp boosts stretch them out.
`glitter`	number	`0.5`	How often glints catch the light and flash into four-point stars. 0 turns flashes off.
`glintSize`	number	`1`	Length of the four-point flash.
`twinkle`	number	`0.5`	Gentle brightness shimmer of every glint.
`focus`	number	`0.62`	Depth that is in sharp focus, from 0 (nearest) to 1 (farthest).
`aperture`	number	`0.45`	Depth of field. Higher values turn out-of-focus glints into soft bokeh.
`boost`	number	`7`	Speed multiplier while the pointer is held down, a short jump to warp. 1 turns it off.
`parallax`	number	`0.5`	How far the view turns toward the pointer, so near glints shift more than far ones.
`waves`	boolean	`true`	Click or tap to send a wave of light through the field, catching glints as it passes.
`intro`	boolean	`true`	Arrive out of warp: the field fades in at speed and settles to its cruising pace.
`paused`	boolean	`false`	Stops the motion. Reduced-motion users get a still field without flashes.
`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 send waves.
`ref`	{ wave, warp, replay }	`—`	wave(x?, y?) sends a wave from a position given in fractions of the size; warp(seconds?) boosts for a moment; 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 each glint is tinted between, blended in OKLab. On light backgrounds they turn into matching inks automatically.

Default["#FFFFFF", "#B19EEF"]

backgroundColorstring

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

Default"transparent"

countnumber

Number of glints in the field, up to 9000.

Default1500

sizenumber

Size of a glint in pixels at the middle of the field.

Default1.6

sizeVariancenumber

How much glint sizes vary.

Default0.6

brightnessnumber

Overall brightness of the field.

Default1

spreadnumber

Width of the field around the centre.

Default1

hollownumber

Size of the empty core around the centre, from 0 (filled) to 0.95 (a tunnel). Keeps the middle clear for content.

Default0.06

perspectivenumber

Depth of the field. Higher values fling near glints wider and faster.

Default0.7

centerXnumber

Horizontal position of the vanishing point, as a fraction of the width.

Default0.5

centerYnumber

Vertical position of the vanishing point. Above the frame gives falling snow; below it, glints rising from a horizon.

Default0.5

speednumber

Speed of travel through the field. 0 holds still.

Default0.5

direction"outward" | "inward"

Fly into the field, or drift backwards out of it.

Default"outward"

twistnumber

Spiral twist of the field with depth. Negative values twist the other way.

Default0

turbulencenumber

Gentle wobble in each glint's path.

Default0

trailnumber

Shutter length for motion streaks. Streaks grow with speed, so warp boosts stretch them out.

Default0.08

glitternumber

How often glints catch the light and flash into four-point stars. 0 turns flashes off.

Default0.5

glintSizenumber

Length of the four-point flash.

Default1

twinklenumber

Gentle brightness shimmer of every glint.

Default0.5

focusnumber

Depth that is in sharp focus, from 0 (nearest) to 1 (farthest).

Default0.62

aperturenumber

Depth of field. Higher values turn out-of-focus glints into soft bokeh.

Default0.45

boostnumber

Speed multiplier while the pointer is held down, a short jump to warp. 1 turns it off.

Default7

parallaxnumber

How far the view turns toward the pointer, so near glints shift more than far ones.

Default0.5

wavesboolean

Click or tap to send a wave of light through the field, catching glints as it passes.

Defaulttrue

introboolean

Arrive out of warp: the field fades in at speed and settles to its cruising pace.

Defaulttrue

pausedboolean

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

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 send waves.

Default—

ref{ wave, warp, replay }

wave(x?, y?) sends a wave from a position given in fractions of the size; warp(seconds?) boosts for a moment; 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]

["#FFFFFF", "#B19EEF"]

Two colours each glint is tinted between, blended in OKLab. On light backgrounds they turn into matching inks automatically.

backgroundColor

string

"transparent"

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

count

number

1500

Number of glints in the field, up to 9000.

size

number

1.6

Size of a glint in pixels at the middle of the field.

sizeVariance

number

0.6

How much glint sizes vary.

brightness

number

1

Overall brightness of the field.

spread

number

1

Width of the field around the centre.

hollow

number

0.06

Size of the empty core around the centre, from 0 (filled) to 0.95 (a tunnel). Keeps the middle clear for content.

perspective

number

0.7

Depth of the field. Higher values fling near glints wider and faster.

centerX

number

0.5

Horizontal position of the vanishing point, as a fraction of the width.

centerY

number

0.5

Vertical position of the vanishing point. Above the frame gives falling snow; below it, glints rising from a horizon.

speed

number

0.5

Speed of travel through the field. 0 holds still.

direction

"outward" | "inward"

"outward"

Fly into the field, or drift backwards out of it.

twist

number

0

Spiral twist of the field with depth. Negative values twist the other way.

turbulence

number

0

Gentle wobble in each glint's path.

trail

number

0.08

Shutter length for motion streaks. Streaks grow with speed, so warp boosts stretch them out.

glitter

number

0.5

How often glints catch the light and flash into four-point stars. 0 turns flashes off.

glintSize

number

1

Length of the four-point flash.

twinkle

number

0.5

Gentle brightness shimmer of every glint.

focus

number

0.62

Depth that is in sharp focus, from 0 (nearest) to 1 (farthest).

aperture

number

0.45

Depth of field. Higher values turn out-of-focus glints into soft bokeh.

boost

number

7

Speed multiplier while the pointer is held down, a short jump to warp. 1 turns it off.

parallax

number

0.5

How far the view turns toward the pointer, so near glints shift more than far ones.

waves

boolean

true

Click or tap to send a wave of light through the field, catching glints as it passes.

intro

boolean

true

Arrive out of warp: the field fades in at speed and settles to its cruising pace.

paused

boolean

false

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

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 send waves.

ref

{ wave, warp, replay }

—

wave(x?, y?) sends a wave from a position given in fractions of the size; warp(seconds?) boosts for a moment; 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.