Whole screens, palettes and living effects for developers who do not design, each with the psychology behind its shape and a rule for when not to use it.
The row of menus desktop tools are built on, with sub menus, check and radio items, shortcuts and full arrow key movement across the bar.
Large soft colour from the accent and its neighbours, barely tinted to vivid, from one corner or split on a diagonal, with an optional slow drift.
Short streaks crossing a section: thin meteors, faint rain, slow comets or a twinkling sky, placed from a seed and moved with transforms only.
Lines and stations drawn from data, for a process or a path with branches: arrow keys between stations, and it scrolls inside itself when narrow.
Warm amber on cool neutrals. Friendly and alive. Complete tokens, motion included.
Critically damped and momentum springs, Apple's momentum projection and rubber-banding, shared by every moving Mise UI component.
One wrapper that lets its content arrive when it comes into view, once, as a block or child by child. People who turned motion off see it at once.
Site navigation with panels on Radix: a plain bar, a mega panel of groups, a sliding pill or a sliding underline, and a panel that morphs between triggers.
Film grain drawn from an inline SVG with no image files: fine grain, warm paper, grain over a soft accent wash, or sparse flecks.
A field for amounts that clamps to its range, repeats while a button is held, reads formatted text back, and comes as chevrons, split, pill or one big number.
First-run setup with a true progress count: a list as its own screen, a slim row above the page, or welcome steps one at a time in a dialog.
Small things travelling around a centre: one orbit, several at different speeds, a tilted ellipse that passes behind or an arch at the foot of a hero. Focus and pointing stop it.
Full-page wipes on the View Transitions API: an accent curtain, a slanted sweep or an iris from the click. Reduced motion falls back to a fade.
Moves through a long list in steady chunks, with the window of pages always the same width so controls never shift.
A story told one panel at a time with a page count and a progress line: in the page, with the next panel peeking, or sliding over the whole screen.
Points on one canvas behind a section: floating, joined by faint lines, rising, or an even field with a clearing that follows the pointer.
A password field with a reveal button and a caps lock hint, plus a strength meter, a live checklist or a meter on the field edge.
Small floating panel anchored to the control that opened it, for a form or detail that does not need a full dialog.
One writing entry as a single link: a title, a date that stays on its calendar day and quiet tags, for blogs, changelogs and archives.
Pricing with an honest yearly anchor, in three forms: three plans with one raised, a side-by-side feature matrix with a sticky plan header, or one plan priced by the seat.
Shows how far a task has come, as a bar, a hairline, discrete steps or a labelled percent, and admits it when nobody knows yet.
Progress in a small square: a ring, a hairline, a 270 degree gauge or discrete cells, with the value in the middle and an honest state when nobody knows.
A QR code encoder written from scratch and drawn as crisp SVG with a quiet zone, in square, dotted, framed and logo forms, always dark on light so it scans.
One choice from a short list with every option in view, as dots, selectable cards, joined buttons or rows, with arrow keys built in.
A score picked with a click or the arrow keys, as stars, hearts, a joined number scale or a row of segments, with half steps and a read-only form.
Collapsed timeline of the model's steps; the header names the current one, the body shows them all.
Two panes with a draggable divider, horizontal or vertical, with limits that stretch, a keyboard-operable separator and a double-click reset.
An image that arrives as it is generated: blur to sharp, coarse mosaic to fine, or a left-to-right wipe, driven by a progress value.
A small set of items on a CSS 3D ring you spin by drag or keyboard, with no WebGL. Reduced motion gets a plain list.
Rings spreading behind a section: still lines, a slow pulse, a turning sonar sweep or several sources, plus a ring from where someone pressed.
Who did what on a project: panels, quiet rows or a table of people against areas, with one person in the accent.
A label that rolls to a fresh copy of itself on hover or when its value changes, while assistive tech hears it once.
One word in a sentence that takes turns with others, with a slot that springs to each new width and stops whenever someone is reading.
Noise that settles into the real sentence, from a small seeded engine, with every letter holding its final width so nothing on the page moves.
A window, a phone or a plain hairline around a screenshot or live interface, with the real address in the bar and no decorative traffic lights.
A scroller with a styled bar that matches the theme, as a hover bar, a thin overlay, edge shadows or a snapping row.
A wrapper for any scrolling box that shows edge shadows, fades or hairlines from the real scroll position, so people can see there is more.
A paragraph that arrives word by word as you scroll, so the pace of reading stays in the reader's hand. People who turned motion off get the finished text.
A search box with a leading icon, clear button, loading state, debounced onSearch and a Mod K hint. Escape clears it.
A numbered map of the chapters in a long read that fills as you go, as a rail, a sticky strip or a one-line counter.
A short set of mutually exclusive views, always one on, as a thumb in a track, chips, an underline or square icons.
Dropdown for one choice from a list, with a placeholder, groups, a check on the chosen row and full keyboard support.
A rule between groups of content, as a hairline, a dashed break, a labelled divider or a line that fades at both ends.
A settings screen in three decisions: one page with one save bar, one section at a time beside a side nav, or each group as its own plate with its own Save.
Bottom sheet you can grab mid-flight: it tracks the finger 1:1, rubber-bands at the top, and lands where the release velocity was heading.
A band of light passing over a status label, so “Thinking…” reads as in progress without inventing a percentage.
A collapsible column of navigation with nested groups, an active item and badges, toggled with Mod+B, saved through a prop, and a drawer on phones.
Sign with a finger, pen or mouse in smooth strokes, with undo, SVG and PNG export, and a typed name for anyone using a keyboard.