Tokens from the Figma variables, as CSS custom properties (--ui-*). Everything below switches with the toolbar.

16px, 1.5px stroke, currentColor. Generated from the Figma export (pnpm icons). Click one to copy its name.

Panels, toolbars, popovers. The only element that turns to glass in Blur mode (translucent fill + backdrop-filter + light edge). Controls inside stay opaque, as in Figma.

Pill button. Primary = the main action (one per view), Secondary = header actions, Ghost = tertiary actions. Hover and disabled through opacity or fill/hover, never blur. Press scales down with the motion preset (springs back in Snappy).

36px text field. Focus = 1.5px border/focus outline (no shadow, no blur). Error = danger outline + helper in danger. The whole field focuses its input on click.

A multiline Input: same field, same focus ring. It grows with its content (the height eases with the move curve) between rows and maxRows. With a maxlength, a ring fills as you type, the count slides in at 80%, and the ring bumps at the limit.

An Input-looking trigger that opens a listbox (Figma Menu: raised surface, border, no blur). The chevron turns, the list opens from the trigger, one highlight glides between rows and starts on the selected one. ↑ ↓ Home End, or type to jump.

28×16 switch for preferences (theme, public sharing). The knob glides with the move curve and stretches while pressed.

Apple-style sliders. Dragging is relative (grab anywhere, nothing jumps), a tap eases to that point, pulling past an end stretches it like rubber and it springs back. Pressing grows it; steps show as dots and snap. Icon and value invert where the fill passes.

Rename in place: the text is the field. Click a name: a field grows out around it, the name is selected (without its extension), the width follows what you type. Enter folds the field back and the new name morphs from the old one, with a check; Esc cancels; a refused value shakes.

View switch (Grid / List) or pill tabs. Opaque track, never blurred. The selected pill is a single element that glides between items.

Filter or tag (Figma Chip: selected = active filter). With a color, it becomes a category chip, our take on Fuzen's Bug / Design / Animation buttons: the dot is the category, selecting spreads its tint across the chip from the dot, and the dot grows into a check.

Figma Dropzone. Drag files over it: the dashes tighten and march, a light follows the pointer, the icon lifts, the title morphs. Drop: a ripple where you released, and each image flies from there into its slot, tilting as it lands. Uploads show a ring that closes into a check. Drag images from your desktop, or simulate a drop.

⌘K anywhere on this page. Jump to any component, switch theme / blur / motion, open the motion tuner, copy the Nuxt setup or the skill install command. Fuzzy search (try “drwr”, “dark”, “stag”), matched letters underlined, recent commands first. One highlight glides between rows, the list unfolds and eases to its new height, the chosen row flashes before the palette closes.

Anything that opens next to its trigger: menus, small panels (a mini modal), tooltips. Native popover in the top layer but kept in place in the DOM, so it inherits the theme around it. Opens from the trigger (scale + slide with the move curve), closes faster, flips up when there's no room below.

A small popover that explains, in words, what the selected thing does: anchored to any element, opened by a shortcut or a click, with mini chips inside the sentence (a property with its icon, a duration drawn as an arc, an ease drawn as its curve). Hover the chips: the arc fills in that duration, a dot runs the curve with that ease.

Figma Toast: inverse, opaque, at the bottom. Toasts stack (the newest in front, the others peek behind), hovering unfolds the stack and pauses the timers, swiping one sideways throws it away. A toast can change in place: loading → success or error, the box, the icon and the text morph.

Figma Modal: raised surface, radius 16, over an opaque scrim (never a blur). Native dialog (focus trap, Escape). Given a `from` element, it morphs out of it: position with transform, size with clip-path, so nothing is stretched, and closes back into it.

Sheets that you can throw. The sheet follows the pointer 1:1 (rubber band past the ends), the grip stretches with your speed, and on release it settles open or closed from position and velocity, carrying the gesture's speed into a spring in Snappy. Everything reads one number, --ui-drawer-p, also written on the parent: the page behind scales, dims and rounds in plain CSS.

One container, several states: UiMorph tweens its size from one content to the next with the move curve while the contents cross-fade (the old one leaves fast, the new one arrives slightly blurred). Radius and colors per state are plain CSS on [data-state].

A proposal for Kuroko's states bar. Click a name to edit that state (the element jumps to it, like in Kuroko). ● is where the page is; ▶ plays a state from there. The chip fills with the real animation's progress (the switch reads the WAAPI / GSAP animation it gets back), and ● lands when the element does.

A proposal for Kuroko's Split section: instead of three rows of buttons, you edit the split on the text itself. Drag the rail to change the granularity, toggle the mask under a stop, drag the stagger strip, click a piece to stagger from it, and pick properties from chips that preview themselves. Every change replays with the active motion preset, and the GSAP code comes out at the bottom.

{
  "animate": "words",
  "mask": "lines",
  "props": [
    "y",
    "opacity"
  ],
  "stagger": {
    "each": 0.04,
    "from": "start"
  }
}