Louvre
Asset packs · Vane
Source and install need .
pnpm dlx shadcn@latest add @assembli/vane-mobiusMöbius
Vane pack: a Möbius band of thirty-six slats of glossy black acrylic, with half a turn of twist that rolls round as the ring turns. A comet of color runs round it on its own, turning each slat over to clear tinted acrylic as it passes and back to black behind it. Tap for a wave both ways from where you hit, drag to spin the ring. Traced exactly in WebGL.
Props
Other props pass through to the root element.
palette
VanePalette
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 | – | 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]. |
