Domino
Asset packs · Vane
Source and install need .
pnpm dlx shadcn@latest add @assembli/vane-chimeChime
Vane pack: eight slats of acrylic in different lengths hanging on cords from a chrome bar, every other one glossy black. They sway in a slow breeze, clack into each other and trade their swing like a Newton's cradle, and turn on their cords to show their other face. Run your pointer along them to strum, tap one to knock it. Traced exactly in WebGL.
Props
Other props pass through to the root element.
palette
VanePalette
Default
"lagoon"A preset palette. Every piece in the pack reads the same colors.
colors
Partial<VaneColors>
Override any color of the palette, as any CSS color.
studio
string
The studio sweep behind the piece, as any CSS color: what its blades reflect and what shows through them. Match it to the page behind. By default it's a soft grey, or near black on dark surfaces.
speed
number
Playback speed. 0 holds the moment; reduced motion always holds it.
interactive
boolean
Hover, drag and tap to play with the piece.
poke
number
Change this value to set the piece off on cue, as a tap would.
shadow
boolean
Shade on the floor, for pieces that stand on one.
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].
| Description | |||
|---|---|---|---|
| palette | VanePalette | "lagoon" | A preset palette. Every piece in the pack reads the same colors. |
| colors | Partial<VaneColors> | – | Override any color of the palette, as any CSS color. |
| studio | string | – | The studio sweep behind the piece, as any CSS color: what its blades reflect and what shows through them. Match it to the page behind. By default it's a soft grey, or near black on dark surfaces. |
| speed | number | – | Playback speed. 0 holds the moment; reduced motion always holds it. |
| interactive | boolean | – | Hover, drag and tap to play with the piece. |
| poke | number | – | Change this value to set the piece off on cue, as a tap would. |
| shadow | boolean | – | Shade on the floor, for pieces that stand on one. |
| 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]. |
