Chrome Orbit

Nested chrome rings that turn like a gyroscope and swing into a halo on click

chrome-orbit-tw

Customize

Gel A

Gel B

Rings

Size

0.80

Spacing

0.090

Band Width

0.085

Band Thickness

0.018

Roughness

0.16

Iridescence

0.25

Speed

1.00

Tilt

18°

Light Drift

1.00

Offset X

0.00

Offset Y

0.00

Parallax

1.00

Align Hold

2.5s

Halo Tilt

62°

Click AlignIntroInteractivePaused

Props

Name	Type	Default	Description
`colors`	[string, string]	`["#7B5CFF", "#FF7AD9"]`	The two coloured gel lights the chrome reflects, next to the white studio softboxes.
`studio`	"dark" \| "light"	`"dark"`	The room the chrome reflects: a dark studio for dark pages, a pale one for light pages.
`rings`	number	`4`	Number of nested rings, from 1 to 9. Each ring turns inside the one around it, like the gimbals of a gyroscope.
`size`	number	`0.8`	Diameter of the outer ring as a fraction of the frame's shorter side. Values above 1 crop the rings at the edges.
`spacing`	number	`0.09`	Gap between nested rings as a fraction of the outer radius.
`bandWidth`	number	`0.085`	Width of each band as a fraction of the outer radius.
`bandThickness`	number	`0.018`	Thickness of each band as a fraction of the outer radius.
`roughness`	number	`0.16`	Surface roughness, from 0 (mirror) to 0.6 (satin).
`iridescence`	number	`0.25`	Thin-film rainbow sheen along the band edges, from 0 to 1.
`speed`	number	`1`	Speed of the rings turning and of the whole assembly drifting.
`tilt`	number	`18`	Forward tilt of the assembly in degrees.
`lightDrift`	number	`1`	Speed of the studio slowly turning around the rings, which keeps the reflections gliding even when the rings are still.
`offsetX`	number	`0`	Horizontal position of the rings, from -1 (left edge) to 1 (right edge). Useful to sit them beside a headline.
`offsetY`	number	`0`	Vertical position of the rings, from -1 (bottom) to 1 (top).
`interactive`	boolean	`true`	Respond to the pointer.
`parallax`	number	`1`	How far the assembly turns toward the pointer, from 0 to 2.
`clickAlign`	boolean	`true`	Clicking or tapping swings every ring into one plane, a tilted halo of concentric bands. Clicking again, or waiting alignHold seconds, lets them unfold.
`alignHold`	number	`2.5`	Seconds the halo holds before unfolding on its own. 0 keeps it until the next click.
`haloTilt`	number	`62`	Tilt of the aligned halo in degrees, from 0 (facing you) to 85 (nearly edge-on).
`intro`	boolean	`true`	The rings arrive as a halo and unfold into the gyroscope.
`paused`	boolean	`false`	Freeze the rings. Reduced-motion users always get a still gyroscope, without the intro.
`quality`	number	`1`	Resolution scale from 0.25 to 1.
`ref`	{ align, release, replay }	`—`	align() swings the rings into the halo, release() unfolds them, replay() plays the intro again.
`children`	ReactNode	`—`	Content placed over the rings.
`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]

The two coloured gel lights the chrome reflects, next to the white studio softboxes.

Default["#7B5CFF", "#FF7AD9"]

studio"dark" | "light"

The room the chrome reflects: a dark studio for dark pages, a pale one for light pages.

Default"dark"

ringsnumber

Number of nested rings, from 1 to 9. Each ring turns inside the one around it, like the gimbals of a gyroscope.

Default4

sizenumber

Diameter of the outer ring as a fraction of the frame's shorter side. Values above 1 crop the rings at the edges.

Default0.8

spacingnumber

Gap between nested rings as a fraction of the outer radius.

Default0.09

bandWidthnumber

Width of each band as a fraction of the outer radius.

Default0.085

bandThicknessnumber

Thickness of each band as a fraction of the outer radius.

Default0.018

roughnessnumber

Surface roughness, from 0 (mirror) to 0.6 (satin).

Default0.16

iridescencenumber

Thin-film rainbow sheen along the band edges, from 0 to 1.

Default0.25

speednumber

Speed of the rings turning and of the whole assembly drifting.

Default1

tiltnumber

Forward tilt of the assembly in degrees.

Default18

lightDriftnumber

Speed of the studio slowly turning around the rings, which keeps the reflections gliding even when the rings are still.

Default1

offsetXnumber

Horizontal position of the rings, from -1 (left edge) to 1 (right edge). Useful to sit them beside a headline.

Default0

offsetYnumber

Vertical position of the rings, from -1 (bottom) to 1 (top).

Default0

interactiveboolean

Respond to the pointer.

Defaulttrue

parallaxnumber

How far the assembly turns toward the pointer, from 0 to 2.

Default1

clickAlignboolean

Clicking or tapping swings every ring into one plane, a tilted halo of concentric bands. Clicking again, or waiting alignHold seconds, lets them unfold.

Defaulttrue

alignHoldnumber

Seconds the halo holds before unfolding on its own. 0 keeps it until the next click.

Default2.5

haloTiltnumber

Tilt of the aligned halo in degrees, from 0 (facing you) to 85 (nearly edge-on).

Default62

introboolean

The rings arrive as a halo and unfold into the gyroscope.

Defaulttrue

pausedboolean

Freeze the rings. Reduced-motion users always get a still gyroscope, without the intro.

Defaultfalse

qualitynumber

Resolution scale from 0.25 to 1.

Default1

ref{ align, release, replay }

align() swings the rings into the halo, release() unfolds them, replay() plays the intro again.

Default—

childrenReactNode

Content placed over the rings.

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]

["#7B5CFF", "#FF7AD9"]

The two coloured gel lights the chrome reflects, next to the white studio softboxes.

studio

"dark" | "light"

"dark"

The room the chrome reflects: a dark studio for dark pages, a pale one for light pages.

rings

number

4

Number of nested rings, from 1 to 9. Each ring turns inside the one around it, like the gimbals of a gyroscope.

size

number

0.8

Diameter of the outer ring as a fraction of the frame's shorter side. Values above 1 crop the rings at the edges.

spacing

number

0.09

Gap between nested rings as a fraction of the outer radius.

bandWidth

number

0.085

Width of each band as a fraction of the outer radius.

bandThickness

number

0.018

Thickness of each band as a fraction of the outer radius.

roughness

number

0.16

Surface roughness, from 0 (mirror) to 0.6 (satin).

iridescence

number

0.25

Thin-film rainbow sheen along the band edges, from 0 to 1.

speed

number

1

Speed of the rings turning and of the whole assembly drifting.

tilt

number

18

Forward tilt of the assembly in degrees.

lightDrift

number

1

Speed of the studio slowly turning around the rings, which keeps the reflections gliding even when the rings are still.

offsetX

number

0

Horizontal position of the rings, from -1 (left edge) to 1 (right edge). Useful to sit them beside a headline.

offsetY

number

0

Vertical position of the rings, from -1 (bottom) to 1 (top).

interactive

boolean

true

Respond to the pointer.

parallax

number

1

How far the assembly turns toward the pointer, from 0 to 2.

clickAlign

boolean

true

Clicking or tapping swings every ring into one plane, a tilted halo of concentric bands. Clicking again, or waiting alignHold seconds, lets them unfold.

alignHold

number

2.5

Seconds the halo holds before unfolding on its own. 0 keeps it until the next click.

haloTilt

number

62

Tilt of the aligned halo in degrees, from 0 (facing you) to 85 (nearly edge-on).

intro

boolean

true

The rings arrive as a halo and unfold into the gyroscope.

paused

boolean

false

Freeze the rings. Reduced-motion users always get a still gyroscope, without the intro.

quality

number

1

Resolution scale from 0.25 to 1.

ref

{ align, release, replay }

—

align() swings the rings into the halo, release() unfolds them, replay() plays the intro again.

children

ReactNode

—

Content placed over the rings.

className

string

—

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

style

CSSProperties

—

Inline styles for the root element.