@keyframeui

A card that leans toward the pointer and catches the light with a soft moving glare.

A single card with the default tilt and glare.

Three plan cards, with the featured plan leaning harder.

A grid of subtle tiles with a gentler tilt and no glare.

Cards that travel along a semicircle as you scroll, entering at the bottom right and leaving at the bottom left.

Eight cards on an arc, driven by scrolling inside the box.

A portfolio hero: project cards on the arc, with a pinned headline and a caption for the project at the top.

A company history with tighter spacing, the current year highlighted and a year rail that follows along.

Wide quote cards with tilt turned off so the text stays level, plus page dots.

A divider that catches on the pointer as it crosses, bends with it, then slips free and twangs back on a bouncy spring.

A divider between two blocks of text, with the default pull and spring.

Six strings tuned like a guitar: thicker strings are softer and ring longer. Sweep down across all of them.

Faded strings between release notes, with a softer highlight.

A thumbnail that grows into a full-screen photo, pages sideways, and shrinks back into its tile when you drag it down, like Apple Photos.

A photo grid. Tap a photo, swipe or use the arrow keys to page, then drag it down and it lands back in its tile.

A storefront grid with portrait tiles and rounder corners. Captions carry the name, colorway and price.

Shots spread through an article, in different grids. The viewer pages through them in reading order and scrolls each one into view so it has a tile to land in.

A search button that stretches into a search field, with results unfolding underneath as one shape, and shrinks back into the button when it closes.

A search button in a site header. It grows into a field with popular pages underneath; pick one to go there.

An app's command menu. The trigger travels to the middle of the screen, with grouped commands and their shortcuts. Opens with ⌘K.

A docs header with a fake search field that becomes the real one. Press / to open it from anywhere.

A guided tour that dims the page and cuts a hole around one element at a time. The hole glides to each next element and takes its shape, with the explanation c…

A first tour of a dashboard: the avatar, the toolbar, the New button and the sidebar. The hole goes from a circle to a long pill to a button to a tall panel. C…

Three new features spread down a page. Each one scrolls into view while the spotlight travels to it. The Live switch stays usable while it's highlighted.

A sign-up form that explains each field in turn. You can type into each field while it's highlighted.

A card that opens into a full article, growing from its place in the page to fill the screen, and shrinks back into its slot when you pull it down, like the Ap…

Three stories in different styles: a full-bleed photo, a top-five list and a bold card on a gradient. Tap one, then pull it down from the top, or press Esc, an…

Each post has its own link. Opening one updates the URL, the back button closes it, and loading a post's link opens it directly. The notes load while the cover…

Product cards that open into a product page with close-ups and a size picker. Add something to the bag, then pull the page down to watch the count behind it ch…

A curtain that covers the page while it loads, counting from 0 to 100 with the fonts and hero images, then lifts as the headline rises out of its masks underne…

The default counter over a studio's home page. The nav, headline, links and photo each rise as the curtain clears them. Press reload in the address bar to play…

A custom counter in the drop's colors, with a padded number and a progress bar, on a curtain that falls away. `onComplete` starts the countdown as it goes, so …

The default counter set in serif on a stone curtain that slides off to the left. It waits for the three photos to load and decode, so they're sharp from the fi…

A headline with a small video set between its words. As you scroll, the window opens until it fills the screen, pushing the words off its edges.

A motion studio's showreel opens out of the headline. Once it fills the box, a button plays the film full screen.

An app screenshot instead of a video, built in markup so it stays sharp full screen. A "Watch the demo" button appears once it fills the box.

A conference hero with an aftermovie and a bolder headline. The date and city chips live inside the halves, so they fly off with the words.

A page-load intro that counts to 100 with the real loading while a flipbook of your work plays in a small frame, then grows the last image into its place on th…

A studio's home page. Four projects flip past in the frame, then the fifth grows into the full-bleed hero, and the headline rises over it. Press reload in the …

A season label instead of a number, and a tall frame for the looks. The last look lands as the half of the page beside the headline.

No images. The wordmark rises a letter at a time as the count runs, then shrinks and flies into the logo's spot in the header. The target can be anything.

A product screenshot that comes apart into its layers as you scroll, explains each one, then clicks back together. The layers are real HTML, so text stays shar…

A dashboard comes apart into its shell, sidebar, live cards, command menu and a teammate's cursor, walks through each one, then lands back as the screenshot it…

The layers don't have to be UI. Four plain planes, from your app down to the database, that stay open at the end. Each carries its name on its front edge, the …

