Photon Knot

A translucent ribbon of light tied into a slowly turning knot

photon-knot-tw

Customize

Start Color

End Color

Background

Size

0.72

Offset X

0.00

Offset Y

0.00

Ribbon Width

0.34

Loop

0.42

Twists

Flow Speed

0.50

Rotation

0.50

Tilt

32°

Glow

1.00

Edges

1.00

Folds

1.00

Sheen

1.00

Threads

0.00

Depth

0.60

Parallax

0.50

Flip

1.00

Bloom

0.60

Grain

0.25

InteractiveDraggableIntroPaused

Props

Name	Type	Default	Description
`colors`	[string, string]	`["#5227FF", "#FF9FFC"]`	The two colours the ribbon blends between along its length. On light backgrounds they become matching inks.
`backgroundColor`	string	`"transparent"`	Background of the component. Transparent reads the colour behind the component.
`shape`	"trefoil" \| "cinquefoil" \| "septafoil" \| "star" \| "tangle" \| "halo"	`"trefoil"`	The knot the ribbon is tied into. Halo is a plain ring that frames a headline.
`size`	number	`0.72`	Size of the knot as a share of the frame. Values above 1 crop it for a close-up.
`offsetX`	number	`0`	Moves the knot sideways, as a share of the frame width.
`offsetY`	number	`0`	Moves the knot down (positive) or up (negative), as a share of the frame height.
`ribbonWidth`	number	`0.34`	Width of the ribbon relative to the knot.
`loop`	number	`0.42`	How far the knot loops out from its centre ring.
`twists`	number	`4`	Half-turns of twist along the ribbon. One half-turn on the halo makes a Möbius band.
`flowSpeed`	number	`0.5`	How fast the twist and the colours drift along the ribbon.
`rotationSpeed`	number	`0.5`	Speed of the slow turn. Negative values turn the other way.
`tilt`	number	`32`	How far the knot leans back from the viewer, in degrees.
`glow`	number	`1`	Brightness of the translucent body of the ribbon.
`edges`	number	`1`	Brightness of the fine lines along the ribbon's edges.
`folds`	number	`1`	How brightly light gathers where the ribbon turns edge-on.
`sheen`	number	`1`	Strength of the silky highlight. The pointer moves its light.
`threads`	number	`0`	Weaves fine threads into the ribbon, like organza.
`depth`	number	`0.6`	How much the far side of the knot dims and softens.
`parallax`	number	`0.5`	How much the knot leans toward the pointer as it moves.
`interactive`	boolean	`true`	The pointer moves the light across the ribbon, and a click flips the ribbon at the nearest point.
`draggable`	boolean	`true`	Drag to turn the knot. It keeps the speed of your throw, then settles back.
`flip`	number	`1`	Strength of the twist a click sends along the ribbon, from 0 to 2.
`bloom`	number	`0.6`	Soft glow around the brightest folds and edges.
`grain`	number	`0.25`	Fine film grain over the lit areas.
`intro`	boolean	`true`	The ribbon draws itself along the knot and closes it when the component appears.
`paused`	boolean	`false`	Stops the motion. Dragging still turns the knot. Reduced-motion users get a still knot.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`children`	ReactNode	`—`	Content laid over the scene. Clicks on its links and buttons never flip the ribbon.
`ref`	{ flip, spin, replay }	`—`	flip(position?, strength?) sends a twist from a point along the ribbon (0 to 1), spin(velocity?) throws the knot, replay() ties the knot again.
`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]

The two colours the ribbon blends between along its length. On light backgrounds they become matching inks.

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

backgroundColorstring

Background of the component. Transparent reads the colour behind the component.

Default"transparent"

The knot the ribbon is tied into. Halo is a plain ring that frames a headline.

Default"trefoil"

sizenumber

Size of the knot as a share of the frame. Values above 1 crop it for a close-up.

Default0.72

offsetXnumber

Moves the knot sideways, as a share of the frame width.

Default0

offsetYnumber

Moves the knot down (positive) or up (negative), as a share of the frame height.

Default0

ribbonWidthnumber

Width of the ribbon relative to the knot.

Default0.34

loopnumber

How far the knot loops out from its centre ring.

Default0.42

twistsnumber

Half-turns of twist along the ribbon. One half-turn on the halo makes a Möbius band.

Default4

flowSpeednumber

How fast the twist and the colours drift along the ribbon.

Default0.5

rotationSpeednumber

Speed of the slow turn. Negative values turn the other way.

Default0.5

tiltnumber

How far the knot leans back from the viewer, in degrees.

Default32

glownumber

Brightness of the translucent body of the ribbon.

Default1

edgesnumber

Brightness of the fine lines along the ribbon's edges.

Default1

foldsnumber

How brightly light gathers where the ribbon turns edge-on.

Default1

sheennumber

Strength of the silky highlight. The pointer moves its light.

Default1

threadsnumber

Weaves fine threads into the ribbon, like organza.

Default0

depthnumber

How much the far side of the knot dims and softens.

Default0.6

parallaxnumber

How much the knot leans toward the pointer as it moves.

Default0.5

interactiveboolean

The pointer moves the light across the ribbon, and a click flips the ribbon at the nearest point.

Defaulttrue

draggableboolean

Drag to turn the knot. It keeps the speed of your throw, then settles back.

Defaulttrue

flipnumber

Strength of the twist a click sends along the ribbon, from 0 to 2.

Default1

bloomnumber

Soft glow around the brightest folds and edges.

Default0.6

grainnumber

Fine film grain over the lit areas.

Default0.25

introboolean

The ribbon draws itself along the knot and closes it when the component appears.

Defaulttrue

pausedboolean

Stops the motion. Dragging still turns the knot. Reduced-motion users get a still knot.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

childrenReactNode

Content laid over the scene. Clicks on its links and buttons never flip the ribbon.

Default—

ref{ flip, spin, replay }

flip(position?, strength?) sends a twist from a point along the ribbon (0 to 1), spin(velocity?) throws the knot, replay() ties the knot again.

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"]

The two colours the ribbon blends between along its length. On light backgrounds they become matching inks.

backgroundColor

string

"transparent"

Background of the component. Transparent reads the colour behind the component.

shape

"trefoil"

The knot the ribbon is tied into. Halo is a plain ring that frames a headline.

size

number

0.72

Size of the knot as a share of the frame. Values above 1 crop it for a close-up.

offsetX

number

0

Moves the knot sideways, as a share of the frame width.

offsetY

number

0

Moves the knot down (positive) or up (negative), as a share of the frame height.

ribbonWidth

number

0.34

Width of the ribbon relative to the knot.

loop

number

0.42

How far the knot loops out from its centre ring.

twists

number

4

Half-turns of twist along the ribbon. One half-turn on the halo makes a Möbius band.

flowSpeed

number

0.5

How fast the twist and the colours drift along the ribbon.

rotationSpeed

number

0.5

Speed of the slow turn. Negative values turn the other way.

tilt

number

32

How far the knot leans back from the viewer, in degrees.

glow

number

1

Brightness of the translucent body of the ribbon.

edges

number

1

Brightness of the fine lines along the ribbon's edges.

folds

number

1

How brightly light gathers where the ribbon turns edge-on.

sheen

number

1

Strength of the silky highlight. The pointer moves its light.

threads

number

0

Weaves fine threads into the ribbon, like organza.

depth

number

0.6

How much the far side of the knot dims and softens.

parallax

number

0.5

How much the knot leans toward the pointer as it moves.

interactive

boolean

true

The pointer moves the light across the ribbon, and a click flips the ribbon at the nearest point.

draggable

boolean

true

Drag to turn the knot. It keeps the speed of your throw, then settles back.

flip

number

1

Strength of the twist a click sends along the ribbon, from 0 to 2.

bloom

number

0.6

Soft glow around the brightest folds and edges.

grain

number

0.25

Fine film grain over the lit areas.

intro

boolean

true

The ribbon draws itself along the knot and closes it when the component appears.

paused

boolean

false

Stops the motion. Dragging still turns the knot. Reduced-motion users get a still knot.

dpr

number

2

Maximum device pixel ratio for the canvas.

children

ReactNode

—

Content laid over the scene. Clicks on its links and buttons never flip the ribbon.

ref

{ flip, spin, replay }

—

flip(position?, strength?) sends a twist from a point along the ribbon (0 to 1), spin(velocity?) throws the knot, replay() ties the knot again.

className

string

—

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

style

CSSProperties

—

Inline styles for the root element.