- 2m
- 9m
- 1h
- 3h
Staggered list in
List rows rise and fade in one after another with a short stagger.
Minimal UI
Restraint, done well. Hairlines, generous space and motion that’s felt more than seen.
Habitual
TodayInsightsJournal
Good morning, Maya
4 of 6 habits done today
Read 20 min
12-day streak
Run 5k
4-day streak
Drink water
21-day streak
Last 4 weeks83% consistency
Colour
Type
Aa
Inter / Inter
Shape & motion
radius 6/10/16 · spring 380/30
A demo app rendered only from these tokens, which make up the starting sheet for this vibe.
253 minimal assets
Shown in this vibe’s tokens. In your sheet, they take yours.
Animations
Scale-blur modal
Modal that scales up from 96% while un-blurring, over a dimmed backdrop.
Saved to your sheet
Deployed to production
Stacked toasts
Notifications that stack and compress like a deck, newest on top.
OverviewAssetsMotionCode
Sliding tab pill
Segmented tabs with an indicator that glides between options.
Orbit loader
Three dots chasing each other around an orbit while something loads.
Active connected sheets+12.4%
0123456789,012345678901234567890123456789
Rolling counter
Numbers roll digit by digit like an odometer when the value changes.
/inbox
AnaNew palette ideas
TheoSheet v4 is live
KaiMotion review
Shared axis X
Page transition that slides and fades along the x-axis between routes.
Work email
Floating label input
Text field whose label lifts out of the way as you type, with a focus ring.
0%
Daily goal6 of 8 habits
Progress ring
Circular progress that fills on a spring and counts up its label.
Skeleton shimmer
Placeholder blocks with a light sweep while content loads.
MATLAKJS+12
Editing this sheet nowAvatar fan-out
Overlapping avatars that fan apart and reveal names on hover.
Underline sweep
Text button whose underline draws in from the left on hover or keyboard focus and exits to the right.
Loading → success button
Submit button that collapses into a spinning circle while its action runs, then draws a check on success.
Segmented control
Single-choice segmented control with a thumb that slides between options and full arrow-key navigation.
One-time code input
Verification code boxes that auto-advance, handle backspace and pasted codes, with a focus ring gliding between them.
Drawn checkbox
Native checkbox whose box fills from the centre while the tick draws itself on stroke by stroke.
Ease toggle
Calm on/off switch whose thumb glides on a soft ease-out curve with no bounce as the track colour cross-fades.
Expanding search
Search icon button that springs open into a text field and folds back on Escape or when left empty.
Expanding card
Compact card that grows in place to reveal its details with a layout spring; Escape collapses it.
Hover-follow nav
Row of nav links with a soft pill that glides to the hovered or focused link and settles back on the current page.
Morphing menu icon
Hamburger button whose bars fold to the centre and cross into an X when the menu opens, then unfold when it closes.
Command palette
⌘K dialog with a search field and filtered command list, where arrow keys slide a highlight between rows and Enter runs the command.
Staggered dropdown
Menu button whose items cascade in one after another, with arrow-key roving focus and Escape to close.
Smooth accordion
Disclosure list whose panels ease open to their natural height as the chevron turns, with one or many open at once.
Collapsing sidebar
App sidebar that springs between full width and a slim icon rail, fading its labels as it narrows.
Fade + rise modal
Calm modal whose panel fades in while rising 14px on a long ease-out, with no scale and no bounce.
Drag-to-dismiss bottom sheet
Bottom sheet whose grab handle follows your finger: dragging past 80px or flicking down dismisses it, and anything less springs it back.
Side drawer
Panel that springs in from the right (or left) edge over a dimmed backdrop, with a header, close button and scrolling body.
Origin-aware popover
Popover anchored to its trigger that scales out from the corner nearest the button, so it visibly grows from where you clicked.
Spring tooltip
Tooltip that waits a beat on hover (none on keyboard focus), then rises into place on a small spring; Esc dismisses it.
Crossfade page
Calm route transition where the old page fades out before the new one fades in, keyed by pathname so it drops into any router.
Drag to reorder
List rows you drag by a grip to reorder: the picked-up row lifts with a shadow while the others spring aside, and Alt+↑/↓ moves rows from the keyboard with an announcement.
Swipe to delete
List rows that slide left to reveal a delete action and, released past the threshold, slide out and collapse, with a Tab-reachable delete button on every row.
Indeterminate bar
Thin progress bar for work of unknown length that you can pin to the page top or drop into a card, with a long and a short accent segment chasing across a tinted track.
Inline alert
Dismissible inline alert in info, success, warning and danger tones that springs open, pushing content down, and folds away when closed, with urgent tones announced immediately.
Error shake
Form field wrapper that shakes side to side and flashes its border in the accent when validation fails, with the error message announced and linked to the input.
Copy → copied
Copy-to-clipboard button whose icon morphs into a drawn check while its label swaps to “Copied”, then reverts after a short hold.
Typewriter
Types a phrase character by character (or cycles a list, deleting between them) behind a blinking accent caret.
Rotating word
One accent word in a headline rotates through options, sliding up into place while its slot springs to the new width.
Dot grid fade
A dot grid in the line colour that fades out toward the edges through a radial mask, with an optional slow diagonal drift.
Scroll progress bar
A thin accent bar fills left to right with scroll progress, spring-smoothed, for the whole page or any scroll container.
Split hero
Landing hero whose headline slides up line by line beside an abstract product frame that rises and settles into place on scroll.
Pricing with billing toggle
Three-plan pricing section whose monthly/yearly switch slides its indicator while every price rolls digit by digit to the new amount.
Feature bento
Asymmetric bento grid of feature cells with icons and small visuals that rise in on a stagger and lift slightly on hover or focus.
Logo marquee
Trusted-by strip of text wordmarks gliding in an endless loop behind soft edge fades, easing to a stop on hover.
Testimonial rotator
Testimonial section that cycles quotes with a crossfade and short slide, with dot picker, arrow keys and auto-advance that pauses on hover or focus.
FAQ section
Two-column FAQ with heading, intro and contact link beside a disclosure list whose answers ease open to their natural height.
Border-beam CTA band
Call-to-action band whose rounded border carries a beam of accent light travelling around it, with headline and buttons.
Count-up stats band
Row of headline stats split by hairline dividers whose numbers count up from zero once the band scrolls into view.
Footer with newsletter
Site footer with brand block, link columns and a newsletter field whose subscribe button morphs into a spinner and then a check.
Notification feed
Notification list where new items slide in at the top and push older ones down, unread dots fade as items are read, and Mark all read clears them in a quick cascade.
Expandable table rows
Data table whose rows open a details panel that eases to its natural height as the row's chevron turns, with a real button in every row for keyboard users.
Bar chart
Column chart whose bars spring up from the baseline one after another, with a value tooltip that glides to the hovered or focused bar.
Sparkline
Compact trend line that draws itself in over a soft area fill, with a crosshair dot that reads out the value under the pointer or the arrow keys.
Donut chart
Donut whose segments sweep in one after another around a centred total and lift on hover or focus to show their share in the middle, with a legend.
KPI delta tile
Metric tile whose big number tweens to each new value while its up/down delta badge flips arrow and colour with a small spring.
Tag input
Text field that turns entries into chips on Enter or comma: chips spring in, shrink out when removed by button or Backspace, and the tag list is fully controlled.
Spring select
Custom select whose listbox springs open from the trigger with staggered options and a sliding highlight, with arrow keys, Home/End, Enter, Escape and type-ahead.
Radio cards
Radio group laid out as cards with a highlight ring that slides to the chosen card and arrow-key navigation per the WAI-ARIA radio pattern.
Password strength meter
Password field with a show/hide toggle and a four-segment strength meter that springs full and shifts from ink to accent, plus a hint on what to add next.
File dropzone
Dropzone that swells and marches its dashed border on drag-over, then lists added files with prop-driven progress bars and remove buttons.
Progress steps
Horizontal multi-step progress whose connectors fill up to the current step while completed steps morph from numbers into drawn checkmarks.
Announcement bar
Top-of-page announcement strip that slides down on mount, carries an optional link and collapses its height smoothly when dismissed.
Empty state
Empty-state block with a gently floating token-coloured illustration, a title, a short body and a primary action that enter in a soft stagger.
Collapsing breadcrumbs
Breadcrumb trail that folds its middle crumbs into an ellipsis button, which unfolds them inline one after another.
Sliding pagination
Pagination with prev/next and ellipsis windows, where the active marker slides to the chosen page and the numbers roll the way you travelled.
Morphing mega menu
Top nav whose panels drop open with a height-and-fade reveal, then morph size and glide under each trigger as you move along, with hover intent and arrow keys.
Stretchy underline tabs
Accessible tabs whose underline stretches across to the next tab leading edge first, while panels crossfade with a slide in the direction you moved.
Context menu
Right-click, long-press or Shift+F10 menu that opens at the pointer, flips to stay in bounds, cascades its items in and flies out a submenu.
Hover card
Profile-style preview card that opens after a short hover or at once on focus, springs out of its trigger and stays open while you move onto it.
Notification center
Bell whose unread badge pops on every change and opens a panel of grouped notifications that swipe away and collapse.
Floating format toolbar
Selection toolbar that springs up above highlighted text with Bold, Italic, Underline and Link toggles and arrow-key roving focus.
Grid wave reveal
Grid cells scale and fade in as a diagonal wave (each waits by its row plus column) the first time the grid scrolls into view.
List ⇄ grid toggle
A collection with a segmented list/grid switch whose items glide and reshape into their new places on a spring.
Direction-aware panels
Tab or step panels that slide in from the side of the newly selected index while the box springs to the new height.
3D content flip
Swaps content with a flip-board turn around the X axis whenever its key changes, ideal for stat cards and live values.
Bookmark toggle
A bookmark button whose outline fills with the accent from the bottom up while the icon dips and springs back, flicking a few particles when saved.
Sun / moon theme toggle
A theme switch whose sun retracts its rays and swells while an SVG mask circle slides in to carve it into a crescent moon.
Hold to confirm
A destructive button you press and hold (by pointer, Space or Enter) while a fill sweeps across; letting go early rewinds and cancels.
Cursor ring
Inside a container, an accent ring trails the pointer on a spring and swells into a filled, optionally labelled disc over marked interactive children.
Scroll text fill
A paragraph whose words fill from the muted colour to full text colour one after another as it scrolls up through the viewport.
How it works steps
Numbered three-to-four step section whose steps pop in one after another while an accent connector line draws from each step to the next on scroll.
Alternating feature rows
Alternating text-and-media feature rows where copy and token-drawn product art slide in from opposite sides as each row scrolls into view.
Comparison table
Plan or us-vs-them comparison on a real table, with a highlighted column band, rows revealing on a stagger and check and cross glyphs that draw in.
Team grid
Team section of initials-avatar cards that rise in on a stagger and lift on hover or focus to slide up a short bio and profile link.
Article grid
Blog section of article cards with token-drawn covers, category chips and read times that rise in on a stagger and lift with a slow cover zoom on hover.
Newsletter band
Newsletter sign-up band whose button shrinks into a spinner and then stretches across the field into a success message, shaking on invalid or failed sign-ups.
Contact section
Contact section with an info column and a name, email and message form that validates inline and moves through sending and sent to a success panel.
Roadmap timeline
Vertical roadmap grouped by quarter whose progress line fills to the latest shipped or in-progress milestone, lighting status dots as it passes.
Sign-in card
Email and password sign-in card with show/hide, remember me and a submit that spins while your async onSubmit runs, then shakes on error or springs to a check on success.
Settings panel with save bar
Settings form in sections of switches and selects whose sticky save bar springs up with a change count when anything differs from the saved values and slides away after Save or Discard.
Sortable data table
Data table with aria-sort headers, a filter field and selection checkboxes whose rows glide to their new order, and a bulk action bar that replaces the toolbar while rows are selected.
Date picker
Date field with a calendar popover whose months slide left or right as you page, an optional range band and full WAI-ARIA dialog and grid keyboard navigation.
Chat thread
Chat message list whose bubbles slide in from the sender's side, with a bouncing typing indicator, auto-stick to the newest message in its own scroll box and a composer.
Account menu
Avatar button that springs open an account menu with a name and email header, items, a sliding light/dark/system theme row and sign out, using the full WAI-ARIA menu keyboard pattern.
Multi-step form
Form wizard with a step header whose connectors fill, direction-aware panel slides, per-step validation and a final review step with edit links.
Search results
Search field over a results list that highlights query terms, rolls its result count, staggers new result sets in and shows an empty state, with the query controlled by you.
Kanban board
Small kanban board whose cards lift and tilt as you drag them between columns while a drop slot opens and counts update, with Space-and-arrow keyboard moves.
Split button
Primary action joined to a chevron that springs open a menu of alternative actions, with arrow keys, Home/End, type-ahead and Esc per the WAI-ARIA menu button pattern.
Ripple button
Material-style button whose ink ripple spreads from the press point to the far corner and fades on release, rippling from the centre for keyboard presses.
Toggle button group
Toggle button group for single or multiple selection, with aria-pressed and roving arrow keys: a pill slides between options in single mode, and pressed neighbours merge into one run in multiple mode.
Play / pause morph
Media toggle whose two pause bars fold into the halves of a play triangle by interpolating matched SVG paths, with its accessible label swapping between Play and Pause.
Success check
Confirmation mark that draws its ring and then its check before settling with a soft pulse and fading halo, sized for inline use after an action via a show prop.
Bar spinner
Classic activity indicator: a ring of rounded bars where a bright head steps around and each bar fades behind it, in the current text colour with role=status.
Skeleton table
Table-shaped loading placeholder with a header, avatar-and-two-line first column and text cells, whose shimmer travels across each row and cascades down; rows and columns are props.
Progress circle
Determinate circular progress whose stroke springs to each value while the centred percentage counts along, morphing into a drawn tick with a soft pulse at completion.
Number ticker
A large headline number whose digits roll like an odometer to the target value column by column with a stagger, formatted for any locale, currency or unit with Intl.NumberFormat.
Pulse rings
Concentric accent rings ripple outward from a point behind a call to action, a live badge or a map pin, growing and fading on a steady beat.
Section dots
A vertical column of dots that tracks the section in view with an IntersectionObserver; the active dot springs into an accent pill and every dot is a labelled button that scrolls to its section.
Back to top
A round back-to-top button that springs in past a scroll threshold, ringed by a progress circle of how far down the page you are, and glides to the top when pressed.
Click ripple
Concentric accent rings expand and fade from every click or tap inside a region (over buttons, cards or empty canvas alike), and keyboard presses ripple from the centre of the activated element.
Magnifier lens
A round lens follows the pointer over an image or block of content and shows it magnified underneath; it hides for touch, and keyboard users can move it with the arrow keys.
Shrinking header
A site header that condenses past a scroll threshold (shorter, with a smaller logo, frosted background and hairline) and optionally slides away while you scroll down, returning as soon as you scroll up.
Scroll timeline
A vertical timeline whose accent line draws down the rail in step with scroll, both ways, lighting each node with a small pop as the line reaches it and bringing its entry up to full strength.
Line-draw illustration
An inline SVG illustration draws its strokes one after another, then washes in its fills once the last line lands.
Alternating slide-in
Zig-zag rows of text and media sweep in from alternating sides as each enters the viewport, the media trailing the text from further out.
Thumbnail → lightbox
A square thumbnail un-crops into a centred lightbox at its true aspect ratio as a shared element, steps through the set with arrow keys and shrinks back into place on close.
Search expand
A search icon button morphs into a field spanning its whole bar (shape and magnifier travel as shared elements while the bar's content steps aside) and back on Esc or blur.
Button → bottom sheet
A floating action button grows into a bottom sheet as one shared element, its colour washing out, with drag or flick to dismiss back into the button.
Layered waves
Stacked SVG waves in deepening accent tones gently undulate along the bottom of a section, each layer travelling and bobbing at its own pace; the front wave can match the next section's colour.
Dot ripple
A dot matrix that a ripple wave sweeps through on a steady beat and from every pointer press, swelling, pushing and tinting the dots in the accent as the ring passes.
Shape morph loader
A loader that springs from square to circle to triangle and back, turning as it morphs and settling upright between shapes, with role=status and a screen-reader label.
Typing indicator
A chat typing bubble with a two-circle tail that springs out of the sender's corner, breathes while its three dots brighten in turn, and collapses away when typing stops, with stacked initials and a live 'is typing' announcement.
Shimmer text loader
A status line whose text carries a band of light sweeping through it, stepping through optional labels with a soft rise-and-blur swap, behind a small pulsing dot and a polite live region.
Card skeleton swap
A card-shaped skeleton (media, avatar and text lines) under one diagonal shimmer that sweeps the whole card, which cross-fades into the real content and springs to its height when loaded turns true.
Product card
Shop product card whose image cross-fades to an alternate view on hover or focus, with an add-to-cart button that squishes on press, rolls its label to a drawn check and pops a +1 as it confirms.
Profile card
Person card with avatar, name, role and stat counts whose Follow button springs into a Following state, rings the avatar and rolls the follower count up by one.
Card carousel
Horizontal scroll-snap row of cards that swipes natively, pages with a spring from prev/next buttons or the arrow keys, and shows where you are with a sliding progress thumb.
Line chart
Responsive line and area chart with axes, gridlines and a legend whose series draw in, plus a crosshair and tooltip that glide to the nearest point under the pointer or the arrow keys.
Activity heatmap
Contribution-style calendar grid whose cells ripple in diagonally, shaded in steps of the accent, with a tooltip that glides to the hovered or arrow-key-focused day and a less-to-more legend.
Breakdown bars
Ranked list of labelled horizontal bars that grow in one after another behind their labels, count up their values and percentages, and glide into their new order when the numbers change.
Activity timeline
Vertical event log on a rail of icon badges with live relative times, whose Show more button eases older events open beneath the rail in a short stagger.
Tree view
File and folder tree whose branches ease open as their chevrons turn, with indent guides, single selection and full WAI-ARIA tree keyboard navigation including type-ahead.
Was this helpful?
Inline feedback prompt with thumbs or a three-face scale: the pick pops with a spring and the widget eases open into an optional comment box, then folds into a thank-you with a drawn check.
Arrow slide button
Call-to-action whose trailing arrow slides out to the right while a twin springs back in from the left and the label nudges forward, on hover or keyboard focus, in solid, outline and link styles.
Icon morph button
Toggle button whose plus springs into a check, cross or minus by moving the same two strokes to new endpoints while it turns, filling with the accent and pulsing once, with aria-pressed state.
Text roll button
Button or nav link whose label rolls up out of view letter by letter while a duplicate rolls in from below on hover or keyboard focus, staggered from the start or from the centre.
Follow → following
Follow button that pops and grows into “Following” by springing open only the letters that differ, drawing a check, beside a follower count whose changed digits roll up or down.
Upvote
Vote toggle whose arrow fills and hops up with a rising “+1” when you vote, dips when you take it back, and rolls only the changed digits of its count in the matching direction.
Download progress
Round download button whose arrow drops away into a progress ring that springs to a value prop, shows a stop square to cancel, and pops into a filled, drawn check when done.
Show password
Labelled password field with an aria-pressed “Show password” eye whose lid lowers, lashes and all, while the text is hidden and lifts open, pupil glancing at the text, when it is shown.
Hover letter lift
Links or headings whose letters lift off the baseline in a quick left-to-right wave on hover or keyboard focus and hold there on a springy settle, with the accent sweeping through them and an underline drawing in.
Table of contents
A sticky in-page table of contents whose active entry follows the heading you're reading via IntersectionObserver, with an accent bar that springs along the track and links that smooth-scroll to their section.
Scrolling tab bar
An overflowing tab bar that scrolls sideways with edge fades that grow with what's hidden, scroll buttons only on the side that has more, and an indicator that springs to the active tab while the strip glides to keep it in view.
Navigation rail
A compact vertical icon rail whose labels slide out beside it on hover or focus, which springs open over the page with labels arriving in a stagger, and whose active pill glides between items.
Filter chips
A horizontally scrollable row of multi-select filter chips with counts, where chosen chips fill with the accent as a check mark springs in and a Clear button slides in at the front, with full keyboard support.
Cookie preferences
Consent banner with equally weighted Reject all and Accept all, a Choose view that slides over to per-category switches with essential locked on, and an onChange that reports the decision without storing anything.
Product tour
Guided tour that dims the page around a spotlight cut-out and glides it and its step card from target to target, with Back, Next, Skip, a step count and Esc to end.
Type-to-confirm dialog
Destructive confirmation dialog whose delete button only arms once the resource name is typed exactly, shaking the field and swapping in an error when a mismatch is submitted.
Undo snackbar
Bottom snackbars with an Undo action and a draining countdown bar that pauses on hover or focus, stacking new ones underneath while older ones make room.
Share popover
Share button that springs open a panel with the link, a copy button that sweeps the field and morphs to Copied, and share targets you pass in that stagger up into place.
Colour picker
Saturation and brightness square, hue slider, swatches and hex field that stay in sync and output hex, all keyboard-operable, with thumbs that glide to clicked or stepped positions.
Autocomplete combobox
WAI-ARIA combobox that filters as you type with accent-insensitive, prefix-first matching, highlights the matched letters and animates its listbox as results glide into their new order.
Range slider (two thumbs)
Min/max slider whose thumbs can't cross, with the filled range between them and value bubbles that merge into one low–high bubble when the thumbs get close.
Inline edit
Text that turns into an auto-sizing input on click, Enter or F2, saves with Enter or a check (async-aware), reverts with Esc and confirms the save in place with a soft highlight and a popping check.
Amount input
Currency field that formats as you type with Intl.NumberFormat for any currency and locale, keeps the caret in place, and has quick-pick chips that roll the number to their amount.
Split CTA
Two-column call to action with copy and a checklist beside a compact email form that slides aside for a success panel with a drawn check.
Tabbed features
Feature tabs that crossfade a large screenshot panel, with an accent progress line that auto-advances to the next tab and pauses on hover, focus or its pause button.
Testimonial wall
Masonry wall of quote cards whose columns drift slowly in alternating directions behind soft fades, easing to a stop on hover with a visible pause button.
Changelog list
Dated release notes on a rail with New, Improved and Fixed tags, collapsible details and each date pinned beside its entry on wide screens.
Open roles
Careers section with team filter chips and counts above role rows that collapse away or rise in on a stagger as the filter changes.
Stack push page
Native navigation-stack route transition: a push slides the new page in over the current one while the page beneath drifts back under a dimming scrim, and a pop plays it in reverse.
Stack ⇄ spread
A fanned pile of cards that deals itself out into a grid when opened and gathers back into the stack when closed, each card gliding on a spring at its own size.
Stacked sheets
Nested bottom sheets where each new step slides up over the last, which shrinks back, lifts just above it and dims, and Back drops the top sheet away so the one beneath springs forward.
Outline-draw card
A card's outline traces itself around its edge (from two opposite corners meeting halfway, or in one stroke), then its surface washes in and its content rises into place.
Live field validation
Text field that reports async validation in place (a small spinner while it checks, a drawn check when it passes, and an error that slides out from under the field as the border takes the accent), wired to aria-invalid, aria-describedby and a polite live region.
Inline confirm
Hard-shadowed destructive button that asks twice in place: the first press flips it to the accent with a Cancel square and a draining disarm bar, and the second (after a double-click guard) runs your async action and stamps the button flat.
Autosave status
Quiet editor-toolbar save indicator whose cloud glyph shifts from an unsaved dot to a lifting arrow while saving, draws a check on save that settles into a self-updating “Saved 2 min ago”, and offers Retry when a save fails.
Connection banner
App-top strip for a dropped connection that opens with a ticking retry countdown and Retry now, swaps to a spinner while reconnecting, then turns the accent with a drawn check for “Back online” and folds itself away.
Live task steps
Vertical progress for a long job: the running step spins with a live elapsed timer and an optional detail line, finished steps pop into drawn checks and keep their times, and the rail between them fills step by step.
Progress bar with ETA
Determinate progress bar that springs to each value with a counting percentage and a travelling glint, estimates time left from the value's real, smoothed pace, flags “Stalled” when nothing moves, and lands on a drawn check.
Blur-up image
Aspect-locked image frame behind a softly breathing blurred placeholder (tiny inline image, gradient or dominant colour) that shows a ring only if loading drags on, then sharpens the real image in from blur and a slight zoom.
Upload queue
Corner tray for background uploads with an overall ring and a summary that swaps as work finishes, and a row per file whose ring springs to its progress, becomes a cancel button on hover or focus, morphs into a check when done and offers Retry on failure.
Refetch veil
Stale-while-revalidate wrapper that keeps old content in place while it refreshes (dimmed and desaturated under a hairline sweep and an “Updating” chip, only if the refetch outlasts a short delay), then lifts with a soft highlight pass and an “Up to date” check.
Collection card
Folder-style card whose pile of preview tiles fans out on hover or focus (the back tiles swing out to either side as the cover lifts) above a title, item count and an arrow that nudges forward.
Indexed list
Alphabetical list in its own scroll box with sticky letter headers that push each other off, the current one picked out in the accent, and a letter rail you tap, scrub or arrow through while a big letter bubble pops beside it.
Range-select list
Multi-select listbox with desktop rules (click picks one, Shift extends a range, Cmd/Ctrl toggles) whose adjacent selected rows merge into one highlight that stretches, splits and rejoins on a spring, over a footer that rolls the count.
Pull to refresh
Feed list you pull down from the top against rubber-band resistance (its arrow flips past the threshold) that holds open on a spinner while refreshing and slides new rows in at the top, with a refresh button for keyboard and mouse.
Segmented meter
Usage meter that splits one bar into segments growing in one after another over a hatched free-space track, with a legend whose items spotlight their segment on hover, focus or press, dimming the rest and swapping the headline readout.
Funnel chart
Hard-edged conversion funnel whose column bars rise one after another under hatched ghosts of the users each step lost, with a readout of the step rate for the hovered or arrow-key-focused step, which lifts on a hard shadow.
Live stream chart
Real-time line chart that scrolls left continuously as samples arrive, the newest point riding a pulsing head dot, with a dashed threshold line that flags the readout when crossed and a Live/Paused toggle that freezes the view.
Direction-aware hover
Tiles whose overlay slides in from the edge the pointer entered through and leaves through the edge it exits, so a sweep across a grid reads as one continuous motion; keyboard focus brings it up from the bottom.
Mute toggle
Speaker button whose sound waves collapse into the cone one after another as a cross draws in when muted, then thumps and ripples its waves back out when sound returns, with the wave count following a volume prop.
Lock toggle
Padlock button whose keyhole turns before the shackle pops up and swings open on its hinge, then swings back, drops and lands with a small clunk as the body fills with the accent when locked again.
Block progress button
Slab async button whose label cuts to a row of hard-edged block cells while its action runs (a three-block run marching across, or cells filling beside a percentage when given progress), then cuts to an accent done stamp, or jolts sideways in hard frames and offers a retry.
Slab text field
Thick-bordered text field with its label on a tab joined to the top edge: focus inverts the tab and drops a hard shadow out from under the field in two frames, an error turns the shadow accent, jolts the field and prints the message on an inverted strip, and an optional counter flips to accent near the limit.
Chapter index
A sticky table of contents for long reads where each chapter's hairline fills as you read through it, the current chapter shows the minutes left in it, finished ones get a tick, and every entry jumps to its chapter inside its own scroller.
Tilt-in showcase
A product frame enters leaning back in perspective and straightens to face you as it scrolls up into view, rising and scaling to full size while its shadow tightens and an accent glow comes up behind it.
Silk lines
Ribbons of hair-thin wave lines drift sideways at different speeds and bob gently, so each ribbon slowly twists, gathers and fans out across the section like folded silk.
Orbits
Thin elliptical orbits circle a point behind content, each carrying dots or small tiles at its own pace: outer rings slower, alternate rings turning the other way, far-side bodies smaller and dimmer.
Search 404
404 that names the missing path in mono and offers a search field whose suggested links filter as you type, plus a way home.
Editorial 404
Paper-toned 404 with a serif numeral across ruled columns and an index of likely destinations whose rules draw in line by line.
Server error section
500 screen that owns the fault plainly, with a Retry that spins while onRetry runs, a copyable error reference and an optional status link.
Offline screen
Offline state whose signal arcs fade out one by one, listening to online and offline events with an auto-retry countdown, then a back-online confirmation.
Access denied section
403 screen with a padlock that gives a small shake, the signed-in account, Request access that morphs into a sent state, and a switch-account link.
Expired link section
Expired or already-used link screen with an hourglass that runs out, a masked email and Send a new link with a resend cooldown.
Redirect notice
Moved-page or leaving-site notice showing the destination, a slab countdown bar that redirects when full, Go now and Stay here, pausing on hover or focus.
First-run empty state
First-run state where faint ghost rows of the content to come shimmer behind a create action and an import link, fading out around the message and lifting a little on hover.
No results
No-results block that echoes the query, lists active filters as removable chips that collapse out of the row as you clear them (focus moves to the next one), and offers Clear all.
No permission panel
In-app no-access panel naming who can grant access with initials avatars from props, and a Request access button that shows a spinner while it sends, then springs into a ticked requested state.
Load error with retry
Panel for content that failed to load, with Retry that spins while onRetry runs, an automatic retry that counts down on a draining line and backs off after each failure, and a details toggle.
Empty table row
One-row empty state for tables and lists whose Add button wipes open in place into a quick-add field: Enter saves with a pending spinner, Escape cancels and returns focus to Add.
Nothing scheduled
Ruled week strip of empty days with a pulsing today marker and a selection frame that glides between days (arrow keys work), a nothing-scheduled line and an add action that opens on the chosen day.
No conversations
Messaging empty state where two bubbles over a soft glow trade a typing indicator back and forth, with starter prompt chips that rise in one by one and a new-message action.
Side-rail steps
Onboarding frame with a vertical step list (done steps tick, the current one opens its hint) beside direction-aware panels, folding to a top bar on phones.
Choose a template
Template picker of token-drawn thumbnails plus Blank, where a selection ring springs between cards (radio-group keys) and Continue arms once one is chosen.
Invite teammates
Invite step with an email chip field (paste many, invalid ones flagged), a role per invite, a copyable invite link and Send invites with a sent state.
Connect an integration
Generic integration tiles whose Connect buttons move through connecting to connected while a line draws from your app mark to the tile.
Create a workspace
Workspace step whose name field builds a URL slug preview live, with an availability check state and an initials tile coloured from token swatches.
Permission primer
Explains why before the browser asks (notifications, location or camera), with a mock prompt that stamps in and Allow or Not now.
Profile form
Profile settings with avatar change and remove, name, a username behind a fixed prefix, a bio with a live count and a verified-email badge, where Save and Cancel wake up as soon as anything is edited.
Notification matrix
Notification preferences as a grid of events by email, push and in-app, with column checkboxes that show a mixed state and a digest frequency control, saved with Save and Cancel.
Danger zone
Hard-bordered block of destructive rows (transfer, archive, delete) where each opens in place into its own confirm step: type the name, fill in a field, or press and hold.
Active sessions
Signed-in devices with device glyphs, browser and OS, a rough place, live relative times and a This device badge, where signing a row out confirms in place and collapses it, plus sign out of the rest.
API keys
Keys table with name, masked prefix, created and last used, a create step that reveals the new secret once with copy and a warning, and revoke behind a confirm.
Two-factor setup
Two-factor setup in three steps: a QR slot with a masked, copyable setup key, a six-digit code check that shakes when wrong, then recovery codes in a grid with copy and download.
Team members
Members list with role selects, pending invites with resend and cancel, a filter field whose rows ease in and out, and a seats line counted from the people shown.
Settings layout
Settings frame with a section nav whose marker slides between items and a content column with a section header, where a narrow frame turns the nav into a list that pushes into each section.
KPI tiles with sparklines
Row of KPI tiles (label, value, delta chip and a mini sparkline) under a period switcher that tweens every value and line at once, folding to two by two in narrow containers.
Sparkline list
Ruled metric rows, each with a value, a delta and a sparkline, whose crosshairs move together across every row as you hover or arrow through the dates.
Activity feed card
Dashboard activity card grouped by day, with initials avatars, filter tabs and live relative times, where new items wait behind an "N new" pill instead of shifting the list under the reader.
Month calendar heatmap
Month calendar whose days are shaded in accent steps by value, with month paging that slides, a less-to-more legend and a tooltip that follows the pointer or the arrow keys from day to day.
Cohort retention grid
Retention grid of cohorts by period whose cells fill in a diagonal sweep, shaded by the share retained, with a row and column crosshair that follows the pointer or the arrow keys.
Uptime bars
Hard-edged daily status cells (up, degraded, down, no data) that rise in from the left, with a tooltip per day for pointer and arrow keys and an overall figure computed from the data passed in.
Radar chart
Radar chart whose polygons grow out from the centre on a spring, for up to three series, with axis labels that double as focusable points reading every series' value on that axis and a legend that shows or hides each series.
Rule checklist field
Text field with a live checklist of rules underneath that tick with a drawn check as each one is met; once you leave the field, the error names only the rules still missing (any rules, not just passwords).
System banners
App-top banners in info, warning and critical tones, each with an action and dismiss; more than one collapses into the most severe banner with the rest peeking underneath and an N more toggle that expands the stack.
Corner cookie consent
Corner consent card with equally weighted Accept and Reject, a Manage toggle that opens per-category switches inline in the same card, and a small reopen button left in the corner once a choice is saved.
Update available toast
New-version toast whose Reload turns into a short progress fill and then calls onReload, while Later (or a quiet timeout that pauses on hover and focus) folds it into a small dot badge that reopens it.
Score scale survey
Zero-to-ten score scale (a radio group with arrow keys) whose chosen cell pops and opens a follow-up comment field that fits the score, then settles into a thank-you state.
Keyboard shortcuts sheet
Help overlay opened with the ? key that lists shortcuts in groups with key caps, filters and highlights as you type, and closes with Escape.
Session timeout dialog
Hard-edged alert dialog that warns before sign-out with big countdown numerals and a stepped bar that drains block by block, Stay signed in (onExtend) and Sign out, announcing the time left politely at a few thresholds.
Textarea with limit ring
Auto-growing textarea with a small ring that fills toward the character limit, takes the accent and shows the count near it, goes negative past it, and tells screen readers once you pause typing.
Weekly review
3 highlights · 2 to finish
PublishPreviewSaved
Inkwell palette
Warm off-white paper, near-black ink and one red-pencil accent for a calm, literate, print-like feel.
Weekly review
3 highlights · 2 to finish
PublishPreviewSaved
Harbor palette
Cool sea-mist greys with a deep harbour blue, trustworthy and quiet for finance, health or B2B.
Weekly review
3 highlights · 2 to finish
PublishPreviewSaved
Matcha palette
Soft tea-green whites with a leafy green accent: fresh, natural and unhurried.
Weekly review
3 highlights · 2 to finish
PublishPreviewSaved
Glacier palette
Icy blue-white with a clear cobalt accent for a crisp, bright, product-like look.
Weekly review
3 highlights · 2 to finish
PublishPreviewSaved
Sand & Sea palette
Beach-sand neutrals with a deep teal accent: relaxed, coastal and grown-up.
Weekly review
3 highlights · 2 to finish
PublishPreviewSaved
Porcelain palette
Monochrome porcelain whites and graphite with no colour at all, so content and imagery lead.
Weekly review
3 highlights · 2 to finish
PublishPreviewSaved
Mint palette
Cool mint whites with an emerald accent, clean and friendly for health and money apps.
Weekly review
3 highlights · 2 to finish
PublishPreviewSaved
Obsidian & Gold palette
Restrained luxury for premium products: polished black with a soft gold accent.
Weekly review
3 highlights · 2 to finish
PublishPreviewSaved
Forest Night palette
Deep pine darkness with a fern-green accent that feels outdoorsy, calm and focused.
Weekly review
3 highlights · 2 to finish
PublishPreviewSaved
Graphite palette
Neutral graphite greys with a soft periwinkle accent, a dependable dark mode for apps.
Aa
- Display
- Newsreader · 600
- Body
- Hanken Grotesk
Small things, considered
Good type sets the pace, the tone and what people read first.
Google Fonts · Open Font License
Newsreader × Hanken Grotesk
A serious, current and trustworthy pair: a news-desk serif for headlines with a clear grotesk for reading.
Aa
- Display
- Sora · 600
- Body
- Inter
Read once, remember it
One face with personality, one built for long stretches of text.
Google Fonts · Open Font License
Sora × Inter
A geometric display sans over the most readable UI face: precise SaaS product type.
Aa
- Display
- Hanken Grotesk · 700
- Body
- IBM Plex Sans
Every screen, one voice
Headlines carry the character; the body face keeps people reading.
Google Fonts · Open Font License
Hanken Grotesk × IBM Plex Sans
Tight, bold grotesk headlines with a technical body for Swiss-style clarity and grids.
Aa
- Display
- JetBrains Mono · 600
- Body
- IBM Plex Sans
Every screen, one voice
Headlines carry the character; the body face keeps people reading.
Google Fonts · Open Font License
JetBrains Mono × IBM Plex Sans
Monospace headlines over a technical sans, unmistakably made for developers.
Aa
- Display
- Plus Jakarta Sans · 700
- Body
- Inter
Small things, considered
Good type sets the pace, the tone and what people read first.
Google Fonts · Open Font License
Plus Jakarta Sans × Inter
Bold, modern product headlines with a workhorse UI body: clean startup type that never gets in the way.
Aa
- Display
- Schibsted Grotesk · 800
- Body
- Newsreader
Small things, considered
Good type sets the pace, the tone and what people read first.
Google Fonts · Open Font License
Schibsted Grotesk × Newsreader
Heavy grotesk headlines over a reading serif, the modern editorial flip for essays and newsletters.
1 stroke · 20px · round · bare
Settings
Hairline icons
Whisper-thin 1px strokes with no frames: quiet, precise and expensive-looking.
1.5 stroke · 20px · round · bare
Saved
Regular icons
Balanced 1.5 strokes with no frames, the safe and readable default for product UI.
1.75 stroke · 20px · round · soft
Search
Icons in soft tiles
Icons in accent-tinted rounded tiles: the friendly SaaS feature-list look.
1.5 stroke · 18px · round · outlined
Search
Icons in outlined tiles
Hairline-bordered tiles with text-coloured icons that feel calm, structured and neutral.
Other vibes
Stop shipping apps that look AI-made.
Save what you love to a sheet, connect Claude or Cursor, and every screen comes out in your style. Free for 3 days on annual plans, card needed.