A page lifts off the components it's built from, which lift off the tokens under them. Numbered labels, with the active layer's description under the stack.

A number that rolls each digit on its own wheel, up when the value grows and down when it shrinks, and slides new digits in as the number gets longer.

Step the number up and down. Wheels roll the way the value moves, only the digits that change turn, and 999 → 1,000 widens as the new digit and comma roll in. …

Monthly and yearly plans. Prices roll down to the yearly rate and back up, the yearly total rolls down from a year of monthly bills, and Starter's $0 never mov…

Currency with cents, a count, a percentage and milliseconds. The range switcher makes big jumps in both directions; between them the numbers drift live while t…

A rupee fundraiser that keeps ticking up. Switch between the Indian system of lakhs and crores (₹2,45,67,890) and international thousands (₹24,567,890): the co…

A band of headline numbers that roll up from 0 the first time they scroll into view, one after another.

A list of names that opens a photo at the pointer. It trails the cursor with a little weight, leans as it moves, and wipes to the next photo from the direction…

A studio's work index. Point at a project: its photo opens at the pointer and trails it. Move down the list and each photo wipes in from the top; move up and i…

Names and roles, with a portrait on hover. The frame is taller and rounder, and leans a little less.

An archive of essays with dates and reading times. Each title shows its cover image in a wide 3:2 frame.

A whole archive in one thin strip, with a playhead that walks along it as you scroll. Whatever's under the playhead opens into a loose collage, and the ruler b…

A studio's archive: six projects, forty images. Scroll and the playhead walks the reel while each project opens into a collage under it, and the title rolls to…

Six releases as live UI mockups rather than screenshots, so they stay sharp and follow your theme. The header shows the version and date, and a caption for the…

A year of trips, one group each, in portrait and landscape. Each photo has its own caption, and the trip's dates and a day count sit above.

A grid of videos on one clock. Scrub any card and the rest follow it to the same moment. Stack them to flip between versions of a single frame, or drop one ont…

One motion played with four easings. Each card plots its curve with a dot riding it, and moves a card into its slot with the same value. Hover to scrub and wat…

One prompt, four fictional video models. The clips run 7 to 21 seconds and line up by percentage, so halfway is halfway in all of them. Stack them and move up …

One clip in four cards at 1/8, 1/4, 1/2 and full resolution. It decodes once and is drawn into each card, so all four always show the same frame. Drag Final on…

Three versions of one product's site, built from markup, each scrolling with the clock while the same visitor moves and clicks through it. Drag 2026 onto 2019 …

An agent's steps as they happen. The step at work shimmers and streams its details; when the next one starts, it folds up into a one-line summary and the rail …

A coding agent works through four steps. Each opens while it runs and folds into its summary as the next begins; the edit's diff scrolls inside its step, pinne…

A chat reply that thinks first. The message's parts are shaped like the AI SDK's, and each reasoning or tool part becomes a step. The trail folds into "Thought…

A CI pipeline with every step listed up front as pending. Logs stream into the running step, pinned to the newest line, and each step keeps its time. Turn on B…

Steps with their own icons. Sources collect as chips while the agent searches, pages tick off as it reads, and the answer cites what it found once the trail fo…

Tall photo slices that share one width. The one you open widens into a full card while the others squeeze to make room; its title swings upright and the detail…

An architecture studio's selected work. Move across the row: a slice opens once the pointer settles, so a quick sweep doesn't make the row ripple. Each project…

Six portraits in black and white, with the open one in color through `imageClassName`. The role takes the person's accent. On a phone the portraits stack; on a…

A travel hero that plays on its own: the open slice's strip fills like a story timer, then the next place opens. Hovering pauses it. The counter above follows …

A list of rows that open in place. The row you're on grows taller, its tab widens into a photo, the title slides over to make room and the details rise out fro…

A product site's customer stories. Move down the list: a row opens once the pointer settles, so a quick sweep doesn't make the list ripple. Each company's tab …

A careers page with `openOn="click"` and `numbered={false}`: rows open like an accordion, a second click closes them, and the Apply link inside stays clickable…

A podcast's latest episodes on a dark panel, with square covers through `imageAspect={1}` and episode numbers through `number`. With `collapseOnLeave`, the lis…

Figma-style redlines for any layout. Point at an element to see its size, padding and gaps, with lines and labels that glide from one element to the next. Pin …

A studio's "we sweat the details" section around a product card. Left alone, it tours the card's padding, the gap between the title and the price, the button's…

