Ribbon Type

Text printed on satin ribbons that twist and wave through 3D space

ribbon-type-tw

Customize

Text

Separator

Ribbon

Text Colour

Ribbons

Gap

150px

Ribbon Width

76px

Text Scale

0.50

Font Weight

700

Letter Spacing

0.06em

Amplitude

70px

Frequency

1.10

Depth

120px

Twist

0.12

Twist Speed

0.12

Speed

90px/s

Flow

0.35

Tilt

-6°

Perspective

32°

Shading

0.60

Sheen

0.40

Hover Speed

0.30

Auto Twist

6.0s

Quality

1.00

BandDraggableClick TwistIntroPaused

Props

Name	Type	Default	Description
`text`	string	`"MAKE SPACE FOR IDEAS"`	The words printed along the ribbon. They repeat for its whole length.
`separator`	string	`" · "`	Text placed between repeats.
`colors`	[string, string]	`["#5227FF", "#FFFFFF"]`	Ribbon colour and text colour. Every second ribbon swaps them. Accepts any CSS colour, including currentColor.
`band`	boolean	`true`	Print the text on a solid satin band. Turn it off for floating type that twists on an invisible ribbon.
`path`	"wave" \| "loop" \| "helix"	`"wave"`	The shape the ribbon follows: a wave across the view, a ring in perspective, or a spiral around a horizontal axis.
`ribbons`	number	`1`	Number of ribbons, from 1 to 3. They interweave and alternate colours.
`gap`	number	`120`	Vertical distance between ribbons in pixels.
`ribbonWidth`	number	`76`	Width of the ribbon in pixels.
`textScale`	number	`0.5`	Text height relative to the ribbon width.
`fontFamily`	string	`"inherit"`	Font of the text. inherit uses the font of the surrounding page.
`fontWeight`	number	`700`	Weight of the text.
`letterSpacing`	number	`0.06`	Space between letters in em.
`amplitude`	number	`70`	Height of the wave in pixels, or the radius of the helix.
`frequency`	number	`1.1`	Waves or helix turns across the width of the component.
`depth`	number	`120`	How far the ribbon swings toward and away from you, in pixels.
`twist`	number	`0.12`	How far the ribbon rocks around its own length, in turns. Above 0.25 it shows its back.
`twistSpeed`	number	`0.12`	How fast the rocking travels along the ribbon.
`speed`	number	`90`	Speed of the text along the ribbon in pixels per second.
`direction`	"left" \| "right"	`"left"`	Direction the text travels. Every second ribbon runs the other way.
`flow`	number	`0.35`	How fast the ribbon's shape undulates.
`tilt`	number	`-6`	Tilt of the whole ribbon toward or away from you, in degrees.
`perspective`	number	`32`	Camera field of view in degrees. Higher values exaggerate depth.
`shading`	number	`0.6`	How strongly the satin is lit and shaded as it turns, from 0 (flat) to 1.
`sheen`	number	`0.4`	Satin highlight and rim light, from 0 to 1.
`hoverSpeed`	number	`0.3`	Speed multiplier while the pointer rests over the ribbon, so it can be read.
`draggable`	boolean	`true`	Drag sideways to scrub the text. A flick carries on with momentum.
`clickTwist`	boolean	`true`	Click or tap to send a full twist rolling along the ribbon from that point.
`autoTwist`	number	`0`	Seconds between automatic twists. 0 turns them off.
`intro`	boolean	`true`	Fade in with a twist rolling along the ribbon when it mounts.
`paused`	boolean	`false`	Freeze the motion.
`quality`	number	`1`	Render scale and mesh detail, from 0.5 to 1.
`ref`	{ twist, replay }	`—`	twist(position?) rolls a twist from a point along the first ribbon (0 to 1). replay() plays the intro again.
`children`	ReactNode	`—`	Content layered over the ribbon.
`className`	string	`—`	Classes for the root element. It fills its parent and is at least 240px tall.
`style`	CSSProperties	`—`	Inline styles for the root element.

textstring

The words printed along the ribbon. They repeat for its whole length.

Default"MAKE SPACE FOR IDEAS"

separatorstring

Text placed between repeats.

Default" · "

colors[string, string]

Ribbon colour and text colour. Every second ribbon swaps them. Accepts any CSS colour, including currentColor.

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

bandboolean

Print the text on a solid satin band. Turn it off for floating type that twists on an invisible ribbon.

Defaulttrue

path"wave" | "loop" | "helix"

The shape the ribbon follows: a wave across the view, a ring in perspective, or a spiral around a horizontal axis.

Default"wave"

ribbonsnumber

Number of ribbons, from 1 to 3. They interweave and alternate colours.

Default1

gapnumber

Vertical distance between ribbons in pixels.

Default120

ribbonWidthnumber

Width of the ribbon in pixels.

Default76

textScalenumber

Text height relative to the ribbon width.

Default0.5

fontFamilystring

Font of the text. inherit uses the font of the surrounding page.

Default"inherit"

fontWeightnumber

Weight of the text.

Default700

