Prismatic Slats

Colored liquid refracted through fluted glass

prismatic-slats-tw

Customize

Background

Primary

Secondary

Angle

31°

Flutes

Refraction

4.0

Aberration

0.61

Softness

0.50

Wave

0.06

Wave Frequency

1.5

Drift

0.00

Highlight

0.12

Highlight Softness

0.30

Light Angle

-90°

Radius

6.5

Momentum

Swirl

Intensity

1.00

Trail

1.00

Texture

0.60

Grain

0.050

Speed

1.00

AutoplayInteractivePaused

Props

Name	Type	Default	Description
`colors`	[string, string]	`["#5227FF", "#FF9FFC"]`	Two liquid colours. Strokes up and to the right lean towards the second, strokes down and to the left towards the first.
`backgroundColor`	string	`"#050505"`	Surface behind the glass. Light surfaces switch to soft shadows instead of highlights. Pass "transparent" to show the page.
`texture`	number	`0.6`	Strength of the slow swirl in the surface behind the glass.
`angle`	number	`28`	Direction of the flutes in degrees. 0 gives vertical bars.
`flutes`	number	`8`	Number of flutes across the width of the frame.
`refraction`	number	`4`	How strongly each flute bends and compresses the light behind it.
`aberration`	number	`0.61`	Splits red, green and blue at the flute seams.
`softness`	number	`0.5`	0 keeps each flute flat in the middle with sharp seams, 1 bends it in a gentle curve.
`wave`	number	`0.06`	How far the flutes sway along their length.
`waveFrequency`	number	`1.5`	How many sways fit along each flute.
`drift`	number	`0`	Slowly slides the flutes sideways. Negative reverses it.
`highlight`	number	`0.12`	Strength of the specular line on each flute.
`highlightSoftness`	number	`0.3`	0 keeps the highlight pin sharp, 1 spreads it into a sheen.
`lightAngle`	number	`-90`	Where the highlight sits across each flute, in degrees.
`radius`	number	`6.5`	Size of the liquid stroke each pointer movement pours in.
`momentum`	number	`13`	How hard the pointer stirs the liquid and how long the flow keeps going after it stops.
`swirl`	number	`0`	Lets the liquid behave like a full fluid that curls into eddies. 0 keeps each movement a single smooth stroke.
`intensity`	number	`1`	How much coloured liquid the pointer pours in.
`trail`	number	`1`	How slowly the liquid fades once the pointer rests.
`autoplay`	boolean	`true`	Stirs the liquid along a slow wandering path whenever the pointer has been away for a moment, so the surface never sits empty on touch screens.
`interactive`	boolean	`true`	Lets the pointer stir coloured liquid behind the glass.
`grain`	number	`0.05`	Film grain, weighted towards the darker areas.
`speed`	number	`1`	Speed of the surface swirl, the flute sway and the autoplay light.
`paused`	boolean	`false`	Freezes the animation.
`dpr`	number	`1.5`	Upper bound for the device pixel ratio.
`className`	string	`—`	Classes for the root element. Give it a height.
`style`	CSSProperties	`—`	Inline styles for the root element.
`children`	ReactNode	`—`	Content layered above the glass.

colors[string, string]

Two liquid colours. Strokes up and to the right lean towards the second, strokes down and to the left towards the first.

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

backgroundColorstring

Surface behind the glass. Light surfaces switch to soft shadows instead of highlights. Pass "transparent" to show the page.

Default"#050505"

texturenumber

Strength of the slow swirl in the surface behind the glass.

Default0.6

anglenumber

Direction of the flutes in degrees. 0 gives vertical bars.

Default28

flutesnumber

Number of flutes across the width of the frame.

Default8

refractionnumber

How strongly each flute bends and compresses the light behind it.

Default4

aberrationnumber

Splits red, green and blue at the flute seams.

Default0.61

softnessnumber

0 keeps each flute flat in the middle with sharp seams, 1 bends it in a gentle curve.

Default0.5