A settings panel where every spacing label reads as a token through `tokens`, and `selector="[data-redline]"` keeps the pointer on named parts. Pin a row, hold…

A design tool's handoff mode. `onSelect` fills the panel on the right with the CSS and the Tailwind classes of whatever layer is selected, and it swaps as you …

A cursor that uses your product on its own. It glides to buttons and presses them, types and drags across real markup on a script you write, and steps aside th…

An AI agent books a meeting in a calendar built from plain markup. It opens a new event, names it, finds a free slot, picks a guest from the autocomplete and s…

Two teammates on a design canvas, with their steps running at the same time. Maya drags the Features frame into place, and its snap guides show through `data-a…

A SaaS app sets up a project in three clicks, one chapter each, with `chapterStrip` showing Create, Invite and Ship underneath. Click a chapter to jump there, …

A finished layout that builds itself. It starts as a wireframe measured from your real markup, then fills in block by block: text streams in, photos come into …

An AI site builder's hero. A prompt types itself into the field, Enter goes down, and the field docks in the corner as the page builds beneath it. Each loop is…

A case study that goes from an annotated blueprint to the finished design as you scroll, with `play="manual"` following `useScroll`. `data-blueprint-order` gro…

An analytics assistant answers with a dashboard card. KPIs count up through `data-blueprint-count`, chart bars grow from even placeholders into their real heig…

A contact form written as a sentence. Blanks stretch as you type, picked options fly up into place while the words make room, and on send the form settles into…

A design studio's inquiry in large serif type. Type your name and the words after it make room; pick services and each one flies up from the tray while the lis…

An AI startup's demo request on a dark panel. Each team option brings its own grammar ("for just me", "for a company of 500+") and the tools are a pick-any lis…

An invitation reply with a clause that depends on an answer. Pick "with a guest" and " named ___" rises in after it while the words after it glide aside; switc…

The "New" badge above your headline, made useful. Hover it and the pill grows into a small changelog with your last few releases, then folds back into the pill…

An AI startup's hero with the pill above the headline. Hover it and the changelog opens over the headline; a couple of seconds after it scrolls into view it pe…

The closed pill cycles through the week's announcements. Opened, it lists the days and ends on a dimmed, locked Day 4 row with a live countdown.

A dark developer-tool hero: monospace versions with a Feature, Fix or Breaking tag on each row, and a last row with the upgrade command whose copy button turns…

Cards that pin one after another as you scroll. Each new card slides over the last while the deck behind it settles back a layer, scaling down and dimming, so …

An AI agent's four steps, each card with a piece of real product UI. The step list beside the deck follows the front card through `onActiveChange`, and clickin…

A studio portfolio on photo cards, with tighter edges and a deeper dim for a dark page. Each photo settles from a slight zoom as its card lands, driven by `use…

Plans dealt in order, each one reading "Everything in Pro, plus" as it lands on the plan it builds on. Taller edges keep every tier's color showing at the top …

Two pictures in one frame. The pointer paints the second one in with a soft brush, and the stroke closes back behind it.

A brand studio's header over ink in water. The ink waits in black and white; moving through it paints the color in, and the stroke closes back over about half …

An AI photo-restoration tool. With `fadeMs={Infinity}` the paint stays, so you restore the print stroke by stroke. "Restored" floods the rest in from the switc…

A studio's about section. With `autoPlay`, the brush drifts over the portrait by itself until the pointer takes over, so the color keeps moving through it whil…

A portfolio grid in grayscale, with a smaller brush on each card. Only the card under the pointer draws anything, and `autoPlay={false}` keeps the grid still o…

An API quickstart with language tabs. The values every language shares glide to their new places when you switch, you can edit them right in the code, and Run …

An AI API's quickstart in cURL, Python and TypeScript, with the response beside the code (`layout="split"`). Switch tabs and the key, model and prompt glide to…

Install, authenticate and a first request as three blocks sharing one `syncKey`. Switch any of them and all three change together; the package name slides from…

Not only for chat: an email API with the recipient and subject editable in the code. Run streams the JSON the API returns (`responseLang="json"`), and the reci…

Plan cards that fold into the comparison table's sticky header as you scroll. Each card folds straight down into its own column: the price shrinks in beside th…

An AI API's four plans under a sticky site nav, so the bar docks at `top={56}`. Scroll and each card folds into its column's header. Switch to Yearly from the …

A design studio's three ways to work together, set in an editorial serif with tighter corners (`radius={6}`), a wider `gap` and warm `--dock-border` lines. `fo…

