Duet
Asset packs · Gyre
Source and install need .
pnpm dlx shadcn@latest add @assembli/gyre-wheelWheel
Gyre pack: a chrome wheel top with a rolled lip, five spokes and a wooden ball in its hub. Spinning hard, its spokes blur into a veil you can see the table through, exactly as far as it turned while the shutter was open, and sharpen as it slows, wobbles, topples and rolls to a stop. Drag across it to spin it up, tap to knock it. Raymarched in WebGL.
Props
Other props pass through to the root element.
palette
GyrePalette
Default
"chrome"A preset palette. Every piece in the pack reads the same colors.
colors
Partial<GyreColors>
Override any color of the palette, as any CSS color.
studio
string
The table the piece stands on, as any CSS color: what its metal reflects below the horizon. Match it to the page behind. By default it's a warm paper white, or near black on dark surfaces.
light
GyreLight
How the set is lit. Changing it crossfades.
shutter
number
Shutter speed in seconds: how far the spin blurs in each frame. 1/60 shows spokes as a veil; 0 freezes them sharp, as if lit by a strobe.
speed
number
Playback speed. 0 holds the moment; reduced motion always holds it.
interactive
boolean
Drag across a piece to spin it up, tap to knock it (or to spin it again once it's down).
poke
number
Change this value to knock it on cue.
shadow
boolean
The shade the piece casts and the window's bars on the table.
surface
"auto" | "light" | "dark"
What the piece sits on. "auto" follows the page theme; set "light" or "dark" when it sits on its own backdrop.
rotate
[number, number]
Move the camera, in degrees: [higher, round to the right].
onRpm
(rpm: number) => void
Called about ten times a second with the spin in revolutions per minute, for a readout.
| Description | |||
|---|---|---|---|
| palette | GyrePalette | "chrome" | A preset palette. Every piece in the pack reads the same colors. |
| colors | Partial<GyreColors> | – | Override any color of the palette, as any CSS color. |
| studio | string | – | The table the piece stands on, as any CSS color: what its metal reflects below the horizon. Match it to the page behind. By default it's a warm paper white, or near black on dark surfaces. |
| light | GyreLight | – | How the set is lit. Changing it crossfades. |
| shutter | number | – | Shutter speed in seconds: how far the spin blurs in each frame. 1/60 shows spokes as a veil; 0 freezes them sharp, as if lit by a strobe. |
| speed | number | – | Playback speed. 0 holds the moment; reduced motion always holds it. |
| interactive | boolean | – | Drag across a piece to spin it up, tap to knock it (or to spin it again once it's down). |
| poke | number | – | Change this value to knock it on cue. |
| shadow | boolean | – | The shade the piece casts and the window's bars on the table. |
| surface | "auto" | "light" | "dark" | – | What the piece sits on. "auto" follows the page theme; set "light" or "dark" when it sits on its own backdrop. |
| rotate | [number, number] | – | Move the camera, in degrees: [higher, round to the right]. |
| onRpm | (rpm: number) => void | – | Called about ten times a second with the spin in revolutions per minute, for a readout. |
