Spectral Drape

A glowing drape of dots folding in 3D

spectral-drape-tw

Customize

Background

Dots

Highlight

Density

1.00

Dot Size

1.00

Strands

Amplitude

1.00

Frequency

1.00

Thickness

0.70

Depth

1.00

Softness

0.60

Intensity

1.00

Color Shift

0.30

Tilt

-40°

Turn

-45°

Roll

110°

Zoom

1.00

Flow

1.00

Speed

1.00

Brush

1.00

Brush Radius

0.20

Parallax

1.00

Seed

InteractiveClick RipplesPaused

Props

Name	Type	Default	Description
`colors`	string[]	`["#6A4BFF", "#E4DBFF"]`	Two colours: the dots across the body of the drape, then the highlight they reach along its crests.
`backgroundColor`	string	`"#0a0a0a"`	Colour behind the drape. Light backgrounds switch to ink dots. Pass "transparent" to show the page.
`density`	number	`1`	Number of dots, from 0.2 to 2.5. 1 draws about 44,000.
`dotSize`	number	`1`	Size of each dot, relative to the spacing of the grid.
`strands`	number	`8`	Number of flowing strands that lift the grid into folds, from 1 to 12.
`amplitude`	number	`1`	How far the strands swing across the drape.
`frequency`	number	`1`	How many curves each strand makes along its length.
`thickness`	number	`0.7`	Width of each strand. Wider strands show more of the drape.
`depth`	number	`1`	How high the strands lift the grid. Higher values give deeper folds.
`softness`	number	`0.6`	Edge softness of each dot, from 0 (crisp) to 1 (soft glow).
`intensity`	number	`1`	Brightness of the dots.
`colorShift`	number	`0.3`	Shifts the dots towards the highlight colour along the length of the drape.
`tilt`	number	`-40`	Rotation of the drape around the horizontal axis, in degrees.
`turn`	number	`-45`	Rotation of the drape around the vertical axis, in degrees.
`roll`	number	`110`	Rotation of the drape within its own plane, in degrees.
`zoom`	number	`1`	Scale of the drape.
`flow`	number	`1`	How fast the strands drift and reshape the folds.
`speed`	number	`1`	Overall animation speed. 0 holds the current frame.
`interactive`	boolean	`true`	The pointer brushes the dots aside as it moves and the view drifts gently towards it.
`brush`	number	`1`	How strongly the pointer pushes the dots. 0 disables it.
`brushRadius`	number	`0.2`	Size of the area the pointer moves, relative to the height.
`parallax`	number	`1`	How far the drape turns towards the pointer. 0 keeps it still.
`clickRipples`	boolean	`true`	Each click sends a ripple across the drape that briefly lights the whole grid of dots. Rapid clicks stack.
`seed`	number	`0`	Changes the arrangement of the strands.
`paused`	boolean	`false`	Freezes the flow. The pointer and clicks still work.
`dpr`	number	`2`	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 drape.

colorsstring[]

Two colours: the dots across the body of the drape, then the highlight they reach along its crests.

Default["#6A4BFF", "#E4DBFF"]

backgroundColorstring

Colour behind the drape. Light backgrounds switch to ink dots. Pass "transparent" to show the page.

Default"#0a0a0a"

densitynumber

Number of dots, from 0.2 to 2.5. 1 draws about 44,000.

Default1

dotSizenumber

Size of each dot, relative to the spacing of the grid.

Default1

strandsnumber

Number of flowing strands that lift the grid into folds, from 1 to 12.

Default8

amplitudenumber

How far the strands swing across the drape.

Default1

frequencynumber

How many curves each strand makes along its length.

Default1

thicknessnumber

Width of each strand. Wider strands show more of the drape.

Default0.7

depthnumber

How high the strands lift the grid. Higher values give deeper folds.

Default1

softnessnumber

Edge softness of each dot, from 0 (crisp) to 1 (soft glow).

Default0.6

intensitynumber

Brightness of the dots.

Default1

colorShiftnumber

Shifts the dots towards the highlight colour along the length of the drape.

Default0.3

tiltnumber

Rotation of the drape around the horizontal axis, in degrees.

Default-40

turnnumber

Rotation of the drape around the vertical axis, in degrees.

Default-45

rollnumber

Rotation of the drape within its own plane, in degrees.

Default110

zoomnumber

Scale of the drape.

Default1

flownumber

How fast the strands drift and reshape the folds.

Default1

speednumber

Overall animation speed. 0 holds the current frame.

Default1

interactiveboolean

The pointer brushes the dots aside as it moves and the view drifts gently towards it.

Defaulttrue

brushnumber

How strongly the pointer pushes the dots. 0 disables it.

Default1

brushRadiusnumber

Size of the area the pointer moves, relative to the height.

Default0.2

parallaxnumber

How far the drape turns towards the pointer. 0 keeps it still.

Default1

clickRipplesboolean

Each click sends a ripple across the drape that briefly lights the whole grid of dots. Rapid clicks stack.

Defaulttrue

seednumber

Changes the arrangement of the strands.

Default0

pausedboolean

Freezes the flow. The pointer and clicks still work.

Defaultfalse

dprnumber

Upper bound for the device pixel ratio.

Default2

classNamestring

Classes for the root element. Give it a height.

Default—

styleCSSProperties

Inline styles for the root element.

Default—

childrenReactNode

Content layered above the drape.

Default—

Name

Type

Default

Description

colors

string[]

["#6A4BFF", "#E4DBFF"]

Two colours: the dots across the body of the drape, then the highlight they reach along its crests.

backgroundColor

string

"#0a0a0a"

Colour behind the drape. Light backgrounds switch to ink dots. Pass "transparent" to show the page.

density

number

1

Number of dots, from 0.2 to 2.5. 1 draws about 44,000.

dotSize

number

1

Size of each dot, relative to the spacing of the grid.

strands

number

8

Number of flowing strands that lift the grid into folds, from 1 to 12.

amplitude

number

1

How far the strands swing across the drape.

frequency

number

1

How many curves each strand makes along its length.

thickness

number

0.7

Width of each strand. Wider strands show more of the drape.

depth

number

1

How high the strands lift the grid. Higher values give deeper folds.

softness

number

0.6

Edge softness of each dot, from 0 (crisp) to 1 (soft glow).

intensity

number

1

Brightness of the dots.

colorShift

number

0.3

Shifts the dots towards the highlight colour along the length of the drape.

tilt

number

-40

Rotation of the drape around the horizontal axis, in degrees.

turn

number

-45

Rotation of the drape around the vertical axis, in degrees.

roll

number

110

Rotation of the drape within its own plane, in degrees.

zoom

number

1

Scale of the drape.

flow

number

1

How fast the strands drift and reshape the folds.

speed

number

1

Overall animation speed. 0 holds the current frame.

interactive

boolean

true

The pointer brushes the dots aside as it moves and the view drifts gently towards it.

brush

number

1

How strongly the pointer pushes the dots. 0 disables it.

brushRadius

number

0.2

Size of the area the pointer moves, relative to the height.

parallax

number

1

How far the drape turns towards the pointer. 0 keeps it still.

clickRipples

boolean

true

Each click sends a ripple across the drape that briefly lights the whole grid of dots. Rapid clicks stack.

seed

number

0

Changes the arrangement of the strands.

paused

boolean

false

Freezes the flow. The pointer and clicks still work.

dpr

number

2

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 drape.