Interference Ribbons

A ribbon of fine glowing wires drifting and twisting

interference-ribbons-tw

Customize

Color A

Color B

Background

Wires

Line Width

1.60px

Ribbon Width

0.24

Amplitude

0.60

Wave Length

1.00

Angle

42°

Twist

1.60

Curl

0.25

Depth

0.65

Stripes

2.2

Color Flow

0.04

Glow

0.45

Intensity

1.00

Speed

0.70

Spin

0.35

Pulse Speed

1.10

Pulse Strength

1.00

Hover Boost

1.00

Hover PulsesClick PulseInteractivePaused

Props

Name	Type	Default	Description
`colors`	[string, string]	`["#6B3CFF", "#D46BFF"]`	Two colours the strands cycle through, blended in OKLab. A deep shade of the first colour is derived automatically, so neighbouring strands never read as one flat band.
`backgroundColor`	string	`"#0A0A0A"`	Colour behind the ribbon.
`mode`	"auto" \| "glow" \| "ink"	`"auto"`	glow adds light for dark backgrounds, ink draws coloured strands for light ones. auto picks from the background brightness.
`wires`	number	`64`	Number of strands across the ribbon, from 4 to 160. Where the ribbon turns edge-on they stack into bright knots.
`lineWidth`	number	`1.6`	Width of the strands facing the viewer, in pixels. Strands on the far side of a twist thin out.
`ribbonWidth`	number	`0.24`	Width of the ribbon as a fraction of the height.
`amplitude`	number	`0.6`	How far the ribbon swings from the centre line.
`waveLength`	number	`1`	Length of the ribbon's swings. Larger values give longer, lazier curves.
`angle`	number	`42`	Direction the ribbon runs across the frame, in degrees.
`twist`	number	`1.6`	How many times the ribbon turns over along its length.
`curl`	number	`0.25`	Curves the ribbon's cross-section, so the strands bunch and fan apart as it turns.
`depth`	number	`0.65`	How much strands on the far side of a turn fade and thin, from 0 (flat) to 1.
`stripes`	number	`2.2`	How many times the colours cycle across the ribbon. 0 gives a single colour.
`colorFlow`	number	`0.04`	Speed at which the colour stripes drift along the strands. Negative values drift the other way.
`glow`	number	`0.45`	Soft haze around the strands, from 0 (crisp lines only) to 3.
`intensity`	number	`1`	Overall exposure.
`speed`	number	`0.7`	How fast the ribbon drifts and reshapes. Negative values run it backwards.
`spin`	number	`0.35`	How fast the twists roll along the ribbon.
`interactive`	boolean	`true`	Respond to the pointer.
`hoverPulses`	boolean	`true`	Sweeping the pointer across the ribbon sends light running along the strands it crosses, like fibre optics.
`clickPulse`	boolean	`true`	Clicking sends a bright pulse through every strand, spreading both ways from the pointer.
`pulseSpeed`	number	`1.1`	How fast pulses travel along the strands.
`pulseStrength`	number	`1`	Brightness of the pulses, from 0 to 3.
`hoverBoost`	number	`1`	How much the ribbon brightens and quickens while the pointer is over it, from 0 to 2.
`paused`	boolean	`false`	Freeze the drift. Pulses still run. Reduced-motion users always get a still frame.
`quality`	number	`1`	Resolution scale from 0.25 to 1. Lower values are cheaper on large screens.
`ref`	{ pulse }	`—`	pulse(x) sends a pulse through every strand from a horizontal position between 0 and 1, for example when a form is submitted.
`children`	ReactNode	`—`	Content placed over the background.
`className`	string	`—`	Classes for the root element. It fills its parent, with a 240px minimum height.
`style`	CSSProperties	`—`	Inline styles for the root element.

colors[string, string]

Two colours the strands cycle through, blended in OKLab. A deep shade of the first colour is derived automatically, so neighbouring strands never read as one flat band.

Default["#6B3CFF", "#D46BFF"]

backgroundColorstring

Colour behind the ribbon.

Default"#0A0A0A"

mode"auto" | "glow" | "ink"

glow adds light for dark backgrounds, ink draws coloured strands for light ones. auto picks from the background brightness.

Default"auto"

wiresnumber

Number of strands across the ribbon, from 4 to 160. Where the ribbon turns edge-on they stack into bright knots.

Default64

lineWidthnumber

Width of the strands facing the viewer, in pixels. Strands on the far side of a twist thin out.

Default1.6

ribbonWidthnumber

Width of the ribbon as a fraction of the height.

Default0.24

amplitudenumber

How far the ribbon swings from the centre line.

Default0.6

waveLengthnumber

Length of the ribbon's swings. Larger values give longer, lazier curves.

Default1

anglenumber

