Make it yours.
Blur-in headline
Headline words resolve from a soft blur, one word at a time.
Editorial UI
Magazine energy: serif headlines, paper tones and motion that turns the page rather than bouncing.
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 0/2/4 · spring 170/26
A demo app rendered only from these tokens, which make up the starting sheet for this vibe.
97 editorial assets
Shown in this vibe’s tokens. In your sheet, they take yours.
Text effects
Underline sweep
Text button whose underline draws in from the left on hover or keyboard focus and exits to the right.
Hairline fill
Hairline-outlined button where a solid fill rises from the bottom on hover and inverts the label exactly at its edge.
Ease toggle
Calm on/off switch whose thumb glides on a soft ease-out curve with no bounce as the track colour cross-fades.
Fade + rise modal
Calm modal whose panel fades in while rising 14px on a long ease-out, with no scale and no bounce.
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.
Film grain
A fine SVG feTurbulence noise overlay, tinted with the text colour and jittered a few times a second like film stock.
Clip reveal on scroll
Content is uncovered once by a clip-path inset wipe from any edge as it scrolls into the viewport or a container.
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.
Count-up stats band
Row of headline stats split by hairline dividers whose numbers count up from zero once the band scrolls into view.
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.
Progress steps
Horizontal multi-step progress whose connectors fill up to the current step while completed steps morph from numbers into drawn checkmarks.
Collapsing breadcrumbs
Breadcrumb trail that folds its middle crumbs into an ellipsis button, which unfolds them inline one after another.
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.
Floating format toolbar
Selection toolbar that springs up above highlighted text with Bold, Italic, Underline and Link toggles and arrow-key roving focus.
Mask wipe reveal
An image or card is uncovered by a clip-path wipe in the direction you choose while its content settles from a slight zoom.
Split doors page
Two doors slide in from the sides and meet over the old page, hold for a beat, then part to reveal the new one.
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.
Horizontal scroll section
A tall section pins its viewport while vertical scrolling slides a row of cards sideways from the first card to the last.
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.
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.
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.
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.
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.
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.
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.
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.
Crosshair guides
Hairline guides cross the region at the pointer with a gap around it, edge rulers mark its position and a coordinate readout counts along, with optional snapping to a grid.
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 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.
Block reveal
A solid accent block sweeps across an image or line of type, holds a beat, then sweeps away to uncover the content beneath it.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Fullscreen menu
A menu button that opens a full-screen overlay in a circle growing from the button, with big numbered links rising from their masks in a stagger and the whole thing playing backwards on close; focus is trapped and Esc closes.
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.
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.
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.
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.
Title card page
An ink panel rises over the old page as the destination's name rises into it in large display type, holds for a beat, then lifts away upward to uncover the new page.
Strip-join reveal
An image arrives in vertical strips that slide in from alternating ends and lock together into the whole picture, sweeping from one edge or from the centre outward.
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.
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.
Receipt card
Order-summary receipt that feeds out from under a printer slot in line-by-line jolts, counts its total up and thumps a rotated Paid stamp on, with a torn zigzag edge and a hard outline and shadow that follow it.
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.
Needle field
A grid of short needles behind a region swings to point at the pointer like iron filings round a magnet, the nearest growing longer and taking the accent, then settles back to a resting angle when it leaves.
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.
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.
Sort toggle
Column-header sort button that cycles unsorted, ascending and descending, its three bars re-ranking short-to-long or long-to-short one after another while the arrow flips to point at the larger end, with aria-sort-ready values.
Offset lift card
Link card of bordered strips (index cell, tag, artwork on a visible grid and title block) that jumps up and left off its hard shadow in two frames on hover or keyboard focus, floods its tag with the accent, kicks its corner arrow straight, shifts the grid half a cell, and drops flat when pressed.
Folder tabs
WAI-ARIA tabs drawn as numbered folder tabs on a thick-bordered panel with a hard shadow: the chosen tab jumps up and fuses with the panel in a few hard frames while the last drops back behind it, and the new panel cuts in behind a stepped wipe travelling the way you moved.
Grid stamp text
Headline set one character per cell in a ruled grid that starts hatched and empty, then has its letters stamped in one tick at a time in a scattered order, each landing with an accent flash and a hard two-frame press.
Grid poster hero
Landing hero laid out like a ruled poster over a visible twelve-column grid, with oversized headline lines in bordered rows that shove in from alternating sides in hard stop-motion frames, a starburst sticker that slaps on, hard-shadow CTAs and a strip of short notes.
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.
Curtain split
A pinned cover with an oversized headline tears down the middle as you scroll, its two halves sliding apart and tipping away along an accent cut to reveal the section underneath, which settles up from a slight zoom.
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.
Blueprint grid
A technical-drawing backdrop of fine grid lines with heavier majors, ruler ticks and coordinates along the top and left edges and blinking registration marks, swept slowly by an accent scan line.
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.
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.
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.
Appearance settings
Theme cards for light, dark and system with miniature interfaces, accent swatches, a density control and a text-size slider that drive a live preview, saved with Save and Cancel.
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.
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.
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
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
Sand & Sea palette
Beach-sand neutrals with a deep teal accent: relaxed, coastal and grown-up.
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
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
- 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
- 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
- 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
- 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
- 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
- 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.
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.5 stroke · 18px · round · outlined
Search
Icons in outlined tiles
Hairline-bordered tiles with text-coloured icons that feel calm, structured and neutral.
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.