Apply sheet
Glow ring button
Primary button with a slow conic light running around its border.
Luxury & premium UI
Fine lines, rich neutrals and unhurried movement: the details people pay for.
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
Instrument Serif / Inter
Shape & motion
radius 2/4/6 · spring 120/22
A demo app rendered only from these tokens, which make up the starting sheet for this vibe.
149 luxury & premium assets
Shown in this vibe’s tokens. In your sheet, they take yours.
Components
wuizard · pro
Hover for tilt
spring 260/24 · 8° max
Card tilt + cursor glow
A card that tilts toward the cursor and glows where you point.
- 2m
- 9m
- 1h
- 3h
Staggered list in
List rows rise and fade in one after another with a short stagger.
Scale-blur modal
Modal that scales up from 96% while un-blurring, over a dimmed backdrop.
OverviewAssetsMotionCode
Sliding tab pill
Segmented tabs with an indicator that glides between options.
Active connected sheets+12.4%
0123456789,012345678901234567890123456789
Rolling counter
Numbers roll digit by digit like an odometer when the value changes.
Magnifying dock
Icon dock where items swell as the cursor passes over them.
01Collect
02Connect
03Ship
Stacking scroll cards
Cards pin and stack on top of each other as the page scrolls.
Shimmer sweep button
Primary button with a soft band of light sweeping across it on a slow loop.
Hairline fill
Hairline-outlined button where a solid fill rises from the bottom on hover and inverts the label exactly at its edge.
Expanding search
Search icon button that springs open into a text field and folds back on Escape or when left empty.
Spotlight border card
Card whose hairline border lights up around the pointer, with a faint wash of the same light across its surface.
Expanding card
Compact card that grows in place to reveal its details with a layout spring; Escape collapses it.
Floating pill nav
Full-width top bar that springs into a compact, frosted floating pill once the page or a scroll container scrolls past a threshold.
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.
Slow veil modal
Backdrop veils in slowly as the page behind it blurs, then the panel fades up a beat later and leaves first on close.
Curtain wipe
An accent-coloured curtain sweeps across the old page, then pulls away to reveal the new one.
Card → detail
Grid cards that morph into a detail dialog (card, image and title travel as shared elements) and morph back on close.
Gradient ring spinner
Spinning ring whose accent tail fades to transparent behind a rounded head, with a soft glow over a faint track.
Rotating word
One accent word in a headline rotates through options, sliding up into place while its slot springs to the new width.
Split hero
Landing hero whose headline slides up line by line beside an abstract product frame that rises and settles into place on scroll.
Centered hero
Centered landing hero with a pill badge, a headline whose words blur into focus one by one, and a CTA row over a soft breathing accent glow.
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.
Border-beam CTA band
Call-to-action band whose rounded border carries a beam of accent light travelling around it, with headline and buttons.
Hover reveal card
Media card whose details panel slides up over the artwork on hover or keyboard focus while the image eases into a subtle zoom.
Glass card
Frosted glass card over soft, blurred accent blobs whose layers drift apart in a gentle parallax as the pointer moves.
Border beam card
Card with a short, bright beam of light that travels around its hairline border on a steady loop, trailing a soft inner glow.
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.
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.
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.
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.
Shared-layout lightbox
Thumbnail grid whose tiles zoom into a lightbox as one shared element, step through the set with a directional slide and zoom back into place on close.
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.
Blur slide stagger
Items slide in from a side one after another, sharpening from a blur as they fade up.
Button → dialog morph
A button whose shape grows into its dialog panel as a shared element and shrinks back into the button on close, with focus returning to it.
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.
Zoom-through page
The old page shrinks back and fades while the new one settles in from slightly larger than life; keyed by pathname for any router.
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.
Hover image reveal
A list whose rows summon a floating preview card that trails the pointer, tilts with its speed and wipes up to each hovered row's artwork.
Light beams
Soft diagonal shafts of light, built from blurred accent and text-colour gradient strips, drift and breathe slowly behind content.
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.
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.
Integrations hub
Integrations section with your product as a centre hub whose connector lines draw out to generic app tiles that pop in as each line arrives.
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.
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.
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.
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.
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.
FAB speed dial
Floating action button that turns its plus into an × and fans out labelled actions in a spring stagger, with arrow-key navigation, an optional scrim and Esc to fold away.
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.
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.
Line mask reveal
A headline or paragraph whose lines rise one after another out of their own clipping masks with a settling tilt, split by explicit lines or by sentence, while the copy stays real, selectable text.
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.
Floating shapes
Soft, blurred geometric shapes (circles, a rounded square, a triangle, a ring and a pill) float on slow independent loops from a fixed layout, with optional pointer parallax.
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.
Blob cursor
A soft accent blob trails the pointer on a spring inside a region, stretching along its direction of travel, and morphs into a rounded highlight that hugs any child marked data-blob.
Label cursor
Over chosen targets a pill label (View, Drag, Play) with an optional icon springs in beside the pointer, follows it with a slight tilt and rolls its text when you move to a target with a different label.
Pointer parallax
Stacked layers in a hero shift by their depth as the pointer moves across it (background one way, foreground the other), with a gentle 3D tilt, springing back to centre when the pointer leaves.
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.
Pinned steps
Scrollytelling: a sticky visual panel swaps with a springy slide as step blocks scroll past beside it, the step crossing a reading line is highlighted and a counter tracks where you are.
Scroll zoom hero
A pinned media block grows from an inset rounded card to full-bleed as you scroll through its section, its image settling from a slight zoom while overlay copy fades in at the end.
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.
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.
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.
Avatar → profile
A small avatar chip opens into a profile header card (shape, portrait and name travel as shared elements over a banner), then folds back on close.
Conic sweep
A soft conic-gradient light rotates slowly around a point behind content like a lighthouse beam, each arm brightening toward a leading edge and fading away from the centre and the far edges.
Topographic lines
Contour lines traced from a slowly evolving noise field drift and reshape across a canvas like a living survey map, with every fourth line drawn as a heavier accent index contour.
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.
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.
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.
Gradient border button
Solid button framed by an accent-tinted conic gradient border that turns continuously and smoothly spools up to a faster spin, with a brighter halo, on hover or keyboard focus.
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.
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.
Add to cart fly
Add-to-cart button that throws a dot or small thumbnail along an arc into a cart button, whose badge count bumps and icon wobbles with a spring the moment it lands.
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.
Variable weight hover
Letters near the pointer swell bolder through the font's weight axis (a soft spot of weight that glides along the text on a spring), with an even-stroke fallback for fonts that have no axis.
Circular text badge
A ring of text set on a circular path that turns slowly around a centre icon or label on an accent disc, easing to a stop on hover or focus and gathering speed again after.
Pull quote reveal
A pull quote whose large quote marks draw themselves in before the words ink in one by one from a faint ghost of the text, with the attribution and its rule sliding in after the last word.
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.
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.
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.
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.
Video hero
Landing hero with headline, copy and CTAs beside a poster frame whose pulsing play button swaps the poster for the video in place, never autoplaying.
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.
App download section
Mobile-app section with neutral text download buttons beside a phone frame that springs into place, floats and tilts toward the pointer over expanding rings.
Feature spotlight
Large screenshot with numbered callouts where a spotlight glides from one to the next in sequence and jumps to any callout whose list item is hovered or focused.
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.
Zoom-out pan page
The current page shrinks into a rounded card, the row of cards pans the way you navigated until the next one is centred, and it grows back to fill the frame.
Morphing island
One floating container that springs its width, height and corners to fit whatever it holds next (a button, a tray of actions, a confirm prompt, a status) while the old content blurs out and the new blurs in.
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.
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.
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.
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.
Wallet stack
Stack of passes showing each one's top strip, where opening a pass springs it to the front at full height while the others tuck into a peeking pile below, and Escape or a second press restacks them.
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.
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.
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.
Voice record toggle
Round mic button that morphs its capsule into a stop square and grows into a pill with live level bars, a running timer and a breathing ring while recording, then folds back when you stop.
Sparkle switch
On/off switch for AI-style features whose thumb carries a sparkle that fills, twinkles round and throws a few glints as it slides on while a sheen sweeps the track, then dims back to an outline when switched off.
Exploded stack
A pinned isometric stack of layer plates pulls apart as you scroll through its section, each plate lifting to its own height while a leader line and label draw in beside it, for an exploded view of how a product is built.
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.
Signal traces
Circuit-board traces route in from every edge toward a chip outline at the centre in straight runs with 45° bends, while glowing accent pulses travel along them and flash the pads they arrive at.
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.
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.
Spotlight 404
Dark 404 where a soft spotlight follows the pointer (or drifts on its own on touch) across oversized numerals and finds the way home.
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.
Maintenance section
Scheduled maintenance screen showing the window in the viewer's local time, a progress line through it and an optional notify-me email field.
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 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.
Welcome screen
Welcome screen that greets by name, staggers in three short points beside a token-drawn illustration, with Get started and Skip for now.
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.
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.
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.
Billing summary
Billing overview with the plan, a usage meter, the payment method, the next invoice date and an invoice list with downloads, every amount from props formatted with Intl and none invented.
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.
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.
Target KPI tile
Metric tile with a bullet bar: the value fills toward a target marker over a ghost of the previous period, beside a delta chip and a percent-of-target that counts up.
Leaderboard
Ranked rows (rank, initials avatar, name, score bar) that glide to their new places when scores change, flag how far each moved, and keep your own row pinned to the edge of the list while it is scrolled out of view.
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.
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.
Nested command menu
Command menu with grouped commands, recent items and shortcut hints, where Enter on a group drills into its list behind a breadcrumb chip, search reaches nested commands, and Backspace on an empty field steps back.
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.
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
Lilac palette
Pale lilac with a saturated violet accent: soft, modern and a little dreamy.
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
Blush & Bone palette
Bone white and dusty blush with a deep rosewood accent: soft luxury for beauty and fashion.
Weekly review
3 highlights · 2 to finish
PublishPreviewSaved
Dusk palette
Warm-to-cool evening palette: ink, plum-grey and an ember-glow accent on sand-coloured text.
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
Aubergine palette
Deep aubergine with a saffron accent that feels rich, warm and a little theatrical.
Aa
- Display
- Instrument Serif · 400
- Body
- Instrument Sans
Every screen, one voice
Headlines carry the character; the body face keeps people reading.
Google Fonts · Open Font License
Instrument Serif × Instrument Sans
High-contrast serif headlines over a calm grotesk body: the magazine look for product sites.
Aa
- Display
- EB Garamond · 500
- Body
- Source Serif 4
Read once, remember it
One face with personality, one built for long stretches of text.
Google Fonts · Open Font License
EB Garamond × Source Serif 4
Classic Garamond headlines over a sturdy text serif: bookish, literary and made for long reads.
Aa
- Display
- Bodoni Moda · 600
- Body
- DM Sans
Small things, considered
Good type sets the pace, the tone and what people read first.
Google Fonts · Open Font License
Bodoni Moda × DM Sans
Razor-thin Didone contrast with a soft geometric body for fashion-week luxury.
Aa
- Display
- Playfair Display · 700
- Body
- Lora
Read once, remember it
One face with personality, one built for long stretches of text.
Google Fonts · Open Font License
Playfair Display × Lora
A high-contrast transitional serif with a gentle text serif: timeless and literary.
Aa
- Display
- DM Serif Display · 400
- Body
- DM Sans
Read once, remember it
One face with personality, one built for long stretches of text.
Google Fonts · Open Font License
DM Serif Display × DM Sans
A dramatic display serif with its sister sans, for polished magazine covers and landing pages.
1 stroke · 20px · round · bare
Settings
Hairline icons
Whisper-thin 1px strokes with no frames: quiet, precise and expensive-looking.
1.75 stroke · 18px · round · circles
Alerts
Circled icons
Icons centred in soft tinted circles, gentle and approachable for health, finance and onboarding.
1.25 stroke · 22px · round · outlined
Send
Editorial icons
Fine strokes at a slightly larger size in outlined tiles for a refined, airy, print-like feel.
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.