Animated React components built with Tailwind CSS, Motion and GSAP, installable with the shadcn CLI.
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 screen under the playhead. Tab to the playhead and use the arrow keys: Shift jumps a release.
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 the next as you cross into it. Scroll fast and the collage folds flat to let you skim. Hover a photo to lift it off the pile, click one to bring it under the playhead, or drag along the ruler.
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 divider that catches on the pointer as it crosses, bends with it, then slips free and twangs back on a bouncy spring.
Faded strings between release notes, with a softer highlight.
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.
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 one and hold Alt to measure the distance to another.
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 Alt and point at another to see the space between them.
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 44px height and the space around the photo. Point at anything to take over, click to pin, and hold Alt to measure between two parts. With `spec`, text shows its font.
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 move.
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 the sentence you wrote.
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 list. Turn on Fail the next send to see the error path: the form keeps every answer and says so beside the button.
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; switch back and the clause folds away. The dinner choice starts filled in through a default value.
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 list grammar ("a website, a product, and motion") rearranges around it. Tap an outline in the tray to send a pick back down. Try Other for the timeline, send it half-filled to see the check, then send it for real: the form settles into the note you wrote, with an Edit link.
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 details slide up from under it.
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 along through `index` and `onIndexChange`.
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's strip warms to its own color, and the details carry a link.
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 touch screen side by side, drag a finger across them to flip through faces.
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 card riding along beside it.
A sign-up form that explains each field in turn. You can type into each field while it's highlighted.
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. Clicking New moves the tour on.
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 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 from under it, while the rows below glide down.
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 warms to its own color and opens into a photo, and the whole row links to the story.
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. In a narrow frame the team and place move under the title.
A podcast's latest episodes on a dark panel, with square covers through `imageAspect={1}` and episode numbers through `number`. With `collapseOnLeave`, the list folds shut when the pointer leaves it.
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 onto another to compare them side by side.
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 watch the others ripple after, or stack them to flip between easings at the exact same moment.
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 and down to flip between outputs on the same frame.
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 and slide the divider: the old and new layouts sit at the same scroll point.
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 onto Draft and switch to Difference: only the detail the draft lost lights up.
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 fills down to the new step. Click any summary to open it again.
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 for 9s" as soon as the answer starts streaming below it.
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, pinned to the newest line. When the run ends, the trail folds into its header. Click a summary to reopen it.
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 Break a test: the run stops at the tests, which turn red and stay open, and the steps after them never start.
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 folds away. Open Found 9 sources to see them again.
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.
A grid of subtle tiles with a gentler tilt and no glare.
Three plan cards, with the featured plan leaning harder.
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.
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 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.