wavenumber

How far the flutes sway along their length.

Default0.06

waveFrequencynumber

How many sways fit along each flute.

Default1.5

driftnumber

Slowly slides the flutes sideways. Negative reverses it.

Default0

highlightnumber

Strength of the specular line on each flute.

Default0.12

highlightSoftnessnumber

0 keeps the highlight pin sharp, 1 spreads it into a sheen.

Default0.3

lightAnglenumber

Where the highlight sits across each flute, in degrees.

Default-90

radiusnumber

Size of the liquid stroke each pointer movement pours in.

Default6.5

momentumnumber

How hard the pointer stirs the liquid and how long the flow keeps going after it stops.

Default13

swirlnumber

Lets the liquid behave like a full fluid that curls into eddies. 0 keeps each movement a single smooth stroke.

Default0

intensitynumber

How much coloured liquid the pointer pours in.

Default1

trailnumber

How slowly the liquid fades once the pointer rests.

Default1

autoplayboolean

Stirs the liquid along a slow wandering path whenever the pointer has been away for a moment, so the surface never sits empty on touch screens.

Defaulttrue

interactiveboolean

Lets the pointer stir coloured liquid behind the glass.

Defaulttrue

grainnumber

Film grain, weighted towards the darker areas.

Default0.05

speednumber

Speed of the surface swirl, the flute sway and the autoplay light.

Default1

pausedboolean

Freezes the animation.

Defaultfalse

dprnumber

Upper bound for the device pixel ratio.

Default1.5

classNamestring

Classes for the root element. Give it a height.

Default—

styleCSSProperties

Inline styles for the root element.

Default—

childrenReactNode

Content layered above the glass.

Default—

Name

Type

Default

Description

colors

[string, string]

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

Two liquid colours. Strokes up and to the right lean towards the second, strokes down and to the left towards the first.

backgroundColor

string

"#050505"

Surface behind the glass. Light surfaces switch to soft shadows instead of highlights. Pass "transparent" to show the page.

texture

number

0.6

Strength of the slow swirl in the surface behind the glass.

angle

number

28

Direction of the flutes in degrees. 0 gives vertical bars.

flutes

number

8

Number of flutes across the width of the frame.

refraction

number

4

How strongly each flute bends and compresses the light behind it.

aberration

number

0.61

Splits red, green and blue at the flute seams.

softness

number

0.5

0 keeps each flute flat in the middle with sharp seams, 1 bends it in a gentle curve.

wave

number

0.06

How far the flutes sway along their length.

waveFrequency

number

1.5

How many sways fit along each flute.

drift

number

0

Slowly slides the flutes sideways. Negative reverses it.

highlight

number

0.12

Strength of the specular line on each flute.

highlightSoftness

number

0.3

0 keeps the highlight pin sharp, 1 spreads it into a sheen.

lightAngle

number

-90

Where the highlight sits across each flute, in degrees.

radius

number

6.5

Size of the liquid stroke each pointer movement pours in.

momentum

number

13

How hard the pointer stirs the liquid and how long the flow keeps going after it stops.

swirl

number

0

Lets the liquid behave like a full fluid that curls into eddies. 0 keeps each movement a single smooth stroke.

intensity

number

1

How much coloured liquid the pointer pours in.

trail

number

1

How slowly the liquid fades once the pointer rests.

autoplay

boolean

true

Stirs the liquid along a slow wandering path whenever the pointer has been away for a moment, so the surface never sits empty on touch screens.

interactive

boolean

true

Lets the pointer stir coloured liquid behind the glass.

grain

number

0.05

Film grain, weighted towards the darker areas.

speed

number

1

Speed of the surface swirl, the flute sway and the autoplay light.

paused

boolean

false

Freezes the animation.

dpr

number

1.5

Upper bound for the device pixel ratio.

className

string

—

Classes for the root element. Give it a height.

style

CSSProperties

—

Inline styles for the root element.

children

ReactNode

—

Content layered above the glass.