Weekly digest
Streak reminders
Squash toggle
Switch whose thumb stretches as it travels, then settles on a spring.
Playful UI
Rounded, warm and a little bouncy: interfaces that smile back without getting silly.
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
Bricolage Grotesque / Inter
Shape & motion
radius 10/18/26 · spring 320/14
A demo app rendered only from these tokens, which make up the starting sheet for this vibe.
130 playful assets
Shown in this vibe’s tokens. In your sheet, they take yours.
Components
Pull me
Magnetic button
Button that leans toward the cursor and snaps back on a spring.
Drifting mesh
Drifting mesh
Soft colour fields drifting behind content like a slow lava lamp.
128
Like burst
Heart that pops with a ring of particles when you like something.
0%
Daily goal6 of 8 habits
Progress ring
Circular progress that fills on a spring and counts up its label.
Magnifying dock
Icon dock where items swell as the cursor passes over them.
Ship it ↗
Hard-shadow button
Chunky button with an offset hard shadow that presses flat on click.
MATLAKJS+12
Editing this sheet nowAvatar fan-out
Overlapping avatars that fan apart and reveal names on hover.
Taste · Motion · Ship · Taste · Motion · Ship · Taste · Motion · Ship · Taste · Motion · Ship · Taste · Motion · Ship · Taste · Motion · Ship · Taste · Motion · Ship · Taste · Motion · Ship ·
Yours · Exactly · Yours · Exactly · Yours · Exactly · Yours · Exactly · Yours · Exactly · Yours · Exactly · Yours · Exactly · Yours · Exactly ·
Kinetic ticker
Oversized type running in a band, tilted, like a sports broadcast.
Squishy pill
Pill button that squashes wider and shorter while pressed, then springs back with a jelly wobble.
Drawn checkbox
Native checkbox whose box fills from the centre while the tick draws itself on stroke by stroke.
Range slider with value bubble
Accessible range slider whose value pops up in a springy bubble above the thumb while dragging or using the keyboard.
Flip card
Two-sided card that flips in 3D on click, Enter or Space and settles with a springy wobble.
Pop + overshoot modal
Modal that springs in from 85% with a little overshoot: friendly, bouncy, quick.
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.
Spring tooltip
Tooltip that waits a beat on hover (none on keyboard focus), then rises into place on a small spring; Esc dismisses it.
Slide-up stagger page
On each route change the new page's sections rise in one after another on a spring.
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.
Dot wave loader
Typing indicator or compact loader with a screen-reader label: three accent dots that rise and settle one after another in a rolling wave.
Success confetti
Wraps a button or badge and bursts token-coloured confetti from it on success; the pieces arc up, tumble down, fade and unmount.
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.
Notification bell
Bell icon button that rings with a damped spring wobble and pops its unread badge every time the count goes up.
Letter wave
Letters hop up one after another in a bouncy wave when the text mounts and again whenever it's hovered.
Cursor trail
A dot and a lagging ring follow the pointer inside a region on springs, and the ring swells over buttons and links.
Swipe card stack
Deck of cards you drag left or right: the top card tilts with the drag and, past the threshold, flings away while the next card scales up into place, with Skip and Keep buttons and arrow keys 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.
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.
Rolling number stepper
Minus/plus stepper whose digits roll up or down with the change, repeats while a button is held and shakes when pushed past its min or max.
Star rating
Five-star rating with a hover preview fill, a springy bounce on the star you land on, optional half stars and arrow-key control as a slider.
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.
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.
Mobile tab bar
Bottom tab bar where a pill slides to the chosen tab, its icon bounces up into it and only the active tab shows its label.
Pop-in stagger
Items pop in one after another on an overshooting spring, each starting small with a tiny tilt.
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.
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.
Paper plane send
A send button whose paper plane winds back and flies off up-right, a check springs in once the send resolves, then the plane glides back.
Split-flap text
Departure-board text whose character tiles flip through a few glyphs, top flap falling onto the bottom, before landing, staggered left to right.
Error page section
404 or error section whose oversized code assembles from split glyph halves and then wobbles digit by digit above a message and two actions.
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.
Onboarding checklist
Collapsible getting-started card whose progress ring fills as items strike through and fade, bursting into an all-done state with a drawn check when the last one lands.
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.
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.
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.
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.
Reaction picker
Like button that opens a tray of SVG-drawn reaction faces on hover, long-press or the Up arrow; faces magnify under the pointer and the chosen one flies back into the button.
Marker highlight
Chosen words get a slanted, hand-drawn-feeling marker stroke in the accent that sweeps in behind them one phrase after another, wrapping across lines.
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.
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.
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.
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.
Flip-in tiles
Grid tiles swing into place on the X axis from a hinge in a diagonal wave, landing on a spring when the grid scrolls into view.
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.
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.
Circle reveal page
The next page grows over the current one inside a circle that opens from the click point (or the centre) while the old page sinks back.
Moving stripes
Bold diagonal stripes in the accent, the text colour or both alternating drift slowly sideways behind content and fade out toward every edge through a soft rectangular mask.
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.
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.
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.
Gauge meter
Semicircle meter whose needle springs to the value (overshooting, then settling) while the accent arc and centre readout follow it, with tick marks and min/max labels.
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.
3D press button
Raised button standing on a visible edge with a ground shadow: it lifts a touch on hover, sinks into its base on pointer or Space/Enter press, and springs back up on release.
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.
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.
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.
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.
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.
Extruded type
Display type with a stepped 3D extrusion stacked from accent-toned text-shadows that springs deeper and swings its angle on hover or focus while the face lifts off the page.
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.
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.
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.
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.
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.
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.
Shutter page
A row of slats drops shut over the old page one after another like a roller shutter, then rolls open the same way to uncover the new one, in ink, accent or alternating two-tone.
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.
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.
Slam-in stamp
Items slam onto the page one after another from oversized and blurred, dipping on impact as a hard offset shadow block kicks out from underneath each one.
Form error summary
Heavy-bordered box that lands above a form after a failed submit (its offset shadow stamps out, a big count rolls, each problem links to its field) and strikes through and folds away each fix until it reads all clear.
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.
Now playing card
Compact media player card whose artwork eases larger while playing, with equaliser bars, a play button that morphs into pause, tracks that slide in from the side you skipped towards, and a keyboard-operable seek slider.
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.
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.
Pixel trail
Every grid cell the pointer crosses inside a region lights up in the accent and fades out behind it in hard steps, filling in between samples so even fast sweeps leave a blocky, gap-free trail.
Elastic divider
A hairline divider the pointer can push: crossing it drags the line along like a string, and pushed past its stretch it slips free and wobbles back to straight on a loose spring.
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.
Dice roll
Shuffle button for random picks and surprise-me actions: its die hops, tumbles and squashes as it lands on a new face, its pips sliding and popping into the new layout one after another.
Stepped fill button
Slab button with a thick border, hard offset shadow and boxed arrow cell: on hover or keyboard focus the accent floods across in a few hard bands that invert the label at each band edge, the arrow hops out of its cell and back, and a press drops it flat onto its shadow.
Block switch
Rectangular on/off switch on a hard shadow whose solid block thumb slams across in a few stop-motion frames to cover the inactive half, revealing ON on an accent field or OFF on the surface, and sinks onto its shadow while pressed.
Tag product card
Thick-bordered product card with artwork on a visible grid, a tilted price tag that swings in hard frames when the item is added, option cells that invert in a cut as a WAI-ARIA radio group with struck-through sold-out options, and an add button that presses onto its shadow and stamps “Added”.
Tone shift
Sections each name a tone (background, surface, accent or ink), and the backdrop crossfades to it as the section passes the middle of the viewport, with the text colour blending along so copy never sits on the wrong tone.
Moiré field
Two fields of fine concentric rings, one in the text colour and one in the accent, overlap while one circles slowly around the other, so their interference ripples into shifting op-art moiré bands behind content.
Detached page 404
Playful 404 where a page card hangs off a grid by one pin and swings on a spring when nudged, beside a home button and a few links.
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.
Cleared inbox
All-caught-up state where an empty tray drops in and settles, then a sun rises from behind it with slowly turning rays, over one calm line and a link to the archive.
Empty cart
Drawer-sized empty cart whose basket rolls in on turning wheels and rocks as it settles, with a continue-browsing action and an optional row of suggestions from props.
Setup complete
Done screen whose check draws inside a ring that pulses once, with a ticked summary of what was set up and Go to dashboard.
About you chips
One-question personalisation step with single or multi-select chips that pop when chosen, an Other chip that opens a field, and Skip.
Intro carousel
Swipeable intro slides (drag, arrow keys or dots) with drawn illustrations, a dot that stretches to the active slide, Next and Skip.
Nested progress rings
Two to four concentric rings that sweep to their values on a spring, beside a legend that counts up; pick a legend row to spotlight its ring and read it in the centre. For goals and quotas.
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.
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.
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.
Face slider rating
Rating slider whose face morphs from a frown to a smile by interpolating one SVG mouth path as you drag or use the arrow keys, snapping to five labelled stops.
Weekly review
3 highlights · 2 to finish
PublishPreviewSaved
Terracotta palette
Sun-baked clay and cream with a burnt-orange accent that feels warm, earthy and handmade.
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
Sorbet palette
Blush-pink whites with a raspberry accent, sweet and upbeat without going childish.
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
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
Cobalt Pop palette
Newsprint cream, heavy black lines and a pure cobalt accent for a graphic, confident look.
Weekly review
3 highlights · 2 to finish
PublishPreviewSaved
Synthwave palette
Midnight purple with a hot-magenta accent for retro-future arcade energy.
Weekly review
3 highlights · 2 to finish
PublishPreviewSaved
Volt palette
Punchy, energetic olive-black with a bright lemon accent, made for sport and events.
Aa
- Display
- Fraunces · 600
- Body
- Figtree
Read once, remember it
One face with personality, one built for long stretches of text.
Google Fonts · Open Font License
Fraunces × Figtree
A soft, wonky old-style serif with a friendly sans, warm and characterful for consumer brands.
Aa
- Display
- Fredoka · 600
- Body
- Plus Jakarta Sans
Read once, remember it
One face with personality, one built for long stretches of text.
Google Fonts · Open Font License
Fredoka × Plus Jakarta Sans
Rounded, bubbly headlines with a clean modern sans, approachable for kids, games and habits.
Aa
- Display
- Unbounded · 600
- Body
- Manrope
Every screen, one voice
Headlines carry the character; the body face keeps people reading.
Google Fonts · Open Font License
Unbounded × Manrope
Extra-wide, rounded display type with a calm modern body, for futuristic launches and tech products.
Aa
- Display
- Syne · 700
- Body
- DM Sans
Small things, considered
Good type sets the pace, the tone and what people read first.
Google Fonts · Open Font License
Syne × DM Sans
Quirky art-school display letters with a neutral body, for creative studios and portfolios.
Aa
- Display
- Young Serif · 400
- Body
- Instrument Sans
Read once, remember it
One face with personality, one built for long stretches of text.
Google Fonts · Open Font License
Young Serif × Instrument Sans
A chunky, soft serif with a clean sans, cosy and confident for food, home and lifestyle.
Aa
- Display
- Bricolage Grotesque · 700
- Body
- Figtree
Read once, remember it
One face with personality, one built for long stretches of text.
Google Fonts · Open Font License
Bricolage Grotesque × Figtree
A characterful grotesk with ink traps and a friendly body, for playful SaaS with personality.
2.25 stroke · 20px · round · bare
Send
Bold icons
Heavy rounded strokes that hold their own next to bold type and stay friendly and legible at small sizes.
1.75 stroke · 20px · round · soft
Search
Icons in soft tiles
Icons in accent-tinted rounded tiles: the friendly SaaS feature-list look.
2 stroke · 18px · round · solid
Camera
Solid badge icons
Icons knocked out of solid accent tiles, with confident app-icon energy for features and settings.
1.75 stroke · 18px · round · circles
Alerts
Circled icons
Icons centred in soft tinted circles, gentle and approachable for health, finance and onboarding.
2.5 stroke · 20px · square · solid
Settings
Block icons
Chunky square-ended strokes on solid accent blocks: loud, graphic and unmistakable.
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.