Cursor
Asset packs · Vane
Source and install need .
pnpm dlx shadcn@latest add @assembli/vane-irisIris
Vane pack: a camera iris of nine curved acrylic blades, tinted and black, pinned inside a chrome ring and swinging in to close over a white light that turns every blade into colored glass. It breathes on its own; point at the middle and it opens wide, tap to snap it shut like a shutter with a flash, drag to turn it. Traced exactly in WebGL, with real refraction.
Props
Other props pass through to the root element.
palette
VanePalette
Default
"iris"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 | "iris" | 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]. |
