Ribbon Trail

A gymnast's ribbon that trails the cursor

ribbon-trail-tw

Customize

Front

Back

Background

Width

28px

Trail

1.90s

Bounce

0.40

Angle

-35°

Twist

0°

Spin

0°/s

Taper

0.55

Shade

0.60

Opacity

1.00

0.040s

Autoplay Speed

1.00

Idle Delay

1.50s

FlickAutoplayInteractivePaused

Props

Name	Type	Default	Description
`colors`	[string, string]	`["#5227FF", "#FF9FFC"]`	Front and back of the ribbon. The ribbon turns over wherever it folds, so both faces show as it flows, blending into each other slightly along its length.
`backgroundColor`	string	`"transparent"`	Background of the component. Leave it transparent to lay the ribbon over your own page.
`width`	number	`28`	Ribbon width in pixels.
`trail`	number	`1.9`	Seconds the end of the ribbon lags behind the cursor. Longer trails stream further and take longer to coil back in when the cursor stops.
`bounce`	number	`0.4`	How springy the ribbon is. Low values glide and settle, high values whip and curl past the cursor when it stops.
`angle`	number	`-35`	Angle the ribbon is held at, in degrees, like a calligraphy nib. The ribbon narrows and turns over wherever it travels along this angle.
`twist`	number	`0`	Extra turn from the head to the tail, in degrees. It spirals the ribbon so it folds in more places.
`spin`	number	`0`	Slowly rotates the holding angle, in degrees per second, so the folds keep moving.
`taper`	number	`0.55`	How much the ribbon narrows towards its tail. It always opens out of a fine point at the cursor.
`shade`	number	`0.6`	Dims the ribbon where it turns edge-on, which gives the folds their depth. 0 keeps both faces flat.
`opacity`	number	`1`	Overall opacity of the ribbon.
`follow`	number	`0.04`	Seconds the head of the ribbon takes to catch up with the pointer.
`flick`	boolean	`true`	Clicking twirls the head of the ribbon in a small loop, throwing a curl down its length. The direction alternates with each click.
`autoplay`	boolean	`true`	Until the pointer arrives, and again after it leaves, an invisible hand keeps the ribbon flowing.
`autoplaySpeed`	number	`1`	Speed of that invisible hand.
`idleDelay`	number	`1.5`	Seconds after the pointer leaves before the invisible hand takes the ribbon back.
`interactive`	boolean	`true`	Let the pointer and touch lead the ribbon. The component listens on the window, so content laid over it still pulls the ribbon.
`paused`	boolean	`false`	Freezes the ribbon. Reduced-motion users never get the invisible hand.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`ref`	{ flick, reset }	`—`	Imperative controls: twirl the ribbon, or gather it back into the cursor.
`children`	ReactNode	`—`	Content rendered above the ribbon, such as a hero.
`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]

Front and back of the ribbon. The ribbon turns over wherever it folds, so both faces show as it flows, blending into each other slightly along its length.

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

backgroundColorstring

Background of the component. Leave it transparent to lay the ribbon over your own page.

Default"transparent"

widthnumber

Ribbon width in pixels.

Default28

trailnumber

Seconds the end of the ribbon lags behind the cursor. Longer trails stream further and take longer to coil back in when the cursor stops.

Default1.9

bouncenumber

How springy the ribbon is. Low values glide and settle, high values whip and curl past the cursor when it stops.

Default0.4

anglenumber

Angle the ribbon is held at, in degrees, like a calligraphy nib. The ribbon narrows and turns over wherever it travels along this angle.

Default-35

twistnumber

Extra turn from the head to the tail, in degrees. It spirals the ribbon so it folds in more places.

Default0

spinnumber

Slowly rotates the holding angle, in degrees per second, so the folds keep moving.

Default0

tapernumber

How much the ribbon narrows towards its tail. It always opens out of a fine point at the cursor.

Default0.55

shadenumber

Dims the ribbon where it turns edge-on, which gives the folds their depth. 0 keeps both faces flat.

Default0.6

opacitynumber

Overall opacity of the ribbon.

Default1

follownumber

Seconds the head of the ribbon takes to catch up with the pointer.

Default0.04

flickboolean

Clicking twirls the head of the ribbon in a small loop, throwing a curl down its length. The direction alternates with each click.

Defaulttrue

autoplayboolean

Until the pointer arrives, and again after it leaves, an invisible hand keeps the ribbon flowing.

Defaulttrue

autoplaySpeednumber

Speed of that invisible hand.

Default1

idleDelaynumber

Seconds after the pointer leaves before the invisible hand takes the ribbon back.

Default1.5

interactiveboolean

Let the pointer and touch lead the ribbon. The component listens on the window, so content laid over it still pulls the ribbon.

Defaulttrue

pausedboolean

Freezes the ribbon. Reduced-motion users never get the invisible hand.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

ref{ flick, reset }

Imperative controls: twirl the ribbon, or gather it back into the cursor.

Default—

childrenReactNode

Content rendered above the ribbon, such as a hero.

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]

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

Front and back of the ribbon. The ribbon turns over wherever it folds, so both faces show as it flows, blending into each other slightly along its length.

backgroundColor

string

"transparent"

Background of the component. Leave it transparent to lay the ribbon over your own page.

width

number

28

Ribbon width in pixels.

trail

number

1.9

Seconds the end of the ribbon lags behind the cursor. Longer trails stream further and take longer to coil back in when the cursor stops.

bounce

number

0.4

How springy the ribbon is. Low values glide and settle, high values whip and curl past the cursor when it stops.

angle

number

-35

Angle the ribbon is held at, in degrees, like a calligraphy nib. The ribbon narrows and turns over wherever it travels along this angle.

twist

number

0

Extra turn from the head to the tail, in degrees. It spirals the ribbon so it folds in more places.

spin

number

0

Slowly rotates the holding angle, in degrees per second, so the folds keep moving.

taper

number

0.55

How much the ribbon narrows towards its tail. It always opens out of a fine point at the cursor.

shade

number

0.6

Dims the ribbon where it turns edge-on, which gives the folds their depth. 0 keeps both faces flat.

opacity

number

1

Overall opacity of the ribbon.

follow

number

0.04

Seconds the head of the ribbon takes to catch up with the pointer.

flick

boolean

true

Clicking twirls the head of the ribbon in a small loop, throwing a curl down its length. The direction alternates with each click.

autoplay

boolean

true

Until the pointer arrives, and again after it leaves, an invisible hand keeps the ribbon flowing.

autoplaySpeed

number

1

Speed of that invisible hand.

idleDelay

number

1.5

Seconds after the pointer leaves before the invisible hand takes the ribbon back.

interactive

boolean

true

Let the pointer and touch lead the ribbon. The component listens on the window, so content laid over it still pulls the ribbon.

paused

boolean

false

Freezes the ribbon. Reduced-motion users never get the invisible hand.

dpr

number

2

Maximum device pixel ratio for the canvas.

ref

{ flick, reset }

—

Imperative controls: twirl the ribbon, or gather it back into the cursor.

children

ReactNode

—

Content rendered above the ribbon, such as a hero.

className

string

—

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

style

CSSProperties

—

Inline styles for the root element.