Us against the two tools teams switch from, with logo cards instead of prices: each mark shrinks in beside its name as the cards dock. On a phone, the plan pil…

A loupe over a polished UI. Inside the glass the surface peels away to the layer underneath, such as model tokens, raw JSON or latency telemetry, lined up with…

A support ticket triaged by an AI. Under the glass every chip and button turns into the field or tool call behind it, and both messages turn into their tokens …

A studio's booking card over its own blueprint: component names, type and spacing tokens on wireframe bounds. `mode="drag"` with more `zoom`; pick the lens up …

An AI search answer over the live trace that produced it: retrieval, generation and citation spans on the request's timeline, and the answer recolored by when …

Right-angle circuit traces between the cards you already have, with signals that travel through them. Mark any element with `data-circuit`, describe the graph …

Issues, threads and tickets go into an orchestrator, which hands each one to the next free agent with `fanout="one"`. Every card is a plain `div` with `data-ci…

A payment webhook through a queue and a worker to three destinations, fired by a button through `apiRef.send()` with `autoPlay={false}`. Each destination's tra…

Your product in the middle of a 3×3 grid of integrations, the flow built from arrays with a packet color per tool. `highlight="neighbors"` lights only a tile's…

A field of hairlines that lines up like iron filings around your call to action. The button is a bar magnet, the pointer a second pole that bends the field tow…

An AI startup's waitlist hero. The whole email pill is the magnet: the field loops out from it, parts around the headline, and bends toward the pointer. Join, …

A studio's closing card in stone and orange. The button is a single pole (`poles="center"`), so the field fans into it from across the card, and the serif head…

A hero with a primary and a secondary call to action. The field rests on the primary; lean toward the other and its `strength` takes over, so the field swings …

A background wall of boxes that takes an imprint of the pointer. The boxes under it sink back along the z axis to one flat floor, the boxes around them stand i…

A product hero on the default wall. Move across it and the dent follows with a trail that fills back in; press and hold to push the floor deeper and send a rin…

A studio's closing card in stone, with big boxes and `falloff={0}`: every box in reach drops to the same floor, like a row of keys going down, and the floor gl…

A 404 page on small boxes with `falloff={1}` and a closer `perspective`, so the dent is a smooth bowl that terraces down, and the page itself has sunk.

A toggle that expands its new state as a domain across the page. A sphere grows from the switch, everything inside it changes theme or mode, and its edge is a …

A landing page's theme toggle. Dark mode opens from the button as a domain and takes the page over, with a seam of stars at its edge; press again to draw it ba…

A writing app. Focus opens a calm, dark domain in which the sidebar and toolbar, wrapped in `DomainSwitchAside`, dissolve, and the document in `DomainSwitchMai…

Press ⌘K (or the search icon) and a domain opens from the icon in which the page becomes a command palette. Run a command or press Esc and it collapses back in…

A progress bar that closes half the remaining gap at every step, so it never reaches the end while work is still running. The last stretch becomes a ruler that…

A prompt card. Generate runs Composing, Denoising and Upscaling while the model takes a random 4 to 9 seconds, so the bar is often deep in the ruler when the i…

A deploy streams its build log under a bar in the header, labelled with the current phase. Waiting for the health check hangs for seconds with nothing new in t…

Three files, each with its own bar, finishing at different times. The video's virus scan takes much longer, so you can watch its ruler go many decimals deep wh…

A before-and-after section. Alerts, pings and complaints drift into the seam between two panels and slide under the calm one, and each card that goes through l…

A help desk's pitch. Overdue tickets, angry follow-ups and a refund that fired three times drift into the seam, and every one that goes through ticks Harbor's …

The log display. Missing receipts, a duplicate AWS charge and a spreadsheet four people are editing go through the gate and come out as reconciled lines with t…

A whole landing section: heading, subhead, and a calmer, slower gate with a call to action pinned under the counter. The calm panel is ink in light mode and tu…

A looping strip of photo cards where the first card leads: bigger, with its quote showing. Passing the lead on glides the strip, shrinks the old lead out of th…

Workshop owners on the invoicing app they run their shop on. It plays by itself and holds while you point at it; pull the strip, use the arrows or click a card…

A hiring page's team voices on a dark section. Once a quote is in, the lead card offers a link to that team's open roles through `children`. The controls take …

A speaker lineup with each talk's line in a serif through `quoteClassName`. The schedule under the heading follows the lead through `index` and `onIndexChange`…