Chime
Asset packs · Vane
Source and install need .
pnpm dlx shadcn@latest add @assembli/vane-dominoDomino
Vane pack: twenty acrylic dominoes, tinted and black, standing in an arc on the page. Knocked, each tips over its front edge onto the next and the chain runs to the end, every slab casting a soft shadow tinted by its color; then they stand back up as if the film ran backwards and go again. Tap one to knock it, or tap a fallen chain to stand it up. Traced exactly in WebGL.
Props
Other props pass through to the root element.
palette
VanePalette
Default
"citrus"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 | "citrus" | 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]. |
