Peony
Asset packs · Mote
Source and install need .
pnpm dlx shadcn@latest add @assembli/mote-dandelionDandelion
Mote pack: a dandelion clock, 240 seeds each drawn as a stalk and a parachute of fine filaments, on a stem that sways in the breeze. Now and then a seed lets go and floats off. Tap to blow: the windward seeds sail away one after another, tumbling on the wind, and the head fills back in. WebGL point cloud.
Props
Other props pass through to the root element.
palette
MotePalette
A preset palette. Every piece in the pack reads the same colors.
colors
Partial<MoteColors>
Override any color of the palette, as any CSS color.
speed
number
Idle motion speed. 0 holds the resting pose; reduced motion always does.
interactive
boolean
Part the beads with the cursor, drag to turn and fling, tap for the piece's trick.
poke
number
Change this value to play the piece's tap trick on cue.
density
number
How many beads, from 0.25 (a loose weave) to 2 (twice as fine). Bead size follows, so coverage stays the same.
motes
number
How many loose motes drift around the piece, as a multiple of its usual number. 0 for none.
assemble
boolean
Fly the piece in from a cloud of dust the first time it comes into view. Change
keyto play it again.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
Vec3
Extra rotation of the resting pose in degrees: [pitch, yaw, roll].
| Prop | Type | Default | Description |
|---|---|---|---|
| palette | MotePalette | – | A preset palette. Every piece in the pack reads the same colors. |
| colors | Partial<MoteColors> | – | Override any color of the palette, as any CSS color. |
| speed | number | – | Idle motion speed. 0 holds the resting pose; reduced motion always does. |
| interactive | boolean | – | Part the beads with the cursor, drag to turn and fling, tap for the piece's trick. |
| poke | number | – | Change this value to play the piece's tap trick on cue. |
| density | number | – | How many beads, from 0.25 (a loose weave) to 2 (twice as fine). Bead size follows, so coverage stays the same. |
| motes | number | – | How many loose motes drift around the piece, as a multiple of its usual number. 0 for none. |
| assemble | boolean | – | Fly the piece in from a cloud of dust the first time it comes into view. Change key to play it again. |
| 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 | Vec3 | – | Extra rotation of the resting pose in degrees: [pitch, yaw, roll]. |
