UI

Product micro-interactions that play live in a page and render to video: a button that hovers, presses, loads and lands on a check, a toggle, a like with a count, a loader that succeeds or fails, and a notification bell. Each declares its states, so <volito-player> plays them on hover and click with no setup.

← All packs · 5 items · ui/

volito render ui/button --out button.mov
volito list     # every item in every pack, by pack

Button

ui/button · Overlay with alpha

A product button with every state: it springs in, breathes while idle, lifts on hover, presses, spins while it loads and lands on a check with the done label. In a page, <volito-player> plays each state on hover and click.

Toggle

ui/toggle · Overlay with alpha

A settings switch with its label: the knob stretches as it slides, the track fills with the accent, and it slides back. In a page, a click turns it on and off.

Like

ui/like · Overlay with alpha

A heart and its count: it breathes while idle, pops full with a burst when liked as the count rolls up by one, and empties again when unliked. In a page, a click likes and unlikes.

Loader

ui/loader · Overlay with alpha

A status card that waits, then ends one of two ways: a spinner turns while the line says what is happening, then it closes into a ring with a check, or turns into a cross with a shake. In a page, your code sets the state when the work finishes.

Notification bell

ui/bell · Overlay with alpha

A bell that rings: it swings on its hook, a badge pops in with the count, and it clears when read. In a page, hovering rings it and a click marks it read.