---
name: "@keyframeui"
slug: "keyframeui"
description: "Animated React components built with Tailwind CSS, Motion and GSAP, installable with the shadcn CLI."
category: "Animated components"
tags: ["ai", "animation", "audio", "blocks", "cards", "dashboard", "developer-tools", "e-commerce", "editor", "forms", "loaders", "marketing", "media", "navigation", "onboarding", "pro-available"]
framework: "react"
license: null
author: null
website: "https://keyframeui.com"
github: null
registry: "https://keyframeui.com/r/registry.json"
pro: true
pro_url: "https://keyframeui.com/components/pricing-dock"
github_stars: null
component_count: 146
generated_at: "2026-10-27T06:34:08.542Z"
---

# @keyframeui

Animated React components built with Tailwind CSS, Motion and GSAP, installable with the shadcn CLI.

## Links

- Website: https://keyframeui.com
- Registry JSON: https://keyframeui.com/r/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/keyframeui
- This file: https://sh4dcn.netlify.app/md/keyframeui.md
- Pro / pricing: https://keyframeui.com/components/pricing-dock

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://keyframeui.com/r/registry.json
pnpm dlx shadcn@latest add https://keyframeui.com/r/registry.json
bunx shadcn@latest add https://keyframeui.com/r/registry.json
# fetch the raw registry index
curl -s https://keyframeui.com/r/registry.json
```

## Components (146)

| name | type | description | install |
| --- | --- | --- | --- |
| tilt-card | registry:ui | A card that leans toward the pointer and catches the light with a soft moving glare. | `npx shadcn@latest add https://keyframeui.com/r/tilt-card.json` |
| tilt-card-demo | registry:block | A single card with the default tilt and glare. | `npx shadcn@latest add https://keyframeui.com/r/tilt-card-demo.json` |
| tilt-card-pricing-demo | registry:block | Three plan cards, with the featured plan leaning harder. | `npx shadcn@latest add https://keyframeui.com/r/tilt-card-pricing-demo.json` |
| tilt-card-feature-grid-demo | registry:block | A grid of subtle tiles with a gentler tilt and no glare. | `npx shadcn@latest add https://keyframeui.com/r/tilt-card-feature-grid-demo.json` |
| arc-scroll | registry:ui | Cards that travel along a semicircle as you scroll, entering at the bottom right and leaving at the bottom left. | `npx shadcn@latest add https://keyframeui.com/r/arc-scroll.json` |
| arc-scroll-demo | registry:block | Eight cards on an arc, driven by scrolling inside the box. | `npx shadcn@latest add https://keyframeui.com/r/arc-scroll-demo.json` |
| arc-scroll-case-studies-demo | registry:block | A portfolio hero: project cards on the arc, with a pinned headline and a caption for the project at the top. | `npx shadcn@latest add https://keyframeui.com/r/arc-scroll-case-studies-demo.json` |
| arc-scroll-timeline-demo | registry:block | A company history with tighter spacing, the current year highlighted and a year rail that follows along. | `npx shadcn@latest add https://keyframeui.com/r/arc-scroll-timeline-demo.json` |
| arc-scroll-testimonials-demo | registry:block | Wide quote cards with tilt turned off so the text stays level, plus page dots. | `npx shadcn@latest add https://keyframeui.com/r/arc-scroll-testimonials-demo.json` |
| pluck-string | registry:ui | A divider that catches on the pointer as it crosses, bends with it, then slips free and twangs back on a bouncy spring. | `npx shadcn@latest add https://keyframeui.com/r/pluck-string.json` |
| pluck-string-demo | registry:block | A divider between two blocks of text, with the default pull and spring. | `npx shadcn@latest add https://keyframeui.com/r/pluck-string-demo.json` |
| pluck-string-strum-demo | registry:block | Six strings tuned like a guitar: thicker strings are softer and ring longer. Sweep down across all of them. | `npx shadcn@latest add https://keyframeui.com/r/pluck-string-strum-demo.json` |
| pluck-string-changelog-demo | registry:block | Faded strings between release notes, with a softer highlight. | `npx shadcn@latest add https://keyframeui.com/r/pluck-string-changelog-demo.json` |
| zoom-lightbox | registry:ui | 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. | `npx shadcn@latest add https://keyframeui.com/r/zoom-lightbox.json` |
| zoom-lightbox-demo | registry:block | 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. | `npx shadcn@latest add https://keyframeui.com/r/zoom-lightbox-demo.json` |
| zoom-lightbox-products-demo | registry:block | A storefront grid with portrait tiles and rounder corners. Captions carry the name, colorway and price. | `npx shadcn@latest add https://keyframeui.com/r/zoom-lightbox-products-demo.json` |
| zoom-lightbox-case-study-demo | registry:block | 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. | `npx shadcn@latest add https://keyframeui.com/r/zoom-lightbox-case-study-demo.json` |
| morph-search | registry:ui | 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. | `npx shadcn@latest add https://keyframeui.com/r/morph-search.json` |
| morph-search-demo | registry:block | A search button in a site header. It grows into a field with popular pages underneath; pick one to go there. | `npx shadcn@latest add https://keyframeui.com/r/morph-search-demo.json` |
| morph-search-command-demo | registry:block | An app's command menu. The trigger travels to the middle of the screen, with grouped commands and their shortcuts. Opens with ⌘K. | `npx shadcn@latest add https://keyframeui.com/r/morph-search-command-demo.json` |
| morph-search-docs-demo | registry:block | A docs header with a fake search field that becomes the real one. Press / to open it from anywhere. | `npx shadcn@latest add https://keyframeui.com/r/morph-search-docs-demo.json` |
| spotlight-tour | registry:ui | 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… | `npx shadcn@latest add https://keyframeui.com/r/spotlight-tour.json` |
| spotlight-tour-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/spotlight-tour-demo.json` |
| spotlight-tour-whats-new-demo | registry:block | 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. | `npx shadcn@latest add https://keyframeui.com/r/spotlight-tour-whats-new-demo.json` |
| spotlight-tour-form-demo | registry:block | A sign-up form that explains each field in turn. You can type into each field while it's highlighted. | `npx shadcn@latest add https://keyframeui.com/r/spotlight-tour-form-demo.json` |
| expand-card | registry:ui | 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… | `npx shadcn@latest add https://keyframeui.com/r/expand-card.json` |
| expand-card-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/expand-card-demo.json` |
| expand-card-changelog-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/expand-card-changelog-demo.json` |
| expand-card-shop-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/expand-card-shop-demo.json` |
| counter-curtain | registry:ui | 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… | `npx shadcn@latest add https://keyframeui.com/r/counter-curtain.json` |
| counter-curtain-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/counter-curtain-demo.json` |
| counter-curtain-launch-demo | registry:block | 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 … | `npx shadcn@latest add https://keyframeui.com/r/counter-curtain-launch-demo.json` |
| counter-curtain-editorial-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/counter-curtain-editorial-demo.json` |
| expanding-hero | registry:ui | 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. | `npx shadcn@latest add https://keyframeui.com/r/expanding-hero.json` |
| expanding-hero-demo | registry:block | A motion studio's showreel opens out of the headline. Once it fills the box, a button plays the film full screen. | `npx shadcn@latest add https://keyframeui.com/r/expanding-hero-demo.json` |
| expanding-hero-product-demo | registry:block | 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. | `npx shadcn@latest add https://keyframeui.com/r/expanding-hero-product-demo.json` |
| expanding-hero-event-demo | registry:block | 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. | `npx shadcn@latest add https://keyframeui.com/r/expanding-hero-event-demo.json` |
| intro-loader | registry:ui | 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… | `npx shadcn@latest add https://keyframeui.com/r/intro-loader.json` |
| intro-loader-demo | registry:block | 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 … | `npx shadcn@latest add https://keyframeui.com/r/intro-loader-demo.json` |
| intro-loader-lookbook-demo | registry:block | 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. | `npx shadcn@latest add https://keyframeui.com/r/intro-loader-lookbook-demo.json` |
| intro-loader-wordmark-demo | registry:block | 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. | `npx shadcn@latest add https://keyframeui.com/r/intro-loader-wordmark-demo.json` |
| exploded-ui | registry:ui | 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… | `npx shadcn@latest add https://keyframeui.com/r/exploded-ui.json` |
| exploded-ui-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/exploded-ui-demo.json` |
| exploded-ui-architecture-demo | registry:block | 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 … | `npx shadcn@latest add https://keyframeui.com/r/exploded-ui-architecture-demo.json` |
| exploded-ui-design-system-demo | registry:block | 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. | `npx shadcn@latest add https://keyframeui.com/r/exploded-ui-design-system-demo.json` |
| odometer | registry:ui | 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. | `npx shadcn@latest add https://keyframeui.com/r/odometer.json` |
| odometer-demo | registry:block | 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. … | `npx shadcn@latest add https://keyframeui.com/r/odometer-demo.json` |
| odometer-pricing-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/odometer-pricing-demo.json` |
| odometer-dashboard-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/odometer-dashboard-demo.json` |
| odometer-grouping-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/odometer-grouping-demo.json` |
| odometer-stats-demo | registry:block | A band of headline numbers that roll up from 0 the first time they scroll into view, one after another. | `npx shadcn@latest add https://keyframeui.com/r/odometer-stats-demo.json` |
| hover-preview | registry:ui | 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… | `npx shadcn@latest add https://keyframeui.com/r/hover-preview.json` |
| hover-preview-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/hover-preview-demo.json` |
| hover-preview-team-demo | registry:block | Names and roles, with a portrait on hover. The frame is taller and rounder, and leans a little less. | `npx shadcn@latest add https://keyframeui.com/r/hover-preview-team-demo.json` |
| hover-preview-journal-demo | registry:block | An archive of essays with dates and reading times. Each title shows its cover image in a wide 3:2 frame. | `npx shadcn@latest add https://keyframeui.com/r/hover-preview-journal-demo.json` |
| playhead-reel | registry:ui | 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… | `npx shadcn@latest add https://keyframeui.com/r/playhead-reel.json` |
| playhead-reel-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/playhead-reel-demo.json` |
| playhead-reel-changelog-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/playhead-reel-changelog-demo.json` |
| playhead-reel-journal-demo | registry:block | 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. | `npx shadcn@latest add https://keyframeui.com/r/playhead-reel-journal-demo.json` |
| sync-grid | registry:ui | 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… | `npx shadcn@latest add https://keyframeui.com/r/sync-grid.json` |
| sync-grid-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/sync-grid-demo.json` |
| sync-grid-models-demo | registry:block | 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 … | `npx shadcn@latest add https://keyframeui.com/r/sync-grid-models-demo.json` |
| sync-grid-render-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/sync-grid-render-demo.json` |
| sync-grid-redesign-demo | registry:block | 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 … | `npx shadcn@latest add https://keyframeui.com/r/sync-grid-redesign-demo.json` |
| thought-trail | registry:ui | 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 … | `npx shadcn@latest add https://keyframeui.com/r/thought-trail.json` |
| thought-trail-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/thought-trail-demo.json` |
| thought-trail-chat-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/thought-trail-chat-demo.json` |
| thought-trail-deploy-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/thought-trail-deploy-demo.json` |
| thought-trail-research-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/thought-trail-research-demo.json` |
| slice-gallery | registry:ui | 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… | `npx shadcn@latest add https://keyframeui.com/r/slice-gallery.json` |
| slice-gallery-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/slice-gallery-demo.json` |
| slice-gallery-team-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/slice-gallery-team-demo.json` |
| slice-gallery-hero-demo | registry:block | 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 … | `npx shadcn@latest add https://keyframeui.com/r/slice-gallery-hero-demo.json` |
| stretch-index | registry:ui | 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… | `npx shadcn@latest add https://keyframeui.com/r/stretch-index.json` |
| stretch-index-demo | registry:block | 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 … | `npx shadcn@latest add https://keyframeui.com/r/stretch-index-demo.json` |
| stretch-index-careers-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/stretch-index-careers-demo.json` |
| stretch-index-episodes-demo | registry:block | A podcast's latest episodes on a dark panel, with square covers through `imageAspect={1}` and episode numbers through `number`. With `collapseOnLeave`, the lis… | `npx shadcn@latest add https://keyframeui.com/r/stretch-index-episodes-demo.json` |
| redline | registry:ui | 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 … | `npx shadcn@latest add https://keyframeui.com/r/redline.json` |
| redline-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/redline-demo.json` |
| redline-tokens-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/redline-tokens-demo.json` |
| redline-handoff-demo | registry:block | 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 … | `npx shadcn@latest add https://keyframeui.com/r/redline-handoff-demo.json` |
| autopilot | registry:ui | 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… | `npx shadcn@latest add https://keyframeui.com/r/autopilot.json` |
| autopilot-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/autopilot-demo.json` |
| autopilot-multiplayer-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/autopilot-multiplayer-demo.json` |
| autopilot-onboarding-demo | registry:block | 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, … | `npx shadcn@latest add https://keyframeui.com/r/autopilot-onboarding-demo.json` |
| blueprint | registry:ui | 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 … | `npx shadcn@latest add https://keyframeui.com/r/blueprint.json` |
| blueprint-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/blueprint-demo.json` |
| blueprint-process-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/blueprint-process-demo.json` |
| blueprint-dashboard-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/blueprint-dashboard-demo.json` |
| sentence-form | registry:ui | 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… | `npx shadcn@latest add https://keyframeui.com/r/sentence-form.json` |
| sentence-form-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/sentence-form-demo.json` |
| sentence-form-agent-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/sentence-form-agent-demo.json` |
| sentence-form-rsvp-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/sentence-form-rsvp-demo.json` |
| release-pill | registry:ui | 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… | `npx shadcn@latest add https://keyframeui.com/r/release-pill.json` |
| release-pill-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/release-pill-demo.json` |
| release-pill-launch-demo | registry:block | 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. | `npx shadcn@latest add https://keyframeui.com/r/release-pill-launch-demo.json` |
| release-pill-devtool-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/release-pill-devtool-demo.json` |
| sticky-deck | registry:ui | 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 … | `npx shadcn@latest add https://keyframeui.com/r/sticky-deck.json` |
| sticky-deck-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/sticky-deck-demo.json` |
| sticky-deck-case-studies-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/sticky-deck-case-studies-demo.json` |
| sticky-deck-pricing-demo | registry:block | 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 … | `npx shadcn@latest add https://keyframeui.com/r/sticky-deck-pricing-demo.json` |
| paint-reveal | registry:ui | Two pictures in one frame. The pointer paints the second one in with a soft brush, and the stroke closes back behind it. | `npx shadcn@latest add https://keyframeui.com/r/paint-reveal.json` |
| paint-reveal-demo | registry:block | 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 … | `npx shadcn@latest add https://keyframeui.com/r/paint-reveal-demo.json` |
| paint-reveal-restore-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/paint-reveal-restore-demo.json` |
| paint-reveal-founder-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/paint-reveal-founder-demo.json` |
| paint-reveal-work-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/paint-reveal-work-demo.json` |
| polyglot | registry:ui | 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 … | `npx shadcn@latest add https://keyframeui.com/r/polyglot.json` |
| polyglot-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/polyglot-demo.json` |
| polyglot-steps-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/polyglot-steps-demo.json` |
| polyglot-email-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/polyglot-email-demo.json` |
| pricing-dock | registry:ui | 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… | `npx shadcn@latest add https://keyframeui.com/r/pricing-dock.json` |
| pricing-dock-demo | registry:block | 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 … | `npx shadcn@latest add https://keyframeui.com/r/pricing-dock-demo.json` |
| pricing-dock-studio-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/pricing-dock-studio-demo.json` |
| pricing-dock-compare-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/pricing-dock-compare-demo.json` |
| xray-lens | registry:ui | 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… | `npx shadcn@latest add https://keyframeui.com/r/xray-lens.json` |
| xray-lens-demo | registry:block | 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 … | `npx shadcn@latest add https://keyframeui.com/r/xray-lens-demo.json` |
| xray-lens-blueprint-demo | registry:block | 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 … | `npx shadcn@latest add https://keyframeui.com/r/xray-lens-blueprint-demo.json` |
| xray-lens-trace-demo | registry:block | 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 … | `npx shadcn@latest add https://keyframeui.com/r/xray-lens-trace-demo.json` |
| circuit | registry:ui | 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 … | `npx shadcn@latest add https://keyframeui.com/r/circuit.json` |
| circuit-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/circuit-demo.json` |
| circuit-pipeline-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/circuit-pipeline-demo.json` |
| circuit-hub-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/circuit-hub-demo.json` |
| lodestone | registry:ui | 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… | `npx shadcn@latest add https://keyframeui.com/r/lodestone.json` |
| lodestone-demo | registry:block | 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, … | `npx shadcn@latest add https://keyframeui.com/r/lodestone-demo.json` |
| lodestone-studio-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/lodestone-studio-demo.json` |
| lodestone-paths-demo | registry:block | 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 … | `npx shadcn@latest add https://keyframeui.com/r/lodestone-paths-demo.json` |
| imprint | registry:ui | 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… | `npx shadcn@latest add https://keyframeui.com/r/imprint.json` |
| imprint-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/imprint-demo.json` |
| imprint-studio-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/imprint-studio-demo.json` |
| imprint-not-found-demo | registry:block | 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. | `npx shadcn@latest add https://keyframeui.com/r/imprint-not-found-demo.json` |
| domain-switch | registry:ui | 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 … | `npx shadcn@latest add https://keyframeui.com/r/domain-switch.json` |
| domain-switch-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/domain-switch-demo.json` |
| domain-switch-focus-demo | registry:block | A writing app. Focus opens a calm, dark domain in which the sidebar and toolbar, wrapped in `DomainSwitchAside`, dissolve, and the document in `DomainSwitchMai… | `npx shadcn@latest add https://keyframeui.com/r/domain-switch-focus-demo.json` |
| domain-switch-command-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/domain-switch-command-demo.json` |
| zeno-progress | registry:ui | 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… | `npx shadcn@latest add https://keyframeui.com/r/zeno-progress.json` |
| zeno-progress-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/zeno-progress-demo.json` |
| zeno-progress-deploy-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/zeno-progress-deploy-demo.json` |
| zeno-progress-upload-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/zeno-progress-upload-demo.json` |
| noise-gate | registry:ui | 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… | `npx shadcn@latest add https://keyframeui.com/r/noise-gate.json` |
| noise-gate-demo | registry:block | 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 … | `npx shadcn@latest add https://keyframeui.com/r/noise-gate-demo.json` |
| noise-gate-ledger-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/noise-gate-ledger-demo.json` |
| noise-gate-focus-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/noise-gate-focus-demo.json` |
| relay-carousel | registry:ui | 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… | `npx shadcn@latest add https://keyframeui.com/r/relay-carousel.json` |
| relay-carousel-demo | registry:block | 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… | `npx shadcn@latest add https://keyframeui.com/r/relay-carousel-demo.json` |
| relay-carousel-careers-demo | registry:block | 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 … | `npx shadcn@latest add https://keyframeui.com/r/relay-carousel-careers-demo.json` |
| relay-carousel-speakers-demo | registry:block | 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`… | `npx shadcn@latest add https://keyframeui.com/r/relay-carousel-speakers-demo.json` |

## For AI agents

```text
You are adding components from @keyframeui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.netlify.app/md/keyframeui.md) for the component list.
2. Fetch the machine-readable index: https://keyframeui.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.netlify.app/json (library slug: keyframeui).
```