Direction the ribbon runs across the frame, in degrees.

Default42

twistnumber

How many times the ribbon turns over along its length.

Default1.6

curlnumber

Curves the ribbon's cross-section, so the strands bunch and fan apart as it turns.

Default0.25

depthnumber

How much strands on the far side of a turn fade and thin, from 0 (flat) to 1.

Default0.65

stripesnumber

How many times the colours cycle across the ribbon. 0 gives a single colour.

Default2.2

colorFlownumber

Speed at which the colour stripes drift along the strands. Negative values drift the other way.

Default0.04

glownumber

Soft haze around the strands, from 0 (crisp lines only) to 3.

Default0.45

intensitynumber

Overall exposure.

Default1

speednumber

How fast the ribbon drifts and reshapes. Negative values run it backwards.

Default0.7

spinnumber

How fast the twists roll along the ribbon.

Default0.35

interactiveboolean

Respond to the pointer.

Defaulttrue

hoverPulsesboolean

Sweeping the pointer across the ribbon sends light running along the strands it crosses, like fibre optics.

Defaulttrue

clickPulseboolean

Clicking sends a bright pulse through every strand, spreading both ways from the pointer.

Defaulttrue

pulseSpeednumber

How fast pulses travel along the strands.

Default1.1

pulseStrengthnumber

Brightness of the pulses, from 0 to 3.

Default1

hoverBoostnumber

How much the ribbon brightens and quickens while the pointer is over it, from 0 to 2.

Default1

pausedboolean

Freeze the drift. Pulses still run. Reduced-motion users always get a still frame.

Defaultfalse

qualitynumber

Resolution scale from 0.25 to 1. Lower values are cheaper on large screens.

Default1

ref{ pulse }

pulse(x) sends a pulse through every strand from a horizontal position between 0 and 1, for example when a form is submitted.

Default—

childrenReactNode

Content placed over the background.

Default—

classNamestring

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

Default—

styleCSSProperties

Inline styles for the root element.

Default—

Name

Type

Default

Description

colors

[string, string]

["#6B3CFF", "#D46BFF"]

Two colours the strands cycle through, blended in OKLab. A deep shade of the first colour is derived automatically, so neighbouring strands never read as one flat band.

backgroundColor

string

"#0A0A0A"

Colour behind the ribbon.

mode

"auto" | "glow" | "ink"

"auto"

glow adds light for dark backgrounds, ink draws coloured strands for light ones. auto picks from the background brightness.

wires

number

64

Number of strands across the ribbon, from 4 to 160. Where the ribbon turns edge-on they stack into bright knots.

lineWidth

number

1.6

Width of the strands facing the viewer, in pixels. Strands on the far side of a twist thin out.

ribbonWidth

number

0.24

Width of the ribbon as a fraction of the height.

amplitude

number

0.6

How far the ribbon swings from the centre line.

waveLength

number

1

Length of the ribbon's swings. Larger values give longer, lazier curves.

angle

number

42

Direction the ribbon runs across the frame, in degrees.

twist

number

1.6

How many times the ribbon turns over along its length.

curl

number

0.25

Curves the ribbon's cross-section, so the strands bunch and fan apart as it turns.

depth

number

0.65

How much strands on the far side of a turn fade and thin, from 0 (flat) to 1.

stripes

number

2.2

How many times the colours cycle across the ribbon. 0 gives a single colour.

colorFlow

number

0.04

Speed at which the colour stripes drift along the strands. Negative values drift the other way.

glow

number

0.45

Soft haze around the strands, from 0 (crisp lines only) to 3.

intensity

number

1

Overall exposure.

speed

number

0.7

How fast the ribbon drifts and reshapes. Negative values run it backwards.

spin

number

0.35

How fast the twists roll along the ribbon.

interactive

boolean

true

Respond to the pointer.

hoverPulses

boolean

true

Sweeping the pointer across the ribbon sends light running along the strands it crosses, like fibre optics.

clickPulse

boolean

true

Clicking sends a bright pulse through every strand, spreading both ways from the pointer.

pulseSpeed

number

1.1

How fast pulses travel along the strands.

pulseStrength

number

1

Brightness of the pulses, from 0 to 3.

hoverBoost

number

1

How much the ribbon brightens and quickens while the pointer is over it, from 0 to 2.

paused

boolean

false

Freeze the drift. Pulses still run. Reduced-motion users always get a still frame.

quality

number

1

Resolution scale from 0.25 to 1. Lower values are cheaper on large screens.

ref

{ pulse }

—

pulse(x) sends a pulse through every strand from a horizontal position between 0 and 1, for example when a form is submitted.

children

ReactNode

—

Content placed over the background.

className

string

—

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

style

CSSProperties

—

Inline styles for the root element.