letterSpacingnumber

Space between letters in em.

Default0.06

amplitudenumber

Height of the wave in pixels, or the radius of the helix.

Default70

frequencynumber

Waves or helix turns across the width of the component.

Default1.1

depthnumber

How far the ribbon swings toward and away from you, in pixels.

Default120

twistnumber

How far the ribbon rocks around its own length, in turns. Above 0.25 it shows its back.

Default0.12

twistSpeednumber

How fast the rocking travels along the ribbon.

Default0.12

speednumber

Speed of the text along the ribbon in pixels per second.

Default90

direction"left" | "right"

Direction the text travels. Every second ribbon runs the other way.

Default"left"

flownumber

How fast the ribbon's shape undulates.

Default0.35

tiltnumber

Tilt of the whole ribbon toward or away from you, in degrees.

Default-6

perspectivenumber

Camera field of view in degrees. Higher values exaggerate depth.

Default32

shadingnumber

How strongly the satin is lit and shaded as it turns, from 0 (flat) to 1.

Default0.6

sheennumber

Satin highlight and rim light, from 0 to 1.

Default0.4

hoverSpeednumber

Speed multiplier while the pointer rests over the ribbon, so it can be read.

Default0.3

draggableboolean

Drag sideways to scrub the text. A flick carries on with momentum.

Defaulttrue

clickTwistboolean

Click or tap to send a full twist rolling along the ribbon from that point.

Defaulttrue

autoTwistnumber

Seconds between automatic twists. 0 turns them off.

Default0

introboolean

Fade in with a twist rolling along the ribbon when it mounts.

Defaulttrue

pausedboolean

Freeze the motion.

Defaultfalse

qualitynumber

Render scale and mesh detail, from 0.5 to 1.

Default1

ref{ twist, replay }

twist(position?) rolls a twist from a point along the first ribbon (0 to 1). replay() plays the intro again.

Default—

childrenReactNode

Content layered over the ribbon.

Default—

classNamestring

Classes for the root element. It fills its parent and is at least 240px tall.

Default—

styleCSSProperties

Inline styles for the root element.

Default—

Name

Type

Default

Description

text

string

"MAKE SPACE FOR IDEAS"

The words printed along the ribbon. They repeat for its whole length.

separator

string

" · "

Text placed between repeats.

colors

[string, string]

["#5227FF", "#FFFFFF"]

Ribbon colour and text colour. Every second ribbon swaps them. Accepts any CSS colour, including currentColor.

band

boolean

true

Print the text on a solid satin band. Turn it off for floating type that twists on an invisible ribbon.

path

"wave" | "loop" | "helix"

"wave"

The shape the ribbon follows: a wave across the view, a ring in perspective, or a spiral around a horizontal axis.

ribbons

number

1

Number of ribbons, from 1 to 3. They interweave and alternate colours.

gap

number

120

Vertical distance between ribbons in pixels.

ribbonWidth

number

76

Width of the ribbon in pixels.

textScale

number

0.5

Text height relative to the ribbon width.

fontFamily

string

"inherit"

Font of the text. inherit uses the font of the surrounding page.

fontWeight

number

700

Weight of the text.

letterSpacing

number

0.06

Space between letters in em.

amplitude

number

70

Height of the wave in pixels, or the radius of the helix.

frequency

number

1.1

Waves or helix turns across the width of the component.

depth

number

120

How far the ribbon swings toward and away from you, in pixels.

twist

number

0.12

How far the ribbon rocks around its own length, in turns. Above 0.25 it shows its back.

twistSpeed

number

0.12

How fast the rocking travels along the ribbon.

speed

number

90

Speed of the text along the ribbon in pixels per second.

direction

"left" | "right"

"left"

Direction the text travels. Every second ribbon runs the other way.

flow

number

0.35

How fast the ribbon's shape undulates.

tilt

number

-6

Tilt of the whole ribbon toward or away from you, in degrees.

perspective

number

32

Camera field of view in degrees. Higher values exaggerate depth.

shading

number

0.6

How strongly the satin is lit and shaded as it turns, from 0 (flat) to 1.

sheen

number

0.4

Satin highlight and rim light, from 0 to 1.

hoverSpeed

number

0.3

Speed multiplier while the pointer rests over the ribbon, so it can be read.

draggable

boolean

true

Drag sideways to scrub the text. A flick carries on with momentum.

clickTwist

boolean

true

Click or tap to send a full twist rolling along the ribbon from that point.

autoTwist

number

0

Seconds between automatic twists. 0 turns them off.

intro

boolean

true

Fade in with a twist rolling along the ribbon when it mounts.

paused

boolean

false

Freeze the motion.

quality

number

1

Render scale and mesh detail, from 0.5 to 1.

ref

{ twist, replay }

—

twist(position?) rolls a twist from a point along the first ribbon (0 to 1). replay() plays the intro again.

children

ReactNode

—

Content layered over the ribbon.

className

string

—

Classes for the root element. It fills its parent and is at least 240px tall.

style

CSSProperties

—

Inline styles for the root element.