{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "keyframeui", "homepage": "https://keyframeui.com", "items": [ { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "tilt-card", "type": "registry:ui", "title": "Tilt Card", "description": "A card that leans toward the pointer and catches the light with a soft moving glare.", "author": "KeyframeUI ", "categories": [ "card", "interaction", "3d" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/tilt-card", "dependencies": [ "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/tilt-card.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "tilt-card-demo", "type": "registry:block", "title": "Tilt Card: Default", "description": "A single card with the default tilt and glare.", "author": "KeyframeUI ", "categories": [ "card", "interaction", "3d" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/tilt-card#tilt-card-demo", "registryDependencies": [ "https://keyframeui.com/r/tilt-card.json" ], "files": [ { "path": "components/tilt-card-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "tilt-card-pricing-demo", "type": "registry:block", "title": "Tilt Card: Pricing Cards", "description": "Three plan cards, with the featured plan leaning harder.", "author": "KeyframeUI ", "categories": [ "card", "interaction", "3d" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/tilt-card#tilt-card-pricing-demo", "registryDependencies": [ "https://keyframeui.com/r/tilt-card.json" ], "files": [ { "path": "components/tilt-card-pricing-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "tilt-card-feature-grid-demo", "type": "registry:block", "title": "Tilt Card: Feature Grid", "description": "A grid of subtle tiles with a gentler tilt and no glare.", "author": "KeyframeUI ", "categories": [ "card", "interaction", "3d" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/tilt-card#tilt-card-feature-grid-demo", "registryDependencies": [ "https://keyframeui.com/r/tilt-card.json" ], "files": [ { "path": "components/tilt-card-feature-grid-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "arc-scroll", "type": "registry:ui", "title": "Arc Scroll", "description": "Cards that travel along a semicircle as you scroll, entering at the bottom right and leaving at the bottom left.", "author": "KeyframeUI ", "categories": [ "scroll", "cards", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/arc-scroll", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/arc-scroll.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "arc-scroll-demo", "type": "registry:block", "title": "Arc Scroll: Default", "description": "Eight cards on an arc, driven by scrolling inside the box.", "author": "KeyframeUI ", "categories": [ "scroll", "cards", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/arc-scroll#arc-scroll-demo", "registryDependencies": [ "https://keyframeui.com/r/arc-scroll.json" ], "files": [ { "path": "components/arc-scroll-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "arc-scroll-case-studies-demo", "type": "registry:block", "title": "Arc Scroll: Case Studies", "description": "A portfolio hero: project cards on the arc, with a pinned headline and a caption for the project at the top.", "author": "KeyframeUI ", "categories": [ "scroll", "cards", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/arc-scroll#arc-scroll-case-studies-demo", "registryDependencies": [ "https://keyframeui.com/r/arc-scroll.json" ], "files": [ { "path": "components/arc-scroll-case-studies-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "arc-scroll-timeline-demo", "type": "registry:block", "title": "Arc Scroll: Timeline", "description": "A company history with tighter spacing, the current year highlighted and a year rail that follows along.", "author": "KeyframeUI ", "categories": [ "scroll", "cards", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/arc-scroll#arc-scroll-timeline-demo", "registryDependencies": [ "https://keyframeui.com/r/arc-scroll.json" ], "files": [ { "path": "components/arc-scroll-timeline-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "arc-scroll-testimonials-demo", "type": "registry:block", "title": "Arc Scroll: Testimonials", "description": "Wide quote cards with tilt turned off so the text stays level, plus page dots.", "author": "KeyframeUI ", "categories": [ "scroll", "cards", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/arc-scroll#arc-scroll-testimonials-demo", "registryDependencies": [ "https://keyframeui.com/r/arc-scroll.json" ], "files": [ { "path": "components/arc-scroll-testimonials-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "pluck-string", "type": "registry:ui", "title": "Pluck String", "description": "A divider that catches on the pointer as it crosses, bends with it, then slips free and twangs back on a bouncy spring.", "author": "KeyframeUI ", "categories": [ "divider", "interaction", "svg" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/pluck-string", "dependencies": [ "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/pluck-string.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "pluck-string-demo", "type": "registry:block", "title": "Pluck String: Default", "description": "A divider between two blocks of text, with the default pull and spring.", "author": "KeyframeUI ", "categories": [ "divider", "interaction", "svg" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/pluck-string#pluck-string-demo", "registryDependencies": [ "https://keyframeui.com/r/pluck-string.json" ], "files": [ { "path": "components/pluck-string-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "pluck-string-strum-demo", "type": "registry:block", "title": "Pluck String: Strum", "description": "Six strings tuned like a guitar: thicker strings are softer and ring longer. Sweep down across all of them.", "author": "KeyframeUI ", "categories": [ "divider", "interaction", "svg" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/pluck-string#pluck-string-strum-demo", "registryDependencies": [ "https://keyframeui.com/r/pluck-string.json" ], "files": [ { "path": "components/pluck-string-strum-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "pluck-string-changelog-demo", "type": "registry:block", "title": "Pluck String: Changelog", "description": "Faded strings between release notes, with a softer highlight.", "author": "KeyframeUI ", "categories": [ "divider", "interaction", "svg" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/pluck-string#pluck-string-changelog-demo", "registryDependencies": [ "https://keyframeui.com/r/pluck-string.json" ], "files": [ { "path": "components/pluck-string-changelog-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "zoom-lightbox", "type": "registry:ui", "title": "Zoom Lightbox", "description": "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.", "author": "KeyframeUI ", "categories": [ "gallery", "gesture", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/zoom-lightbox", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/zoom-lightbox.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "zoom-lightbox-demo", "type": "registry:block", "title": "Zoom Lightbox: Gallery", "description": "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.", "author": "KeyframeUI ", "categories": [ "gallery", "gesture", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/zoom-lightbox#zoom-lightbox-demo", "registryDependencies": [ "https://keyframeui.com/r/zoom-lightbox.json" ], "files": [ { "path": "components/zoom-lightbox-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "zoom-lightbox-products-demo", "type": "registry:block", "title": "Zoom Lightbox: Product Images", "description": "A storefront grid with portrait tiles and rounder corners. Captions carry the name, colorway and price.", "author": "KeyframeUI ", "categories": [ "gallery", "gesture", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/zoom-lightbox#zoom-lightbox-products-demo", "registryDependencies": [ "https://keyframeui.com/r/zoom-lightbox.json" ], "files": [ { "path": "components/zoom-lightbox-products-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "zoom-lightbox-case-study-demo", "type": "registry:block", "title": "Zoom Lightbox: Case Study", "description": "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.", "author": "KeyframeUI ", "categories": [ "gallery", "gesture", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/zoom-lightbox#zoom-lightbox-case-study-demo", "registryDependencies": [ "https://keyframeui.com/r/zoom-lightbox.json" ], "files": [ { "path": "components/zoom-lightbox-case-study-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "morph-search", "type": "registry:ui", "title": "Morph Search", "description": "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.", "author": "KeyframeUI ", "categories": [ "search", "command-menu", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/morph-search", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/morph-search.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "morph-search-demo", "type": "registry:block", "title": "Morph Search: Nav Bar", "description": "A search button in a site header. It grows into a field with popular pages underneath; pick one to go there.", "author": "KeyframeUI ", "categories": [ "search", "command-menu", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/morph-search#morph-search-demo", "registryDependencies": [ "https://keyframeui.com/r/morph-search.json" ], "files": [ { "path": "components/morph-search-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "morph-search-command-demo", "type": "registry:block", "title": "Morph Search: Command Menu", "description": "An app's command menu. The trigger travels to the middle of the screen, with grouped commands and their shortcuts. Opens with ⌘K.", "author": "KeyframeUI ", "categories": [ "search", "command-menu", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/morph-search#morph-search-command-demo", "registryDependencies": [ "https://keyframeui.com/r/morph-search.json" ], "files": [ { "path": "components/morph-search-command-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "morph-search-docs-demo", "type": "registry:block", "title": "Morph Search: Docs Search", "description": "A docs header with a fake search field that becomes the real one. Press / to open it from anywhere.", "author": "KeyframeUI ", "categories": [ "search", "command-menu", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/morph-search#morph-search-docs-demo", "registryDependencies": [ "https://keyframeui.com/r/morph-search.json" ], "files": [ { "path": "components/morph-search-docs-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "spotlight-tour", "type": "registry:ui", "title": "Spotlight Tour", "description": "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.", "author": "KeyframeUI ", "categories": [ "onboarding", "overlay", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/spotlight-tour", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/spotlight-tour.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "spotlight-tour-demo", "type": "registry:block", "title": "Spotlight Tour: Product Onboarding", "description": "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.", "author": "KeyframeUI ", "categories": [ "onboarding", "overlay", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/spotlight-tour#spotlight-tour-demo", "registryDependencies": [ "https://keyframeui.com/r/spotlight-tour.json" ], "files": [ { "path": "components/spotlight-tour-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "spotlight-tour-whats-new-demo", "type": "registry:block", "title": "Spotlight Tour: What's New", "description": "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.", "author": "KeyframeUI ", "categories": [ "onboarding", "overlay", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/spotlight-tour#spotlight-tour-whats-new-demo", "registryDependencies": [ "https://keyframeui.com/r/spotlight-tour.json" ], "files": [ { "path": "components/spotlight-tour-whats-new-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "spotlight-tour-form-demo", "type": "registry:block", "title": "Spotlight Tour: Form Help", "description": "A sign-up form that explains each field in turn. You can type into each field while it's highlighted.", "author": "KeyframeUI ", "categories": [ "onboarding", "overlay", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/spotlight-tour#spotlight-tour-form-demo", "registryDependencies": [ "https://keyframeui.com/r/spotlight-tour.json" ], "files": [ { "path": "components/spotlight-tour-form-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "expand-card", "type": "registry:ui", "title": "Expand Card", "description": "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 App Store's Today tab.", "author": "KeyframeUI ", "categories": [ "card", "gesture", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/expand-card", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/expand-card.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "expand-card-demo", "type": "registry:block", "title": "Expand Card: Today Feed", "description": "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, and it lands back in its slot.", "author": "KeyframeUI ", "categories": [ "card", "gesture", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/expand-card#expand-card-demo", "registryDependencies": [ "https://keyframeui.com/r/expand-card.json" ], "files": [ { "path": "components/expand-card-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "expand-card-changelog-demo", "type": "registry:block", "title": "Expand Card: Changelog With Links", "description": "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 grows.", "author": "KeyframeUI ", "categories": [ "card", "gesture", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/expand-card#expand-card-changelog-demo", "registryDependencies": [ "https://keyframeui.com/r/expand-card.json" ], "files": [ { "path": "components/expand-card-changelog-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "expand-card-shop-demo", "type": "registry:block", "title": "Expand Card: Shop", "description": "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 change.", "author": "KeyframeUI ", "categories": [ "card", "gesture", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/expand-card#expand-card-shop-demo", "registryDependencies": [ "https://keyframeui.com/r/expand-card.json" ], "files": [ { "path": "components/expand-card-shop-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "counter-curtain", "type": "registry:ui", "title": "Counter Curtain", "description": "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 underneath, on one clock.", "author": "KeyframeUI ", "categories": [ "preloader", "hero", "text" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/counter-curtain", "dependencies": [ "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/counter-curtain.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "counter-curtain-demo", "type": "registry:block", "title": "Counter Curtain: Studio Portfolio", "description": "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 it again.", "author": "KeyframeUI ", "categories": [ "preloader", "hero", "text" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/counter-curtain#counter-curtain-demo", "registryDependencies": [ "https://keyframeui.com/r/counter-curtain.json" ], "files": [ { "path": "components/counter-curtain-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "counter-curtain-launch-demo", "type": "registry:block", "title": "Counter Curtain: Launch Page", "description": "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 clock is already ticking when it's uncovered.", "author": "KeyframeUI ", "categories": [ "preloader", "hero", "text" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/counter-curtain#counter-curtain-launch-demo", "registryDependencies": [ "https://keyframeui.com/r/counter-curtain.json" ], "files": [ { "path": "components/counter-curtain-launch-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "counter-curtain-editorial-demo", "type": "registry:block", "title": "Counter Curtain: Editorial", "description": "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 first frame.", "author": "KeyframeUI ", "categories": [ "preloader", "hero", "text" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/counter-curtain#counter-curtain-editorial-demo", "registryDependencies": [ "https://keyframeui.com/r/counter-curtain.json" ], "files": [ { "path": "components/counter-curtain-editorial-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "expanding-hero", "type": "registry:ui", "title": "Expanding Hero", "description": "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.", "author": "KeyframeUI ", "categories": [ "hero", "scroll", "video" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/expanding-hero", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/expanding-hero.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "expanding-hero-demo", "type": "registry:block", "title": "Expanding Hero: Studio Reel", "description": "A motion studio's showreel opens out of the headline. Once it fills the box, a button plays the film full screen.", "author": "KeyframeUI ", "categories": [ "hero", "scroll", "video" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/expanding-hero#expanding-hero-demo", "registryDependencies": [ "https://keyframeui.com/r/expanding-hero.json" ], "files": [ { "path": "components/expanding-hero-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "expanding-hero-product-demo", "type": "registry:block", "title": "Expanding Hero: Product Launch", "description": "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.", "author": "KeyframeUI ", "categories": [ "hero", "scroll", "video" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/expanding-hero#expanding-hero-product-demo", "registryDependencies": [ "https://keyframeui.com/r/expanding-hero.json" ], "files": [ { "path": "components/expanding-hero-product-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "expanding-hero-event-demo", "type": "registry:block", "title": "Expanding Hero: Event", "description": "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.", "author": "KeyframeUI ", "categories": [ "hero", "scroll", "video" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/expanding-hero#expanding-hero-event-demo", "registryDependencies": [ "https://keyframeui.com/r/expanding-hero.json" ], "files": [ { "path": "components/expanding-hero-event-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "intro-loader", "type": "registry:ui", "title": "Intro Loader", "description": "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 the page. It doesn't fade out: its last frame is the page's first.", "author": "KeyframeUI ", "categories": [ "preloader", "hero", "image" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/intro-loader", "dependencies": [ "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/intro-loader.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "intro-loader-demo", "type": "registry:block", "title": "Intro Loader: Studio", "description": "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 address bar to play it again, or click to skip.", "author": "KeyframeUI ", "categories": [ "preloader", "hero", "image" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/intro-loader#intro-loader-demo", "registryDependencies": [ "https://keyframeui.com/r/intro-loader.json" ], "files": [ { "path": "components/intro-loader-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "intro-loader-lookbook-demo", "type": "registry:block", "title": "Intro Loader: Lookbook", "description": "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.", "author": "KeyframeUI ", "categories": [ "preloader", "hero", "image" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/intro-loader#intro-loader-lookbook-demo", "registryDependencies": [ "https://keyframeui.com/r/intro-loader.json" ], "files": [ { "path": "components/intro-loader-lookbook-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "intro-loader-wordmark-demo", "type": "registry:block", "title": "Intro Loader: Wordmark", "description": "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.", "author": "KeyframeUI ", "categories": [ "preloader", "hero", "image" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/intro-loader#intro-loader-wordmark-demo", "registryDependencies": [ "https://keyframeui.com/r/intro-loader.json" ], "files": [ { "path": "components/intro-loader-wordmark-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "exploded-ui", "type": "registry:ui", "title": "Exploded UI", "description": "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 sharp and follows your theme.", "author": "KeyframeUI ", "categories": [ "scroll", "3d", "showcase" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/exploded-ui", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/exploded-ui.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "exploded-ui-demo", "type": "registry:block", "title": "Exploded UI: Dashboard", "description": "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 started as. Hover a layer once it's open, or click a label to jump to it.", "author": "KeyframeUI ", "categories": [ "scroll", "3d", "showcase" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/exploded-ui#exploded-ui-demo", "registryDependencies": [ "https://keyframeui.com/r/exploded-ui.json" ], "files": [ { "path": "components/exploded-ui-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "exploded-ui-architecture-demo", "type": "registry:block", "title": "Exploded UI: Architecture", "description": "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 strip that stays in view.", "author": "KeyframeUI ", "categories": [ "scroll", "3d", "showcase" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/exploded-ui#exploded-ui-architecture-demo", "registryDependencies": [ "https://keyframeui.com/r/exploded-ui.json" ], "files": [ { "path": "components/exploded-ui-architecture-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "exploded-ui-design-system-demo", "type": "registry:block", "title": "Exploded UI: Design System", "description": "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.", "author": "KeyframeUI ", "categories": [ "scroll", "3d", "showcase" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/exploded-ui#exploded-ui-design-system-demo", "registryDependencies": [ "https://keyframeui.com/r/exploded-ui.json" ], "files": [ { "path": "components/exploded-ui-design-system-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "odometer", "type": "registry:ui", "title": "Odometer", "description": "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.", "author": "KeyframeUI ", "categories": [ "number", "data", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/odometer", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/odometer.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "odometer-demo", "type": "registry:block", "title": "Odometer: Default", "description": "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. Click fast: they redirect mid-roll.", "author": "KeyframeUI ", "categories": [ "number", "data", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/odometer#odometer-demo", "registryDependencies": [ "https://keyframeui.com/r/odometer.json" ], "files": [ { "path": "components/odometer-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "odometer-pricing-demo", "type": "registry:block", "title": "Odometer: Pricing", "description": "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 moves.", "author": "KeyframeUI ", "categories": [ "number", "data", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/odometer#odometer-pricing-demo", "registryDependencies": [ "https://keyframeui.com/r/odometer.json" ], "files": [ { "path": "components/odometer-pricing-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "odometer-dashboard-demo", "type": "registry:block", "title": "Odometer: Dashboard KPIs", "description": "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 the cards are on screen, and the delta chips flip color and arrow with their sign.", "author": "KeyframeUI ", "categories": [ "number", "data", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/odometer#odometer-dashboard-demo", "registryDependencies": [ "https://keyframeui.com/r/odometer.json" ], "files": [ { "path": "components/odometer-dashboard-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "odometer-grouping-demo", "type": "registry:block", "title": "Odometer: Indian Grouping", "description": "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 commas roll to their new places while every digit stays put.", "author": "KeyframeUI ", "categories": [ "number", "data", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/odometer#odometer-grouping-demo", "registryDependencies": [ "https://keyframeui.com/r/odometer.json" ], "files": [ { "path": "components/odometer-grouping-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "odometer-stats-demo", "type": "registry:block", "title": "Odometer: Landing Stats", "description": "A band of headline numbers that roll up from 0 the first time they scroll into view, one after another.", "author": "KeyframeUI ", "categories": [ "number", "data", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/odometer#odometer-stats-demo", "registryDependencies": [ "https://keyframeui.com/r/odometer.json" ], "files": [ { "path": "components/odometer-stats-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "hover-preview", "type": "registry:ui", "title": "Hover Preview", "description": "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 you travel, like flipping through prints.", "author": "KeyframeUI ", "categories": [ "list", "image", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/hover-preview", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/hover-preview.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "hover-preview-demo", "type": "registry:block", "title": "Hover Preview: Default", "description": "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 it comes from the bottom. Sweep fast to flip through them. Tab through the rows to see each photo without a mouse.", "author": "KeyframeUI ", "categories": [ "list", "image", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/hover-preview#hover-preview-demo", "registryDependencies": [ "https://keyframeui.com/r/hover-preview.json" ], "files": [ { "path": "components/hover-preview-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "hover-preview-team-demo", "type": "registry:block", "title": "Hover Preview: Team", "description": "Names and roles, with a portrait on hover. The frame is taller and rounder, and leans a little less.", "author": "KeyframeUI ", "categories": [ "list", "image", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/hover-preview#hover-preview-team-demo", "registryDependencies": [ "https://keyframeui.com/r/hover-preview.json" ], "files": [ { "path": "components/hover-preview-team-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "hover-preview-journal-demo", "type": "registry:block", "title": "Hover Preview: Journal", "description": "An archive of essays with dates and reading times. Each title shows its cover image in a wide 3:2 frame.", "author": "KeyframeUI ", "categories": [ "list", "image", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/hover-preview#hover-preview-journal-demo", "registryDependencies": [ "https://keyframeui.com/r/hover-preview.json" ], "files": [ { "path": "components/hover-preview-journal-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "playhead-reel", "type": "registry:ui", "title": "Playhead Reel", "description": "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 below is a scrubber you can drag.", "author": "KeyframeUI ", "categories": [ "gallery", "scroll", "timeline" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/playhead-reel", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/playhead-reel.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "playhead-reel-demo", "type": "registry:block", "title": "Playhead Reel: Default", "description": "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.", "author": "KeyframeUI ", "categories": [ "gallery", "scroll", "timeline" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/playhead-reel#playhead-reel-demo", "registryDependencies": [ "https://keyframeui.com/r/playhead-reel.json" ], "files": [ { "path": "components/playhead-reel-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "playhead-reel-changelog-demo", "type": "registry:block", "title": "Playhead Reel: Changelog", "description": "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.", "author": "KeyframeUI ", "categories": [ "gallery", "scroll", "timeline" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/playhead-reel#playhead-reel-changelog-demo", "registryDependencies": [ "https://keyframeui.com/r/playhead-reel.json" ], "files": [ { "path": "components/playhead-reel-changelog-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "playhead-reel-journal-demo", "type": "registry:block", "title": "Playhead Reel: Travel Journal", "description": "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.", "author": "KeyframeUI ", "categories": [ "gallery", "scroll", "timeline" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/playhead-reel#playhead-reel-journal-demo", "registryDependencies": [ "https://keyframeui.com/r/playhead-reel.json" ], "files": [ { "path": "components/playhead-reel-journal-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sync-grid", "type": "registry:ui", "title": "Sync Grid", "description": "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.", "author": "KeyframeUI ", "categories": [ "video", "comparison", "scrubbing", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/sync-grid", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/sync-grid.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sync-grid-demo", "type": "registry:block", "title": "Sync Grid: Easing", "description": "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.", "author": "KeyframeUI ", "categories": [ "video", "comparison", "scrubbing", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/sync-grid#sync-grid-demo", "registryDependencies": [ "https://keyframeui.com/r/sync-grid.json" ], "files": [ { "path": "components/sync-grid-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sync-grid-models-demo", "type": "registry:block", "title": "Sync Grid: Model Output", "description": "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.", "author": "KeyframeUI ", "categories": [ "video", "comparison", "scrubbing", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/sync-grid#sync-grid-models-demo", "registryDependencies": [ "https://keyframeui.com/r/sync-grid.json" ], "files": [ { "path": "components/sync-grid-models-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sync-grid-render-demo", "type": "registry:block", "title": "Sync Grid: Render Quality", "description": "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.", "author": "KeyframeUI ", "categories": [ "video", "comparison", "scrubbing", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/sync-grid#sync-grid-render-demo", "registryDependencies": [ "https://keyframeui.com/r/sync-grid.json" ], "files": [ { "path": "components/sync-grid-render-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sync-grid-redesign-demo", "type": "registry:block", "title": "Sync Grid: Redesign", "description": "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.", "author": "KeyframeUI ", "categories": [ "video", "comparison", "scrubbing", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/sync-grid#sync-grid-redesign-demo", "registryDependencies": [ "https://keyframeui.com/r/sync-grid.json" ], "files": [ { "path": "components/sync-grid-redesign-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "thought-trail", "type": "registry:ui", "title": "Thought Trail", "description": "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.", "author": "KeyframeUI ", "categories": [ "ai", "status", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/thought-trail", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/thought-trail.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "thought-trail-demo", "type": "registry:block", "title": "Thought Trail: Default", "description": "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.", "author": "KeyframeUI ", "categories": [ "ai", "status", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/thought-trail#thought-trail-demo", "registryDependencies": [ "https://keyframeui.com/r/thought-trail.json" ], "files": [ { "path": "components/thought-trail-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "thought-trail-chat-demo", "type": "registry:block", "title": "Thought Trail: Chat Reasoning", "description": "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.", "author": "KeyframeUI ", "categories": [ "ai", "status", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/thought-trail#thought-trail-chat-demo", "registryDependencies": [ "https://keyframeui.com/r/thought-trail.json" ], "files": [ { "path": "components/thought-trail-chat-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "thought-trail-deploy-demo", "type": "registry:block", "title": "Thought Trail: Deploy Log", "description": "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.", "author": "KeyframeUI ", "categories": [ "ai", "status", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/thought-trail#thought-trail-deploy-demo", "registryDependencies": [ "https://keyframeui.com/r/thought-trail.json" ], "files": [ { "path": "components/thought-trail-deploy-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "thought-trail-research-demo", "type": "registry:block", "title": "Thought Trail: Research Agent", "description": "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.", "author": "KeyframeUI ", "categories": [ "ai", "status", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/thought-trail#thought-trail-research-demo", "registryDependencies": [ "https://keyframeui.com/r/thought-trail.json" ], "files": [ { "path": "components/thought-trail-research-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "slice-gallery", "type": "registry:ui", "title": "Slice Gallery", "description": "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.", "author": "KeyframeUI ", "categories": [ "gallery", "hover", "layout" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/slice-gallery", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/slice-gallery.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "slice-gallery-demo", "type": "registry:block", "title": "Slice Gallery: Project Covers", "description": "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.", "author": "KeyframeUI ", "categories": [ "gallery", "hover", "layout" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/slice-gallery#slice-gallery-demo", "registryDependencies": [ "https://keyframeui.com/r/slice-gallery.json" ], "files": [ { "path": "components/slice-gallery-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "slice-gallery-team-demo", "type": "registry:block", "title": "Slice Gallery: Team Portraits", "description": "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.", "author": "KeyframeUI ", "categories": [ "gallery", "hover", "layout" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/slice-gallery#slice-gallery-team-demo", "registryDependencies": [ "https://keyframeui.com/r/slice-gallery.json" ], "files": [ { "path": "components/slice-gallery-team-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "slice-gallery-hero-demo", "type": "registry:block", "title": "Slice Gallery: Hero", "description": "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`.", "author": "KeyframeUI ", "categories": [ "gallery", "hover", "layout" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/slice-gallery#slice-gallery-hero-demo", "registryDependencies": [ "https://keyframeui.com/r/slice-gallery.json" ], "files": [ { "path": "components/slice-gallery-hero-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "stretch-index", "type": "registry:ui", "title": "Stretch Index", "description": "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.", "author": "KeyframeUI ", "categories": [ "list", "hover", "layout" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/stretch-index", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/stretch-index.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "stretch-index-demo", "type": "registry:block", "title": "Stretch Index: Customer Stories", "description": "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.", "author": "KeyframeUI ", "categories": [ "list", "hover", "layout" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/stretch-index#stretch-index-demo", "registryDependencies": [ "https://keyframeui.com/r/stretch-index.json" ], "files": [ { "path": "components/stretch-index-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "stretch-index-careers-demo", "type": "registry:block", "title": "Stretch Index: Open Roles", "description": "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.", "author": "KeyframeUI ", "categories": [ "list", "hover", "layout" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/stretch-index#stretch-index-careers-demo", "registryDependencies": [ "https://keyframeui.com/r/stretch-index.json" ], "files": [ { "path": "components/stretch-index-careers-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "stretch-index-episodes-demo", "type": "registry:block", "title": "Stretch Index: Podcast Episodes", "description": "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.", "author": "KeyframeUI ", "categories": [ "list", "hover", "layout" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/stretch-index#stretch-index-episodes-demo", "registryDependencies": [ "https://keyframeui.com/r/stretch-index.json" ], "files": [ { "path": "components/stretch-index-episodes-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "redline", "type": "registry:ui", "title": "Redline", "description": "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.", "author": "KeyframeUI ", "categories": [ "inspector", "hover", "design" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/redline", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/redline.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "redline-demo", "type": "registry:block", "title": "Redline: Details", "description": "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.", "author": "KeyframeUI ", "categories": [ "inspector", "hover", "design" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/redline#redline-demo", "registryDependencies": [ "https://keyframeui.com/r/redline.json" ], "files": [ { "path": "components/redline-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "redline-tokens-demo", "type": "registry:block", "title": "Redline: Design System", "description": "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.", "author": "KeyframeUI ", "categories": [ "inspector", "hover", "design" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/redline#redline-tokens-demo", "registryDependencies": [ "https://keyframeui.com/r/redline.json" ], "files": [ { "path": "components/redline-tokens-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "redline-handoff-demo", "type": "registry:block", "title": "Redline: Dev Handoff", "description": "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.", "author": "KeyframeUI ", "categories": [ "inspector", "hover", "design" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/redline#redline-handoff-demo", "registryDependencies": [ "https://keyframeui.com/r/redline.json" ], "files": [ { "path": "components/redline-handoff-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "autopilot", "type": "registry:ui", "title": "Autopilot", "description": "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 the moment a visitor wants to try it.", "author": "KeyframeUI ", "categories": [ "cursor", "interaction", "showcase" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/autopilot", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/autopilot.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "autopilot-demo", "type": "registry:block", "title": "Autopilot: Agent at Work", "description": "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 sends the invite, narrating each step in its label. Move your mouse in or tab into it and it steps aside to the corner set with `park`; leave, and two seconds later it replays the chapter it was in.", "author": "KeyframeUI ", "categories": [ "cursor", "interaction", "showcase" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/autopilot#autopilot-demo", "registryDependencies": [ "https://keyframeui.com/r/autopilot.json" ], "files": [ { "path": "components/autopilot-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "autopilot-multiplayer-demo", "type": "registry:block", "title": "Autopilot: Design Review", "description": "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-autopilot-drop`, while Leo drops a comment pin and asks a question. Then Maya replies and Leo likes it. Move your mouse in and both step aside, and the canvas is yours: drag the frame or leave a comment.", "author": "KeyframeUI ", "categories": [ "cursor", "interaction", "showcase" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/autopilot#autopilot-multiplayer-demo", "registryDependencies": [ "https://keyframeui.com/r/autopilot.json" ], "files": [ { "path": "components/autopilot-multiplayer-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "autopilot-onboarding-demo", "type": "registry:block", "title": "Autopilot: Three Clicks", "description": "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, or pause from the strip. On a phone, tap the app to take over and press Resume to hand it back.", "author": "KeyframeUI ", "categories": [ "cursor", "interaction", "showcase" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/autopilot#autopilot-onboarding-demo", "registryDependencies": [ "https://keyframeui.com/r/autopilot.json" ], "files": [ { "path": "components/autopilot-onboarding-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "blueprint", "type": "registry:ui", "title": "Blueprint", "description": "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 focus, buttons pop up. Scrub back and it comes apart again.", "author": "KeyframeUI ", "categories": [ "layout", "scroll", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/blueprint", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/blueprint.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "blueprint-demo", "type": "registry:block", "title": "Blueprint: Site Builder", "description": "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 new prompt with different copy, colors and photos in the same layout, swapped in through `onLoop`, so the same wireframe turns into a different site. Hover to pause it.", "author": "KeyframeUI ", "categories": [ "layout", "scroll", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/blueprint#blueprint-demo", "registryDependencies": [ "https://keyframeui.com/r/blueprint.json" ], "files": [ { "path": "components/blueprint-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "blueprint-process-demo", "type": "registry:block", "title": "Blueprint: Studio Process", "description": "A case study that goes from an annotated blueprint to the finished design as you scroll, with `play=\"manual\"` following `useScroll`. `data-blueprint-order` groups the build into type, imagery and surfaces, and `onBlockChange` lights up the matching stage in the rail. Scroll back up and it comes apart.", "author": "KeyframeUI ", "categories": [ "layout", "scroll", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/blueprint#blueprint-process-demo", "registryDependencies": [ "https://keyframeui.com/r/blueprint.json" ], "files": [ { "path": "components/blueprint-process-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "blueprint-dashboard-demo", "type": "registry:block", "title": "Blueprint: Generated Dashboard", "description": "An analytics assistant answers with a dashboard card. KPIs count up through `data-blueprint-count`, chart bars grow from even placeholders into their real heights through `--blueprint-progress`, and table rows fill in cell by cell. Drag the scrubber to take it apart and put it back.", "author": "KeyframeUI ", "categories": [ "layout", "scroll", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/blueprint#blueprint-dashboard-demo", "registryDependencies": [ "https://keyframeui.com/r/blueprint.json" ], "files": [ { "path": "components/blueprint-dashboard-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sentence-form", "type": "registry:ui", "title": "Sentence Form", "description": "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.", "author": "KeyframeUI ", "categories": [ "form", "input", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/sentence-form", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/sentence-form.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sentence-form-demo", "type": "registry:block", "title": "Sentence Form: Project Brief", "description": "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.", "author": "KeyframeUI ", "categories": [ "form", "input", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/sentence-form#sentence-form-demo", "registryDependencies": [ "https://keyframeui.com/r/sentence-form.json" ], "files": [ { "path": "components/sentence-form-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sentence-form-agent-demo", "type": "registry:block", "title": "Sentence Form: Demo Request", "description": "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.", "author": "KeyframeUI ", "categories": [ "form", "input", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/sentence-form#sentence-form-agent-demo", "registryDependencies": [ "https://keyframeui.com/r/sentence-form.json" ], "files": [ { "path": "components/sentence-form-agent-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sentence-form-rsvp-demo", "type": "registry:block", "title": "Sentence Form: Event RSVP", "description": "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.", "author": "KeyframeUI ", "categories": [ "form", "input", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/sentence-form#sentence-form-rsvp-demo", "registryDependencies": [ "https://keyframeui.com/r/sentence-form.json" ], "files": [ { "path": "components/sentence-form-rsvp-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "release-pill", "type": "registry:ui", "title": "Release Pill", "description": "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 when you leave.", "author": "KeyframeUI ", "categories": [ "badge", "hover", "changelog" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/release-pill", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/release-pill.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "release-pill-demo", "type": "registry:block", "title": "Release Pill: Hero Badge", "description": "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 peeks at the second row once, and the version rolls from v2.3 to v2.4.", "author": "KeyframeUI ", "categories": [ "badge", "hover", "changelog" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/release-pill#release-pill-demo", "registryDependencies": [ "https://keyframeui.com/r/release-pill.json" ], "files": [ { "path": "components/release-pill-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "release-pill-launch-demo", "type": "registry:block", "title": "Release Pill: Launch Week", "description": "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.", "author": "KeyframeUI ", "categories": [ "badge", "hover", "changelog" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/release-pill#release-pill-launch-demo", "registryDependencies": [ "https://keyframeui.com/r/release-pill.json" ], "files": [ { "path": "components/release-pill-launch-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "release-pill-devtool-demo", "type": "registry:block", "title": "Release Pill: Version Bump", "description": "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 into Copied.", "author": "KeyframeUI ", "categories": [ "badge", "hover", "changelog" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/release-pill#release-pill-devtool-demo", "registryDependencies": [ "https://keyframeui.com/r/release-pill.json" ], "files": [ { "path": "components/release-pill-devtool-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sticky-deck", "type": "registry:ui", "title": "Sticky Deck", "description": "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 the earlier cards' edges peek out above the front one. Click an edge to bring that card back.", "author": "KeyframeUI ", "categories": [ "scroll", "cards", "sticky" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/sticky-deck", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/sticky-deck.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sticky-deck-demo", "type": "registry:block", "title": "Sticky Deck: How It Works", "description": "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 clicking a step scrolls there through `apiRef`. Hover an edge that peeks out above the front card and it lifts; click it to bring that card back.", "author": "KeyframeUI ", "categories": [ "scroll", "cards", "sticky" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/sticky-deck#sticky-deck-demo", "registryDependencies": [ "https://keyframeui.com/r/sticky-deck.json" ], "files": [ { "path": "components/sticky-deck-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sticky-deck-case-studies-demo", "type": "registry:block", "title": "Sticky Deck: Case Studies", "description": "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 `useStickyDeckCard()`, and the counter at the top rolls to the front card's number.", "author": "KeyframeUI ", "categories": [ "scroll", "cards", "sticky" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/sticky-deck#sticky-deck-case-studies-demo", "registryDependencies": [ "https://keyframeui.com/r/sticky-deck.json" ], "files": [ { "path": "components/sticky-deck-case-studies-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sticky-deck-pricing-demo", "type": "registry:block", "title": "Sticky Deck: Pricing", "description": "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 of the deck.", "author": "KeyframeUI ", "categories": [ "scroll", "cards", "sticky" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/sticky-deck#sticky-deck-pricing-demo", "registryDependencies": [ "https://keyframeui.com/r/sticky-deck.json" ], "files": [ { "path": "components/sticky-deck-pricing-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "paint-reveal", "type": "registry:ui", "title": "Paint Reveal", "description": "Two pictures in one frame. The pointer paints the second one in with a soft brush, and the stroke closes back behind it.", "author": "KeyframeUI ", "categories": [ "image", "hover", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/paint-reveal", "dependencies": [ "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/paint-reveal.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "paint-reveal-demo", "type": "registry:block", "title": "Paint Reveal: Studio Hero", "description": "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 a second. On a phone the brush drifts by itself. The nav links stay clickable over the picture.", "author": "KeyframeUI ", "categories": [ "image", "hover", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/paint-reveal#paint-reveal-demo", "registryDependencies": [ "https://keyframeui.com/r/paint-reveal.json" ], "files": [ { "path": "components/paint-reveal-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "paint-reveal-restore-demo", "type": "registry:block", "title": "Paint Reveal: Photo Restore", "description": "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 switch, and \"Faded\" floods it back and starts over.", "author": "KeyframeUI ", "categories": [ "image", "hover", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/paint-reveal#paint-reveal-restore-demo", "registryDependencies": [ "https://keyframeui.com/r/paint-reveal.json" ], "files": [ { "path": "components/paint-reveal-restore-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "paint-reveal-founder-demo", "type": "registry:block", "title": "Paint Reveal: About the Founder", "description": "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 while you read.", "author": "KeyframeUI ", "categories": [ "image", "hover", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/paint-reveal#paint-reveal-founder-demo", "registryDependencies": [ "https://keyframeui.com/r/paint-reveal.json" ], "files": [ { "path": "components/paint-reveal-founder-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "paint-reveal-work-demo", "type": "registry:block", "title": "Paint Reveal: Work Grid", "description": "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 on phones.", "author": "KeyframeUI ", "categories": [ "image", "hover", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/paint-reveal#paint-reveal-work-demo", "registryDependencies": [ "https://keyframeui.com/r/paint-reveal.json" ], "files": [ { "path": "components/paint-reveal-work-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "polyglot", "type": "registry:ui", "title": "Polyglot", "description": "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 streams the response in underneath.", "author": "KeyframeUI ", "categories": [ "code", "developer", "ai" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/polyglot", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/polyglot.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "polyglot-demo", "type": "registry:block", "title": "Polyglot: Chat Quickstart", "description": "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 their new lines. Click the prompt to rewrite it, pick a model, hover the key, then Run: the smaller model answers sooner and streams faster.", "author": "KeyframeUI ", "categories": [ "code", "developer", "ai" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/polyglot#polyglot-demo", "registryDependencies": [ "https://keyframeui.com/r/polyglot.json" ], "files": [ { "path": "components/polyglot-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "polyglot-steps-demo", "type": "registry:block", "title": "Polyglot: Three-Step Quickstart", "description": "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 `pip install nova` into the Go import path. Your choice is remembered.", "author": "KeyframeUI ", "categories": [ "code", "developer", "ai" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/polyglot#polyglot-steps-demo", "registryDependencies": [ "https://keyframeui.com/r/polyglot.json" ], "files": [ { "path": "components/polyglot-steps-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "polyglot-email-demo", "type": "registry:block", "title": "Polyglot: Send an Email", "description": "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 recipient flies in as the request.", "author": "KeyframeUI ", "categories": [ "code", "developer", "ai" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/polyglot#polyglot-email-demo", "registryDependencies": [ "https://keyframeui.com/r/polyglot.json" ], "files": [ { "path": "components/polyglot-email-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "pricing-dock", "type": "registry:ui", "title": "Pricing Dock", "description": "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 the name, the button narrows, the badge flattens into an accent line, and the cards close into one bar. Click a docked name to see its whole card again.", "author": "KeyframeUI ", "categories": [ "pricing", "scroll", "table" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/pricing-dock", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/pricing-dock.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "pricing-dock-demo", "type": "registry:block", "title": "Pricing Dock: AI API Pricing", "description": "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 docked toggle and the docked prices roll; click a docked name to peek at its whole card; hover a column to follow it down.", "author": "KeyframeUI ", "categories": [ "pricing", "scroll", "table" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/pricing-dock#pricing-dock-demo", "registryDependencies": [ "https://keyframeui.com/r/pricing-dock.json" ], "files": [ { "path": "components/pricing-dock-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "pricing-dock-studio-demo", "type": "registry:block", "title": "Pricing Dock: Studio Packages", "description": "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. `formatPrice` writes prices in thousands, the Sprint sets its own `/sprint` period, and Quarterly billing rolls the retainers down.", "author": "KeyframeUI ", "categories": [ "pricing", "scroll", "table" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/pricing-dock#pricing-dock-studio-demo", "registryDependencies": [ "https://keyframeui.com/r/pricing-dock.json" ], "files": [ { "path": "components/pricing-dock-studio-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "pricing-dock-compare-demo", "type": "registry:block", "title": "Pricing Dock: Why Switch", "description": "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 pills pick whose column the table shows, or swipe the table sideways.", "author": "KeyframeUI ", "categories": [ "pricing", "scroll", "table" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/pricing-dock#pricing-dock-compare-demo", "registryDependencies": [ "https://keyframeui.com/r/pricing-dock.json" ], "files": [ { "path": "components/pricing-dock-compare-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "xray-lens", "type": "registry:ui", "title": "Xray Lens", "description": "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 the parts it explains. A switch floods it over the whole card.", "author": "KeyframeUI ", "categories": [ "hover", "interaction", "developer" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/xray-lens", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/xray-lens.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "xray-lens-demo", "type": "registry:block", "title": "Xray Lens: Model Output", "description": "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 in place with `XrayLensText`: the reply tinted by confidence, the customer's message with the extracted entities outlined. The lens is `size=\"36%\"`, the switch sits under the card and flips the whole ticket, and on a phone the lens tours the spots by itself.", "author": "KeyframeUI ", "categories": [ "hover", "interaction", "developer" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/xray-lens#xray-lens-demo", "registryDependencies": [ "https://keyframeui.com/r/xray-lens.json" ], "files": [ { "path": "components/xray-lens-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "xray-lens-blueprint-demo", "type": "registry:block", "title": "Xray Lens: Blueprint", "description": "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 and it lifts. The Design/Blueprint switch sits over the photo.", "author": "KeyframeUI ", "categories": [ "hover", "interaction", "developer" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/xray-lens#xray-lens-blueprint-demo", "registryDependencies": [ "https://keyframeui.com/r/xray-lens.json" ], "files": [ { "path": "components/xray-lens-blueprint-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "xray-lens-trace-demo", "type": "registry:block", "title": "Xray Lens: Request Trace", "description": "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 each word streamed. `autoPlay` tours the spans on desktop too until the pointer takes over, and `rest={false}` keeps the lens closed before the tour starts.", "author": "KeyframeUI ", "categories": [ "hover", "interaction", "developer" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/xray-lens#xray-lens-trace-demo", "registryDependencies": [ "https://keyframeui.com/r/xray-lens.json" ], "files": [ { "path": "components/xray-lens-trace-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "circuit", "type": "registry:ui", "title": "Circuit", "description": "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 in one string, and the traces route themselves: edge to edge side by side, top to bottom when the layout stacks, around anything in the way.", "author": "KeyframeUI ", "categories": [ "diagram", "svg", "interaction", "landing" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/circuit", "dependencies": [ "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/circuit.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "circuit-demo", "type": "registry:block", "title": "Circuit: Agent Orchestrator", "description": "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-circuit`; they light up on `data-circuit-pulse` and the counters tick through `onArrive`. Hover a card to see the path through it. Narrow the frame and the columns become rows: the traces turn to run top to bottom by themselves.", "author": "KeyframeUI ", "categories": [ "diagram", "svg", "interaction", "landing" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/circuit#circuit-demo", "registryDependencies": [ "https://keyframeui.com/r/circuit.json" ], "files": [ { "path": "components/circuit-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "circuit-pipeline-demo", "type": "registry:block", "title": "Circuit: Webhook Pipeline", "description": "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 trace carries its own `color`, and the delivery log fills from `onArrive`.", "author": "KeyframeUI ", "categories": [ "diagram", "svg", "interaction", "landing" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/circuit#circuit-pipeline-demo", "registryDependencies": [ "https://keyframeui.com/r/circuit.json" ], "files": [ { "path": "components/circuit-pipeline-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "circuit-hub-demo", "type": "registry:block", "title": "Circuit: Integrations Hub", "description": "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 own trace, and the tiles lift on hover: the traces follow them.", "author": "KeyframeUI ", "categories": [ "diagram", "svg", "interaction", "landing" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/circuit#circuit-hub-demo", "registryDependencies": [ "https://keyframeui.com/r/circuit.json" ], "files": [ { "path": "components/circuit-hub-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "lodestone", "type": "registry:ui", "title": "Lodestone", "description": "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 toward it, the headline a stone the field flows around, and a success state swings every line to north in one wave.", "author": "KeyframeUI ", "categories": [ "background", "interaction", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/lodestone", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/lodestone.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "lodestone-demo", "type": "registry:block", "title": "Lodestone: Waitlist Hero", "description": "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, and every hairline swings to north with `aligned`; Undo lets the field take them back.", "author": "KeyframeUI ", "categories": [ "background", "interaction", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/lodestone#lodestone-demo", "registryDependencies": [ "https://keyframeui.com/r/lodestone.json" ], "files": [ { "path": "components/lodestone-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "lodestone-studio-demo", "type": "registry:block", "title": "Lodestone: Studio CTA", "description": "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 headline and the small print are both quiet zones.", "author": "KeyframeUI ", "categories": [ "background", "interaction", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/lodestone#lodestone-studio-demo", "registryDependencies": [ "https://keyframeui.com/r/lodestone.json" ], "files": [ { "path": "components/lodestone-studio-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "lodestone-paths-demo", "type": "registry:block", "title": "Lodestone: Two Paths", "description": "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 across in a wave from that button.", "author": "KeyframeUI ", "categories": [ "background", "interaction", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/lodestone#lodestone-paths-demo", "registryDependencies": [ "https://keyframeui.com/r/lodestone.json" ], "files": [ { "path": "components/lodestone-paths-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "imprint", "type": "registry:ui", "title": "Imprint", "description": "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 in front with their side walls showing, and the dent fills back in slowly behind the pointer. Press to push deeper and roll a ring out across the wall.", "author": "KeyframeUI ", "categories": [ "background", "interaction", "canvas", "3d" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/imprint", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/imprint.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "imprint-demo", "type": "registry:block", "title": "Imprint: Product Hero", "description": "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 ring out.", "author": "KeyframeUI ", "categories": [ "background", "interaction", "canvas", "3d" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/imprint#imprint-demo", "registryDependencies": [ "https://keyframeui.com/r/imprint.json" ], "files": [ { "path": "components/imprint-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "imprint-studio-demo", "type": "registry:block", "title": "Imprint: Studio Card", "description": "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 glows orange through `accentClassName`.", "author": "KeyframeUI ", "categories": [ "background", "interaction", "canvas", "3d" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/imprint#imprint-studio-demo", "registryDependencies": [ "https://keyframeui.com/r/imprint.json" ], "files": [ { "path": "components/imprint-studio-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "imprint-not-found-demo", "type": "registry:block", "title": "Imprint: Not Found", "description": "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.", "author": "KeyframeUI ", "categories": [ "background", "interaction", "canvas", "3d" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/imprint#imprint-not-found-demo", "registryDependencies": [ "https://keyframeui.com/r/imprint.json" ], "files": [ { "path": "components/imprint-not-found-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "domain-switch", "type": "registry:ui", "title": "Domain Switch", "description": "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 thin seam of stars where the two worlds meet.", "author": "KeyframeUI ", "categories": [ "toggle", "theme", "transition", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/domain-switch", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/domain-switch.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "domain-switch-demo", "type": "registry:block", "title": "Domain Switch: Dark Mode", "description": "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 back in.", "author": "KeyframeUI ", "categories": [ "toggle", "theme", "transition", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/domain-switch#domain-switch-demo", "registryDependencies": [ "https://keyframeui.com/r/domain-switch.json" ], "files": [ { "path": "components/domain-switch-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "domain-switch-focus-demo", "type": "registry:block", "title": "Domain Switch: Focus Mode", "description": "A writing app. Focus opens a calm, dark domain in which the sidebar and toolbar, wrapped in `DomainSwitchAside`, dissolve, and the document in `DomainSwitchMain` comes forward. One `Editor` renders both worlds. Esc leaves.", "author": "KeyframeUI ", "categories": [ "toggle", "theme", "transition", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/domain-switch#domain-switch-focus-demo", "registryDependencies": [ "https://keyframeui.com/r/domain-switch.json" ], "files": [ { "path": "components/domain-switch-focus-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "domain-switch-command-demo", "type": "registry:block", "title": "Domain Switch: Command Palette", "description": "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 into the icon.", "author": "KeyframeUI ", "categories": [ "toggle", "theme", "transition", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/domain-switch#domain-switch-command-demo", "registryDependencies": [ "https://keyframeui.com/r/domain-switch.json" ], "files": [ { "path": "components/domain-switch-command-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "zeno-progress", "type": "registry:ui", "title": "Zeno Progress", "description": "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 keeps zooming into itself, and the gap snaps shut the moment the real result arrives.", "author": "KeyframeUI ", "categories": [ "progress", "loading", "ai", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/zeno-progress", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/zeno-progress.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "zeno-progress-demo", "type": "registry:block", "title": "Zeno Progress: Image Generation", "description": "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 image arrives; the gap snaps shut and the image resolves in. Generate again for another take.", "author": "KeyframeUI ", "categories": [ "progress", "loading", "ai", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/zeno-progress#zeno-progress-demo", "registryDependencies": [ "https://keyframeui.com/r/zeno-progress.json" ], "files": [ { "path": "components/zeno-progress-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "zeno-progress-deploy-demo", "type": "registry:block", "title": "Zeno Progress: Deploy Log", "description": "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 the log, and the ruler zooms the whole time until the 200 lands.", "author": "KeyframeUI ", "categories": [ "progress", "loading", "ai", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/zeno-progress#zeno-progress-deploy-demo", "registryDependencies": [ "https://keyframeui.com/r/zeno-progress.json" ], "files": [ { "path": "components/zeno-progress-deploy-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "zeno-progress-upload-demo", "type": "registry:block", "title": "Zeno Progress: Upload List", "description": "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 while the others are done.", "author": "KeyframeUI ", "categories": [ "progress", "loading", "ai", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/zeno-progress#zeno-progress-upload-demo", "registryDependencies": [ "https://keyframeui.com/r/zeno-progress.json" ], "files": [ { "path": "components/zeno-progress-upload-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "noise-gate", "type": "registry:ui", "title": "Noise Gate", "description": "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 lights the seam and ticks a counter, or lands as a tidy line in a log.", "author": "KeyframeUI ", "categories": [ "section", "comparison", "counter", "marketing" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/noise-gate", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/noise-gate.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "noise-gate-demo", "type": "registry:block", "title": "Noise Gate: Support Inbox", "description": "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 resolved count. Point at the noise to stop it and read a card.", "author": "KeyframeUI ", "categories": [ "section", "comparison", "counter", "marketing" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/noise-gate#noise-gate-demo", "registryDependencies": [ "https://keyframeui.com/r/noise-gate.json" ], "files": [ { "path": "components/noise-gate-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "noise-gate-ledger-demo", "type": "registry:block", "title": "Noise Gate: Month-End Close", "description": "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 their amounts, newest on top.", "author": "KeyframeUI ", "categories": [ "section", "comparison", "counter", "marketing" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/noise-gate#noise-gate-ledger-demo", "registryDependencies": [ "https://keyframeui.com/r/noise-gate.json" ], "files": [ { "path": "components/noise-gate-ledger-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "noise-gate-focus-demo", "type": "registry:block", "title": "Noise Gate: Focus Section", "description": "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 turns white in dark mode.", "author": "KeyframeUI ", "categories": [ "section", "comparison", "counter", "marketing" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/noise-gate#noise-gate-focus-demo", "registryDependencies": [ "https://keyframeui.com/r/noise-gate.json" ], "files": [ { "path": "components/noise-gate-focus-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "relay-carousel", "type": "registry:ui", "title": "Relay Carousel", "description": "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 the way and grows the next card into its place, then sets the new quote in line by line.", "author": "KeyframeUI ", "categories": [ "carousel", "testimonials", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/relay-carousel", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/relay-carousel.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "relay-carousel-demo", "type": "registry:block", "title": "Relay Carousel: Customer Stories", "description": "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 to pass the lead.", "author": "KeyframeUI ", "categories": [ "carousel", "testimonials", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/relay-carousel#relay-carousel-demo", "registryDependencies": [ "https://keyframeui.com/r/relay-carousel.json" ], "files": [ { "path": "components/relay-carousel-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "relay-carousel-careers-demo", "type": "registry:block", "title": "Relay Carousel: Careers", "description": "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 the section's white text, with no extra setup.", "author": "KeyframeUI ", "categories": [ "carousel", "testimonials", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/relay-carousel#relay-carousel-careers-demo", "registryDependencies": [ "https://keyframeui.com/r/relay-carousel.json" ], "files": [ { "path": "components/relay-carousel-careers-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "relay-carousel-speakers-demo", "type": "registry:block", "title": "Relay Carousel: Conference Speakers", "description": "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`, and picking a time moves the strip the short way round.", "author": "KeyframeUI ", "categories": [ "carousel", "testimonials", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/relay-carousel#relay-carousel-speakers-demo", "registryDependencies": [ "https://keyframeui.com/r/relay-carousel.json" ], "files": [ { "path": "components/relay-carousel-speakers-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "agent-session", "type": "registry:ui", "title": "Agent Session", "description": "A coding agent at work in its terminal, beside the app it's changing. The prompt types itself, each command runs with a live timer and lands its output in one burst, and every line that writes a file shows up in the app a beat later, ringed. Point at a change on either side and its other half lights up.", "author": "KeyframeUI ", "categories": [ "ai", "code", "developer" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/agent-session", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/agent-session.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "agent-session-demo", "type": "registry:block", "title": "Agent Session: Analytics Setup", "description": "An agent adds a signup funnel to a product analytics dashboard. The card arrives with its file, then each bar fills as the tracking call for that step is written.", "author": "KeyframeUI ", "categories": [ "ai", "code", "developer" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/agent-session#agent-session-demo", "registryDependencies": [ "https://keyframeui.com/r/agent-session.json" ], "files": [ { "path": "components/agent-session-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "agent-session-locale-demo", "type": "registry:block", "title": "Agent Session: Localized Checkout", "description": "A checkout translated into German one label at a time, each English label as the `fallback` that its German line replaces. A teal accent through `--agent-session-accent`.", "author": "KeyframeUI ", "categories": [ "ai", "code", "developer" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/agent-session#agent-session-locale-demo", "registryDependencies": [ "https://keyframeui.com/r/agent-session.json" ], "files": [ { "path": "components/agent-session-locale-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "agent-session-cli-demo", "type": "registry:block", "title": "Agent Session: CLI Feature Cards", "description": "Two small terminals with `theme=\"auto\"` and no preview, as feature cards: a hidden key prompt, and a typo that gets a suggestion instead of a write.", "author": "KeyframeUI ", "categories": [ "ai", "code", "developer" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/agent-session#agent-session-cli-demo", "registryDependencies": [ "https://keyframeui.com/r/agent-session.json" ], "files": [ { "path": "components/agent-session-cli-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "glyph-field", "type": "registry:ui", "title": "Glyph Field", "description": "Your mark drawn in type. A word, an SVG path or a photo is printed as a grid of monospace glyphs that run from bare paper through dots to a dense @. It prints left to right the first time it scrolls into view, and the pointer inks the glyphs it passes over in your accent, which then dry back to their resting weight.", "author": "KeyframeUI ", "categories": [ "canvas", "hero", "hover", "text" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/glyph-field", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/glyph-field.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "glyph-field-demo", "type": "registry:block", "title": "Glyph Field: Orbit Hero", "description": "A dev tool's hero with no source set, so the field prints its lit orbit around the headline. Move across it and the glyphs ink violet and dry back.", "author": "KeyframeUI ", "categories": [ "canvas", "hero", "hover", "text" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/glyph-field#glyph-field-demo", "registryDependencies": [ "https://keyframeui.com/r/glyph-field.json" ], "files": [ { "path": "components/glyph-field-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "glyph-field-404-demo", "type": "registry:block", "title": "Glyph Field: Not Found", "description": "A docs site's 404 with the number printed from `text`, soft edges shading off into dots, and a way back to the page that moved.", "author": "KeyframeUI ", "categories": [ "canvas", "hero", "hover", "text" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/glyph-field#glyph-field-404-demo", "registryDependencies": [ "https://keyframeui.com/r/glyph-field.json" ], "files": [ { "path": "components/glyph-field-404-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "glyph-field-portrait-demo", "type": "registry:block", "title": "Glyph Field: Studio Team", "description": "A studio's team cards with each portrait printed from a photo. `tone=\"auto\"` keeps the white backdrops as paper in both color schemes, and the brush inks orange.", "author": "KeyframeUI ", "categories": [ "canvas", "hero", "hover", "text" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/glyph-field#glyph-field-portrait-demo", "registryDependencies": [ "https://keyframeui.com/r/glyph-field.json" ], "files": [ { "path": "components/glyph-field-portrait-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "diff-apply", "type": "registry:ui", "title": "Diff Apply", "description": "A code change that applies itself in place. Removed lines strike through and close up, new lines open in tinted, and the line numbers below roll to their new values. Each change then waits for Keep or Undo, and Undo plays it backwards.", "author": "KeyframeUI ", "categories": [ "code", "developer", "ai" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/diff-apply", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/diff-apply.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "diff-apply-demo", "type": "registry:block", "title": "Diff Apply: Agent Refactor", "description": "An assistant wraps an invoice fetch in a retry with backoff: an import, a doc comment and the new body land one after another. Keep or undo each change, or all of them from the header.", "author": "KeyframeUI ", "categories": [ "code", "developer", "ai" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/diff-apply#diff-apply-demo", "registryDependencies": [ "https://keyframeui.com/r/diff-apply.json" ], "files": [ { "path": "components/diff-apply-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "diff-apply-migration-demo", "type": "registry:block", "title": "Diff Apply: Codemod Upgrade", "description": "A framework upgrade rewrites a config file in four small changes. The box is capped with `maxHeight`, so it scrolls each change into view as it lands.", "author": "KeyframeUI ", "categories": [ "code", "developer", "ai" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/diff-apply#diff-apply-migration-demo", "registryDependencies": [ "https://keyframeui.com/r/diff-apply.json" ], "files": [ { "path": "components/diff-apply-migration-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "diff-apply-copy-demo", "type": "registry:block", "title": "Diff Apply: Release Note Edit", "description": "Not only code: a writing assistant tightens a Markdown release note, with `wrap` on and no line numbers. The reply under it follows `onComplete` and `onReview`.", "author": "KeyframeUI ", "categories": [ "code", "developer", "ai" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/diff-apply#diff-apply-copy-demo", "registryDependencies": [ "https://keyframeui.com/r/diff-apply.json" ], "files": [ { "path": "components/diff-apply-copy-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "handoff-nav", "type": "registry:ui", "title": "Handoff Nav", "description": "A navbar that tightens into a floating pill once the page scrolls, and catches your hero's call to action: as the hero button rides up behind the pill it flies into a slot at the end, and when you scroll back it flies home. On narrow screens the pill grows down into a menu.", "author": "KeyframeUI ", "categories": [ "navigation", "scroll", "interaction" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/handoff-nav", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/handoff-nav.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "handoff-nav-demo", "type": "registry:block", "title": "Handoff Nav: AI Product", "description": "An AI inbox's landing page. Scroll the page: the bar docks into a pill, and \"Get Morrow\" flies up into it as the hero passes under. Scroll back up and it flies home.", "author": "KeyframeUI ", "categories": [ "navigation", "scroll", "interaction" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/handoff-nav#handoff-nav-demo", "registryDependencies": [ "https://keyframeui.com/r/handoff-nav.json" ], "files": [ { "path": "components/handoff-nav-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "handoff-nav-store-demo", "type": "registry:block", "title": "Handoff Nav: Sticky Add to Bag", "description": "A product page where \"Add to bag\" moves into the nav, so it's one click away all the way down to the reviews. Either copy adds to the bag, and the action's count and the button's label update in both places.", "author": "KeyframeUI ", "categories": [ "navigation", "scroll", "interaction" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/handoff-nav#handoff-nav-store-demo", "registryDependencies": [ "https://keyframeui.com/r/handoff-nav.json" ], "files": [ { "path": "components/handoff-nav-store-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "handoff-nav-studio-demo", "type": "registry:block", "title": "Handoff Nav: Studio at Phone Width", "description": "An interiors studio's site in a phone frame. The links fold into a menu that grows out of the pill, and \"Book a call\" shares the pill with it once caught; the hero copy gets wider padding through `data-[placement=hero]:`.", "author": "KeyframeUI ", "categories": [ "navigation", "scroll", "interaction" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/handoff-nav#handoff-nav-studio-demo", "registryDependencies": [ "https://keyframeui.com/r/handoff-nav.json" ], "files": [ { "path": "components/handoff-nav-studio-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "golden-hour", "type": "registry:ui", "title": "Golden Hour", "description": "A painted valley lit for an hour of the day. Every color comes from that hour: the sky, the sun and its glow, the light along each ridge, the road and the stars. Change it and the sun travels there through the hours in between, so noon to night passes golden hour and dusk on the way. It can follow the visitor's own clock, or go down as the page scrolls.", "author": "KeyframeUI ", "categories": [ "background", "hero", "svg" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/golden-hour", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/golden-hour.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "golden-hour-demo", "type": "registry:block", "title": "Golden Hour: Any Hour", "description": "Drag the dial through the day: the sun climbs and sets, the light along the ridges turns from white to gold, and the road's lights come on after dusk. \"Your time\" jumps to your own clock.", "author": "KeyframeUI ", "categories": [ "background", "hero", "svg" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/golden-hour#golden-hour-demo", "registryDependencies": [ "https://keyframeui.com/r/golden-hour.json" ], "files": [ { "path": "components/golden-hour-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "golden-hour-cta-demo", "type": "registry:block", "title": "Golden Hour: Sunset Sign-Up", "description": "A newsletter's closing section. The sun sets as it comes into view, and subscribing brings the night and the moon out.", "author": "KeyframeUI ", "categories": [ "background", "hero", "svg" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/golden-hour#golden-hour-cta-demo", "registryDependencies": [ "https://keyframeui.com/r/golden-hour.json" ], "files": [ { "path": "components/golden-hour-cta-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "golden-hour-studios-demo", "type": "registry:block", "title": "Golden Hour: Studio Clocks", "description": "A design studio's contact card lit for the local time in each city. Switching from Lisbon to Tokyo carries the sun through the hours between.", "author": "KeyframeUI ", "categories": [ "background", "hero", "svg" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/golden-hour#golden-hour-studios-demo", "registryDependencies": [ "https://keyframeui.com/r/golden-hour.json" ], "files": [ { "path": "components/golden-hour-studios-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "footnote", "type": "registry:ui", "title": "Footnote", "description": "An AI answer that shows its work. It reads its sources, dealing a chip for each one, then writes the answer, and as each claim lands its source's number lifts out of the chip and drops in at the end of the sentence. Point at a sentence and its source lights up; point at a source and the sentences it backs light up, and resting on it opens the passage the answer leans on.", "author": "KeyframeUI ", "categories": [ "ai", "text", "hover" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/footnote", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/footnote.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "footnote-demo", "type": "registry:block", "title": "Footnote: Help Center", "description": "A workspace app's help assistant answers a data-residency question from its docs, status page, trust center and changelog. A community thread it read but didn't cite sits last, with a monogram.", "author": "KeyframeUI ", "categories": [ "ai", "text", "hover" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/footnote#footnote-demo", "registryDependencies": [ "https://keyframeui.com/r/footnote.json" ], "files": [ { "path": "components/footnote-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "footnote-glass-demo", "type": "registry:block", "title": "Footnote: Glass Over a Photo", "description": "A trip planner's answer on a frosted card over Lisbon at dusk, in a browser frame: where to stay for two nights on foot, with walking, review, weather and transit sources.", "author": "KeyframeUI ", "categories": [ "ai", "text", "hover" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/footnote#footnote-glass-demo", "registryDependencies": [ "https://keyframeui.com/r/footnote.json" ], "files": [ { "path": "components/footnote-glass-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "footnote-follow-ups-demo", "type": "registry:block", "title": "Footnote: Follow-up Questions", "description": "A company handbook assistant with follow-up questions under the card. Pick one and the answer folds away, the card eases to its new height and the next answer reads and writes itself. Its status line says \"Checked 7 handbook pages\".", "author": "KeyframeUI ", "categories": [ "ai", "text", "hover" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/footnote#footnote-follow-ups-demo", "registryDependencies": [ "https://keyframeui.com/r/footnote.json" ], "files": [ { "path": "components/footnote-follow-ups-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "margin-note", "type": "registry:ui", "title": "Margin Note", "description": "A line chart that reads itself. A reader sweeps across the series and inks it as it goes; wherever something happened it stops, marks the point and writes a note in the margin, level with the point and tied to it by a leader. Hover a note and its stretch of the chart lights up.", "author": "KeyframeUI ", "categories": [ "chart", "data", "ai" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/margin-note", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/margin-note.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "margin-note-demo", "type": "registry:block", "title": "Margin Note: Weekly Signups", "description": "Sixteen weeks of signups for a design tool, read with notes on launch week, a login outage and the free plan going to three seats.", "author": "KeyframeUI ", "categories": [ "chart", "data", "ai" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/margin-note#margin-note-demo", "registryDependencies": [ "https://keyframeui.com/r/margin-note.json" ], "files": [ { "path": "components/margin-note-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "margin-note-latency-demo", "type": "registry:block", "title": "Margin Note: Incident Read", "description": "A day of p95 latency on an API. The reader stops at the morning peak, the deploy that sent it to 842 ms and the rollback that brought it down.", "author": "KeyframeUI ", "categories": [ "chart", "data", "ai" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/margin-note#margin-note-latency-demo", "registryDependencies": [ "https://keyframeui.com/r/margin-note.json" ], "files": [ { "path": "components/margin-note-latency-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "margin-note-revenue-demo", "type": "registry:block", "title": "Margin Note: Year Against Year", "description": "Monthly revenue against last year's, dashed underneath, with notes on annual plans, a team tier and a record December.", "author": "KeyframeUI ", "categories": [ "chart", "data", "ai" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/margin-note#margin-note-revenue-demo", "registryDependencies": [ "https://keyframeui.com/r/margin-note.json" ], "files": [ { "path": "components/margin-note-revenue-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "launch-dock", "type": "registry:ui", "title": "Launch Dock", "description": "A dock of app icons under a window. Pick one and its window grows up out of the icon in 0.3s, over the open one, which dissolves where it is. One label glides over the dock as you point, and with autoplay the dot under the open app fills like a timer before the next one launches.", "author": "KeyframeUI ", "categories": [ "showcase", "testimonials", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/launch-dock", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/launch-dock.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "launch-dock-demo", "type": "registry:block", "title": "Launch Dock: Customer Apps", "description": "Six apps built on one sync platform, each with its own window. Autoplay walks through them until you pick one, and the line under the dock follows the open app.", "author": "KeyframeUI ", "categories": [ "showcase", "testimonials", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/launch-dock#launch-dock-demo", "registryDependencies": [ "https://keyframeui.com/r/launch-dock.json" ], "files": [ { "path": "components/launch-dock-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "launch-dock-quotes-demo", "type": "registry:block", "title": "Launch Dock: Testimonials", "description": "Faces in a round dock. Each quote card grows out of the person who said it, and shrinks back into them when the next one opens.", "author": "KeyframeUI ", "categories": [ "showcase", "testimonials", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/launch-dock#launch-dock-quotes-demo", "registryDependencies": [ "https://keyframeui.com/r/launch-dock.json" ], "files": [ { "path": "components/launch-dock-quotes-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "launch-dock-studio-demo", "type": "registry:block", "title": "Launch Dock: Studio Work", "description": "A design studio's clients as marks in the dock, each launching the site the studio built for them, address bar and all.", "author": "KeyframeUI ", "categories": [ "showcase", "testimonials", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/launch-dock#launch-dock-studio-demo", "registryDependencies": [ "https://keyframeui.com/r/launch-dock.json" ], "files": [ { "path": "components/launch-dock-studio-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "jot", "type": "registry:ui", "title": "Jot", "description": "A handwritten note that draws its own arrow to the thing it's about. It writes itself in when it scrolls into view, keeps the arrow attached as the layout moves, swings it over when you point it somewhere new, and rubs itself out once it has done its job.", "author": "KeyframeUI ", "categories": [ "annotation", "svg", "onboarding" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/jot", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/jot.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "jot-demo", "type": "registry:block", "title": "Jot: Annotated Hero", "description": "A form builder's hero. Two notes write themselves in, one curling its arrow up to the call to action, the other pointing at the live reply count.", "author": "KeyframeUI ", "categories": [ "annotation", "svg", "onboarding" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/jot#jot-demo", "registryDependencies": [ "https://keyframeui.com/r/jot.json" ], "files": [ { "path": "components/jot-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "jot-plans-demo", "type": "registry:block", "title": "Jot: Follow the Pick", "description": "Three plans as radio cards. The note swings its arrow to whichever plan you pick and rewrites itself for it.", "author": "KeyframeUI ", "categories": [ "annotation", "svg", "onboarding" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/jot#jot-plans-demo", "registryDependencies": [ "https://keyframeui.com/r/jot.json" ], "files": [ { "path": "components/jot-plans-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "jot-onboarding-demo", "type": "registry:block", "title": "Jot: Hints That Retire", "description": "A file-sharing card where each hint rubs itself out once you've done what it asks, and the next one writes in.", "author": "KeyframeUI ", "categories": [ "annotation", "svg", "onboarding" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/jot#jot-onboarding-demo", "registryDependencies": [ "https://keyframeui.com/r/jot.json" ], "files": [ { "path": "components/jot-onboarding-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "skyline", "type": "registry:ui", "title": "Skyline", "description": "A printed city along the foot of a section: halftone towers in the distance, ink towers in front with their windows knocked out, a flat sun and stippled trees. The first time it shows, the towers rise out of the ground and their windows switch on one by one. Give it your numbers and each one becomes a tower with a sign on its roof. Hover a tower and it lights up floor by floor. An elevated line can run across the front, with a train you can send from a button.", "author": "KeyframeUI ", "categories": [ "hero", "chart", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/skyline", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/skyline.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "skyline-demo", "type": "registry:block", "title": "Skyline: Hero City", "description": "A flat-hunting app's hero with the city along its foot. \"Check the commute\" sends a train across the line.", "author": "KeyframeUI ", "categories": [ "hero", "chart", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/skyline#skyline-demo", "registryDependencies": [ "https://keyframeui.com/r/skyline.json" ], "files": [ { "path": "components/skyline-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "skyline-stats-demo", "type": "registry:block", "title": "Skyline: City Stats", "description": "Studio hours booked per city as towers, each with its share on a rooftop sign. Switch the year and the towers grow or shrink to it.", "author": "KeyframeUI ", "categories": [ "hero", "chart", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/skyline#skyline-stats-demo", "registryDependencies": [ "https://keyframeui.com/r/skyline.json" ], "files": [ { "path": "components/skyline-stats-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "skyline-lights-demo", "type": "registry:block", "title": "Skyline: Lights On", "description": "A late-night coworking club where every lit window is a member at a desk. Windows switch on and off as people come and go.", "author": "KeyframeUI ", "categories": [ "hero", "chart", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/skyline#skyline-lights-demo", "registryDependencies": [ "https://keyframeui.com/r/skyline.json" ], "files": [ { "path": "components/skyline-lights-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dot-rail", "type": "registry:ui", "title": "Dot Rail", "description": "A strip of LED dots that shows where you are. A run of lit dots jumps under the tab or link you point at, counts up under an autoplaying tab like a timer, sits at how far you've read, or loops while something loads. The dots it leaves glow for a moment and fade, like an LED sign, so a quick move draws a short comet tail.", "author": "KeyframeUI ", "categories": [ "navigation", "progress", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/dot-rail", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/dot-rail.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dot-rail-demo", "type": "registry:block", "title": "Dot Rail: Feature Tabs", "description": "An AI note-taker's four features as tabs that play by themselves. The dots under the current tab count up like a timer, the rail jumps to any tab you point at, and picking one stops the autoplay.", "author": "KeyframeUI ", "categories": [ "navigation", "progress", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/dot-rail#dot-rail-demo", "registryDependencies": [ "https://keyframeui.com/r/dot-rail.json" ], "files": [ { "path": "components/dot-rail-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dot-rail-header-demo", "type": "registry:block", "title": "Dot Rail: Site Header", "description": "A print studio's header. The rail under it runs to whichever link you point at and parks under the current page when you leave.", "author": "KeyframeUI ", "categories": [ "navigation", "progress", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/dot-rail#dot-rail-header-demo", "registryDependencies": [ "https://keyframeui.com/r/dot-rail.json" ], "files": [ { "path": "components/dot-rail-header-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dot-rail-reading-demo", "type": "registry:block", "title": "Dot Rail: Reading Progress", "description": "A long read whose rail sits at how far you've scrolled. Scroll fast and the tail stretches out behind it.", "author": "KeyframeUI ", "categories": [ "navigation", "progress", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/dot-rail#dot-rail-reading-demo", "registryDependencies": [ "https://keyframeui.com/r/dot-rail.json" ], "files": [ { "path": "components/dot-rail-reading-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "throughline", "type": "registry:ui", "title": "Throughline", "description": "Glass tiles that ride dotted lines through your headline. Each tile slides out from under a small station, grows as it travels, turns a little on the way, and dives into the far station, and a tile passing over a colored letter picks up its color through the glass. Rest the pointer on one and its whole line comes to a stop, like a cable car line, while the tile turns upright and shows its label. Lines can run behind the content as well as over it.", "author": "KeyframeUI ", "categories": [ "hero", "interaction", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/throughline", "dependencies": [ "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/throughline.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "throughline-demo", "type": "registry:block", "title": "Throughline: Integrations", "description": "A sync tool's integrations, riding three lines through one giant word. One line runs behind the letters, and the glass turns red where a tile crosses one.", "author": "KeyframeUI ", "categories": [ "hero", "interaction", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/throughline#throughline-demo", "registryDependencies": [ "https://keyframeui.com/r/throughline.json" ], "files": [ { "path": "components/throughline-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "throughline-pipeline-demo", "type": "registry:block", "title": "Throughline: Pipeline", "description": "An AI inbox in the middle of six lines: raw messages ride in and dive under the card, sorted tickets, replies and leads ride out the other side.", "author": "KeyframeUI ", "categories": [ "hero", "interaction", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/throughline#throughline-pipeline-demo", "registryDependencies": [ "https://keyframeui.com/r/throughline.json" ], "files": [ { "path": "components/throughline-pipeline-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "throughline-community-demo", "type": "registry:block", "title": "Throughline: Community", "description": "Members' faces on two arcs around a critique circle's sign-up, at night. Hold one to see who and where.", "author": "KeyframeUI ", "categories": [ "hero", "interaction", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/throughline#throughline-community-demo", "registryDependencies": [ "https://keyframeui.com/r/throughline.json" ], "files": [ { "path": "components/throughline-community-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "echo-reel", "type": "registry:ui", "title": "Echo Reel", "description": "A giant word printed solid, with the words before and after it in the list stacked above and below as pale halftone proofs. Every few seconds the reel turns one row: the proof below rises into the middle while one roller pass moves the ink off the old word and onto the new one. Click a proof or press ↑ ↓ to turn it yourself, so it works as a headline that cycles who it's for or as a picker for plans.", "author": "KeyframeUI ", "categories": [ "text", "hero", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/echo-reel", "dependencies": [ "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/echo-reel.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "echo-reel-demo", "type": "registry:block", "title": "Echo Reel: Audiences", "description": "A video tool's hero that cycles who it's made for. It holds while you point at it and stops once you pick a word.", "author": "KeyframeUI ", "categories": [ "text", "hero", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/echo-reel#echo-reel-demo", "registryDependencies": [ "https://keyframeui.com/r/echo-reel.json" ], "files": [ { "path": "components/echo-reel-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "echo-reel-plans-demo", "type": "registry:block", "title": "Echo Reel: Plan Picker", "description": "The giant word picks a pricing plan: click the proof above or below, or use the arrow keys, and the price card beside it changes.", "author": "KeyframeUI ", "categories": [ "text", "hero", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/echo-reel#echo-reel-plans-demo", "registryDependencies": [ "https://keyframeui.com/r/echo-reel.json" ], "files": [ { "path": "components/echo-reel-plans-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "echo-reel-footer-demo", "type": "registry:block", "title": "Echo Reel: Footer Wordmark", "description": "A studio's footer whose wordmark turns to whichever link you point at or tab to, and back to the name when you leave.", "author": "KeyframeUI ", "categories": [ "text", "hero", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/echo-reel#echo-reel-footer-demo", "registryDependencies": [ "https://keyframeui.com/r/echo-reel.json" ], "files": [ { "path": "components/echo-reel-footer-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "plan-fit", "type": "registry:ui", "title": "Plan Fit", "description": "A pricing grid with a usage slider over it, cut into one stretch per plan. Drag it and every card measures your usage against its allowance: past the limit the overage shows as a hatched stretch and that card's price climbs a pack at a time. The highlight glides to whichever plan is cheapest at that usage, so a smaller plan with overage can keep it until the next one costs less.", "author": "KeyframeUI ", "categories": [ "pricing", "interaction", "data" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/plan-fit", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/plan-fit.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "plan-fit-demo", "type": "registry:block", "title": "Plan Fit: Usage-Based API", "description": "A speech-to-text API billed by audio hours, with yearly billing. Build sells extra hours in packs, so it stays the best fit well past its 100 hours, until Scale costs less.", "author": "KeyframeUI ", "categories": [ "pricing", "interaction", "data" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/plan-fit#plan-fit-demo", "registryDependencies": [ "https://keyframeui.com/r/plan-fit.json" ], "files": [ { "path": "components/plan-fit-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "plan-fit-audience-demo", "type": "registry:block", "title": "Plan Fit: Capped Tiers", "description": "A newsletter tool priced by list size, where each plan stops at its cap and the next one takes over.", "author": "KeyframeUI ", "categories": [ "pricing", "interaction", "data" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/plan-fit#plan-fit-audience-demo", "registryDependencies": [ "https://keyframeui.com/r/plan-fit.json" ], "files": [ { "path": "components/plan-fit-audience-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "plan-fit-signup-demo", "type": "registry:block", "title": "Plan Fit: Signup Step", "description": "The plan step of a signup flow in a narrow column: the cards become a swipe row and the button names the plan that fits.", "author": "KeyframeUI ", "categories": [ "pricing", "interaction", "data" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/plan-fit#plan-fit-signup-demo", "registryDependencies": [ "https://keyframeui.com/r/plan-fit.json" ], "files": [ { "path": "components/plan-fit-signup-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "black-box", "type": "registry:ui", "title": "Black Box", "description": "A glossy black box that shows its work. Each face is one part of your product, and they open in turn: the panel lifts off its socket, light leaks out round it, and a hairline draws out to a label saying what that part did. Point at a face, tap it or tab to it to open it yourself. In dark mode the box turns to glass, a wireframe with a small lit core that turns inside.", "author": "KeyframeUI ", "categories": [ "3d", "hero", "ai", "diagram" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/black-box", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/black-box.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "black-box-demo", "type": "registry:block", "title": "Black Box: Agent Decision", "description": "A support agent's refund, opened up: what it read, how it reasoned and what it did, one face at a time.", "author": "KeyframeUI ", "categories": [ "3d", "hero", "ai", "diagram" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/black-box#black-box-demo", "registryDependencies": [ "https://keyframeui.com/r/black-box.json" ], "files": [ { "path": "components/black-box-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "black-box-stack-demo", "type": "registry:block", "title": "Black Box: Stack", "description": "A backend platform's three parts as a list beside the box. Point at a row and its face opens; leave the list and the box walks it again.", "author": "KeyframeUI ", "categories": [ "3d", "hero", "ai", "diagram" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/black-box#black-box-stack-demo", "registryDependencies": [ "https://keyframeui.com/r/black-box.json" ], "files": [ { "path": "components/black-box-stack-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "black-box-xray-demo", "type": "registry:block", "title": "Black Box: X-ray", "description": "A secrets vault for AI agents, with a switch that turns the sealed box to glass so you can see the core inside.", "author": "KeyframeUI ", "categories": [ "3d", "hero", "ai", "diagram" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/black-box#black-box-xray-demo", "registryDependencies": [ "https://keyframeui.com/r/black-box.json" ], "files": [ { "path": "components/black-box-xray-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "standings", "type": "registry:ui", "title": "Standings", "description": "A ranking that races, like a timing tower. The place numbers stay put and the rows slide past them: when a score overtakes the one above, the two rows trade places, the climbing one passing over the other on a soft shadow, and a chip counts the places each has gained. Give it periods and it plays through them week by week, with a timeline to scrub back and forth; give it new scores and the rows race to the new order.", "author": "KeyframeUI ", "categories": [ "data", "chart", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/standings", "dependencies": [ "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/standings.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "standings-demo", "type": "registry:block", "title": "Standings: Category Chart", "description": "A journaling app's eight weeks after its relaunch, climbing a store's Productivity chart from sixth to first, with a rank readout that turns over at each pass.", "author": "KeyframeUI ", "categories": [ "data", "chart", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/standings#standings-demo", "registryDependencies": [ "https://keyframeui.com/r/standings.json" ], "files": [ { "path": "components/standings-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "standings-benchmark-demo", "type": "registry:block", "title": "Standings: Benchmark Tabs", "description": "A model leaderboard on four benchmarks. Switch the tab and the same six models race to their new order.", "author": "KeyframeUI ", "categories": [ "data", "chart", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/standings#standings-benchmark-demo", "registryDependencies": [ "https://keyframeui.com/r/standings.json" ], "files": [ { "path": "components/standings-benchmark-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "standings-launch-demo", "type": "registry:block", "title": "Standings: Launch Day", "description": "A launch board on the day, ranked by live votes, where a fast riser works its way to the top.", "author": "KeyframeUI ", "categories": [ "data", "chart", "motion" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/standings#standings-launch-demo", "registryDependencies": [ "https://keyframeui.com/r/standings.json" ], "files": [ { "path": "components/standings-launch-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "slide-puzzle", "type": "registry:ui", "title": "Slide Puzzle", "description": "Icon tiles in a faint grid of slots around your headline, moving like a sliding puzzle. The first time it scrolls into view the tiles start scrambled and the puzzle solves itself, one cell at a time; after that a tile slides into a free slot every few seconds. Sweep the mouse fast into a tile and it's shoved along the grid with the tiles in front of it; rest on one and its name rises above it.", "author": "KeyframeUI ", "categories": [ "background", "interaction", "landing" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/slide-puzzle", "dependencies": [ "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/slide-puzzle.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "slide-puzzle-demo", "type": "registry:block", "title": "Slide Puzzle: Integrations", "description": "An ops assistant's integrations section: twelve tool tiles solve themselves into place round the headline, then drift. Each one is a link.", "author": "KeyframeUI ", "categories": [ "background", "interaction", "landing" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/slide-puzzle#slide-puzzle-demo", "registryDependencies": [ "https://keyframeui.com/r/slide-puzzle.json" ], "files": [ { "path": "components/slide-puzzle-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "slide-puzzle-team-demo", "type": "registry:block", "title": "Slide Puzzle: Team", "description": "A studio's careers section with the team as portrait tiles and three orange open seats. Rest on a face for a name and role.", "author": "KeyframeUI ", "categories": [ "background", "interaction", "landing" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/slide-puzzle#slide-puzzle-team-demo", "registryDependencies": [ "https://keyframeui.com/r/slide-puzzle.json" ], "files": [ { "path": "components/slide-puzzle-team-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "slide-puzzle-404-demo", "type": "registry:block", "title": "Slide Puzzle: Not Found", "description": "A docs 404 where the numbered tiles are buttons: press one, or use the arrow keys, and it slides into a free slot.", "author": "KeyframeUI ", "categories": [ "background", "interaction", "landing" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/slide-puzzle#slide-puzzle-404-demo", "registryDependencies": [ "https://keyframeui.com/r/slide-puzzle.json" ], "files": [ { "path": "components/slide-puzzle-404-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "reroute", "type": "registry:ui", "title": "Reroute", "description": "Your hub at the top, wired by a cable to one option on a wheel of many. Requests run down the cable into the live option. Pick another, spin the wheel or arrow to it, and the cable lifts out, the wheel turns it round to the socket and the cable drops in with a click. When the live option goes down, its request bounces back up the cable and the wheel turns on to the next healthy one, then back again once it recovers.", "author": "KeyframeUI ", "categories": [ "interaction", "ai", "diagram" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/reroute", "dependencies": [ "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/reroute.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "reroute-demo", "type": "registry:block", "title": "Reroute: Model Failover", "description": "An inference gateway over six model providers that drills its own outages: the live provider drops, the wheel reroutes, and it turns back once the provider recovers. Take one down yourself.", "author": "KeyframeUI ", "categories": [ "interaction", "ai", "diagram" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/reroute#reroute-demo", "registryDependencies": [ "https://keyframeui.com/r/reroute.json" ], "files": [ { "path": "components/reroute-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "reroute-regions-demo", "type": "registry:block", "title": "Reroute: Deploy Regions", "description": "A new project's region picker in electric blue: spin the wheel, press a region or use the arrow keys.", "author": "KeyframeUI ", "categories": [ "interaction", "ai", "diagram" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/reroute#reroute-regions-demo", "registryDependencies": [ "https://keyframeui.com/r/reroute.json" ], "files": [ { "path": "components/reroute-regions-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "reroute-email-demo", "type": "registry:block", "title": "Reroute: Email Relays", "description": "An email API's relays with a switch each. Pause relays and the mail moves on to whichever is still up.", "author": "KeyframeUI ", "categories": [ "interaction", "ai", "diagram" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/reroute#reroute-email-demo", "registryDependencies": [ "https://keyframeui.com/r/reroute.json" ], "files": [ { "path": "components/reroute-email-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "checkpoint", "type": "registry:ui", "title": "Checkpoint", "description": "A request that has to clear your rules before it runs. A token drops out from under the request and drives down a lane, past one barrier per rule: each one swings open downward, the way the token is going, as its rule passes and the row ticks. A rule that needs sign-off keeps its barrier down and turns its row into Approve and Deny; a rule the request breaks stays shut, and the token knocks against it twice and is turned away. Every outcome rolls into a short log underneath.", "author": "KeyframeUI ", "categories": [ "ai", "interaction", "data" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/checkpoint", "dependencies": [ "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/checkpoint.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "checkpoint-demo", "type": "registry:block", "title": "Checkpoint: Agent Guardrails", "description": "A plant shop's support agent: reading a ticket clears, a $1,240 refund waits for finance, and deleting a customer is blocked by its scope.", "author": "KeyframeUI ", "categories": [ "ai", "interaction", "data" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/checkpoint#checkpoint-demo", "registryDependencies": [ "https://keyframeui.com/r/checkpoint.json" ], "files": [ { "path": "components/checkpoint-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "checkpoint-deploy-demo", "type": "registry:block", "title": "Checkpoint: Release Gate", "description": "Releases through tests, preview, migrations and a change freeze, where a Friday-evening deploy is turned away.", "author": "KeyframeUI ", "categories": [ "ai", "interaction", "data" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/checkpoint#checkpoint-deploy-demo", "registryDependencies": [ "https://keyframeui.com/r/checkpoint.json" ], "files": [ { "path": "components/checkpoint-deploy-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "checkpoint-spend-demo", "type": "registry:block", "title": "Checkpoint: Spend Policy", "description": "A studio's company card policy: a flight waits on its receipt, and a casino charge is blocked by merchant category.", "author": "KeyframeUI ", "categories": [ "ai", "interaction", "data" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/checkpoint#checkpoint-spend-demo", "registryDependencies": [ "https://keyframeui.com/r/checkpoint.json" ], "files": [ { "path": "components/checkpoint-spend-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "seam", "type": "registry:ui", "title": "Seam", "description": "The edge between two sections, printed as a halftone. Drop it between a light section and a dark one and it reads both backgrounds; as you scroll past, the color below climbs into the band cell by cell along a ragged front, so the next section reaches up to meet you instead of starting at a hard line.", "author": "KeyframeUI ", "categories": [ "background", "scroll", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/seam", "dependencies": [ "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/seam.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "seam-demo", "type": "registry:block", "title": "Seam: Studio Site", "description": "A design studio's page, where the hero gives way to a blue stats band and back, in dots, squares or dither.", "author": "KeyframeUI ", "categories": [ "background", "scroll", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/seam#seam-demo", "registryDependencies": [ "https://keyframeui.com/r/seam.json" ], "files": [ { "path": "components/seam-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "seam-footer-demo", "type": "registry:block", "title": "Seam: Night Footer", "description": "A closing call to action that dithers down into a night footer with a giant wordmark.", "author": "KeyframeUI ", "categories": [ "background", "scroll", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/seam#seam-footer-demo", "registryDependencies": [ "https://keyframeui.com/r/seam.json" ], "files": [ { "path": "components/seam-footer-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "seam-changelog-demo", "type": "registry:block", "title": "Seam: Changelog", "description": "A product changelog where the tinted latest release fades into the list of earlier ones through fine dots.", "author": "KeyframeUI ", "categories": [ "background", "scroll", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/seam#seam-changelog-demo", "registryDependencies": [ "https://keyframeui.com/r/seam.json" ], "files": [ { "path": "components/seam-changelog-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "pulse", "type": "registry:ui", "title": "Pulse", "description": "A background your data plays, not the pointer. A still grid of dots fills the box, and every event in your feed lands on it like a drop on water: a ring runs out from its point, swelling the dots it passes in the event's color, and the spot it hit stays lit for a moment after.", "author": "KeyframeUI ", "categories": [ "background", "data", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/pulse", "dependencies": [ "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/pulse.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "pulse-demo", "type": "registry:block", "title": "Pulse: Live Regions", "description": "An inference platform's hero where requests land as small rings labelled with their region and deploys as orange ones, ticking the counter below.", "author": "KeyframeUI ", "categories": [ "background", "data", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/pulse#pulse-demo", "registryDependencies": [ "https://keyframeui.com/r/pulse.json" ], "files": [ { "path": "components/pulse-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "pulse-waitlist-demo", "type": "registry:block", "title": "Pulse: Waitlist", "description": "A language tutor's waitlist where signups land on their cities and joining drops an orange ring labelled You, roughly where you are.", "author": "KeyframeUI ", "categories": [ "background", "data", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/pulse#pulse-waitlist-demo", "registryDependencies": [ "https://keyframeui.com/r/pulse.json" ], "files": [ { "path": "components/pulse-waitlist-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "pulse-status-demo", "type": "registry:block", "title": "Pulse: Status Page", "description": "An API status page where every region's health checks pass as small rings, until one region turns red and an incident runs from investigating to resolved.", "author": "KeyframeUI ", "categories": [ "background", "data", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/pulse#pulse-status-demo", "registryDependencies": [ "https://keyframeui.com/r/pulse.json" ], "files": [ { "path": "components/pulse-status-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "voiceprint", "type": "registry:ui", "title": "Voiceprint", "description": "A background that prints a voice as it speaks. Sound comes in at the middle as a stroke of dashes as tall as it is loud, then travels out to both edges, so a sentence spreads across the section like a pressed waveform. Each speaker prints in their own color, and in silence it settles back into a calm dot grid.", "author": "KeyframeUI ", "categories": [ "background", "ai", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/voiceprint", "dependencies": [ "clsx", "tailwind-merge" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/ui/voiceprint.tsx", "type": "registry:ui" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "voiceprint-demo", "type": "registry:block", "title": "Voiceprint: Voice Agent Hero", "description": "A clinic's voice agent books a same-day appointment on a looping call, agent in blue and patient in ink, and Talk to it prints your own voice from the microphone.", "author": "KeyframeUI ", "categories": [ "background", "ai", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/voiceprint#voiceprint-demo", "registryDependencies": [ "https://keyframeui.com/r/voiceprint.json" ], "files": [ { "path": "components/voiceprint-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "voiceprint-player-demo", "type": "registry:block", "title": "Voiceprint: Recording Player", "description": "A transcription player for NASA's Apollo 11 tapes, where the print listens to the audio element itself and the tape's hiss stays under the noise gate.", "author": "KeyframeUI ", "categories": [ "background", "ai", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/voiceprint#voiceprint-player-demo", "registryDependencies": [ "https://keyframeui.com/r/voiceprint.json" ], "files": [ { "path": "components/voiceprint-player-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "voiceprint-dubbing-demo", "type": "registry:block", "title": "Voiceprint: Dubbing Preview", "description": "Each line plays in English in ink, then as an AI dub in orange on the same beats, so the same shape prints twice; the chips pick the language.", "author": "KeyframeUI ", "categories": [ "background", "ai", "canvas" ], "docs": "Live preview, examples and props: https://keyframeui.com/components/voiceprint#voiceprint-dubbing-demo", "registryDependencies": [ "https://keyframeui.com/r/voiceprint.json" ], "files": [ { "path": "components/voiceprint-dubbing-demo.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "autopilot-hero", "type": "registry:block", "title": "Autopilot Hero", "description": "A hero where the product demos itself. Under the headline, an Autopilot cursor takes a 3am page, reads the trace, writes the fix and opens the pull request in a working incident console, and steps aside when a visitor reaches for the mouse. With a navbar and a Release Pill over the headline.", "author": "KeyframeUI ", "categories": [ "blocks", "hero-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/hero-sections/autopilot-hero", "dependencies": [ "motion" ], "registryDependencies": [ "https://keyframeui.com/r/autopilot.json", "https://keyframeui.com/r/release-pill.json" ], "files": [ { "path": "components/autopilot-hero.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sentence-form-cta", "type": "registry:block", "title": "Sentence Form CTA", "description": "A closing call to action where the request-access form is one sentence: \"Hi, I'm ___ from ___.\" Picks fly up into the blanks, and on send the sentence settles into a thank-you that uses the visitor's first name.", "author": "KeyframeUI ", "categories": [ "blocks", "cta-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/cta-sections/sentence-form-cta", "registryDependencies": [ "https://keyframeui.com/r/sentence-form.json" ], "files": [ { "path": "components/sentence-form-cta.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "agent-requests-feature", "type": "registry:block", "title": "Agent Requests Feature", "description": "A feature section where four example requests drive one Agent Session. The picked request plays in a terminal beside the screen it changes: an alert rule and its Slack message, a retention table filling cohort by cohort, revenue split by plan, events tagged one by one. A line under the row fills as each change lands, and the next request plays on its own until the visitor picks one.", "author": "KeyframeUI ", "categories": [ "blocks", "feature-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/feature-sections/agent-requests-feature", "dependencies": [ "motion" ], "registryDependencies": [ "https://keyframeui.com/r/agent-session.json", "utils" ], "files": [ { "path": "components/agent-requests-feature.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "agent-session-hero", "type": "registry:block", "title": "Agent Session Hero", "description": "A hero for a developer tool that coding agents use. Under the headline an Agent Session plays: the agent adds a signup funnel to a live dashboard, each bar filling as its tracking call is written. Your mark's orbit is printed in glyphs around the headline and inks under the pointer, a Release Pill sits above it, and the nav docks into a pill that catches the hero's button as you scroll.", "author": "KeyframeUI ", "categories": [ "blocks", "hero-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/hero-sections/agent-session-hero", "dependencies": [ "motion" ], "registryDependencies": [ "https://keyframeui.com/r/agent-session.json", "https://keyframeui.com/r/glyph-field.json", "https://keyframeui.com/r/handoff-nav.json", "https://keyframeui.com/r/release-pill.json" ], "files": [ { "path": "components/agent-session-hero.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "glyph-field-cta", "type": "registry:block", "title": "Glyph Field CTA", "description": "A closing call to action on a dark panel: the headline, the install command with a copy button, and two links beside your logo printed in monospace glyphs. The mark decodes into place as it scrolls into view and inks in the accent under the pointer.", "author": "KeyframeUI ", "categories": [ "blocks", "cta-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/cta-sections/glyph-field-cta", "registryDependencies": [ "https://keyframeui.com/r/glyph-field.json" ], "files": [ { "path": "components/glyph-field-cta.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "diff-apply-feature", "type": "registry:block", "title": "Diff Apply Feature", "description": "A feature section about reviewing what an agent writes. Beside three plain points, a Diff Apply editor plays the agent's tracking change into a real component, line by line, then waits for Keep or Undo on each change, with a running count of what was kept underneath.", "author": "KeyframeUI ", "categories": [ "blocks", "feature-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/feature-sections/diff-apply-feature", "registryDependencies": [ "https://keyframeui.com/r/diff-apply.json" ], "files": [ { "path": "components/diff-apply-feature.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "golden-hour-hero", "type": "registry:block", "title": "Golden Hour Hero", "description": "A hero for an AI trip planner, after the minimal split heroes of AI products: a three-line headline beside a quiet column with the button and a press strip, over a product window lit by a Golden Hour scene. In the window a frosted Footnote answers a traveler's question, numbering each claim from its source, and each example question relights the valley for its hour, running forward through the clock: golden hour, after dark, then sunrise. The sun goes down as the hero scrolls away.", "author": "KeyframeUI ", "categories": [ "blocks", "hero-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/hero-sections/golden-hour-hero", "dependencies": [ "motion" ], "registryDependencies": [ "https://keyframeui.com/r/footnote.json", "https://keyframeui.com/r/golden-hour.json", "utils" ], "files": [ { "path": "components/golden-hour-hero.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "golden-hour-features", "type": "registry:block", "title": "Golden Hour Features", "description": "A feature section for a trip planner that plans around the light: four moments of one day (first light, midday, golden hour, after dark), each on a Golden Hour scene lit for its hour, with the plan's stop on a frosted card. Rest on a moment and its light moves on most of an hour.", "author": "KeyframeUI ", "categories": [ "blocks", "feature-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/feature-sections/golden-hour-features", "registryDependencies": [ "https://keyframeui.com/r/golden-hour.json", "utils" ], "files": [ { "path": "components/golden-hour-features.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "footnote-feature", "type": "registry:block", "title": "Footnote Feature", "description": "A feature section about answers you can check. Beside three plain points, a Footnote answers a traveler's question: it reads its sources, writes the answer and flies each citation from its source into the sentence it backs. Follow-up questions under the card ask the next one, and the old answer folds away.", "author": "KeyframeUI ", "categories": [ "blocks", "feature-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/feature-sections/footnote-feature", "registryDependencies": [ "https://keyframeui.com/r/footnote.json" ], "files": [ { "path": "components/footnote-feature.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "margin-note-stats", "type": "registry:block", "title": "Margin Note Stats", "description": "A stats section where the chart explains itself. Margin Note reads three months of fares, stops where the price moved and writes why in the margin (a new flight, a festival, the last two weeks), then the takeaway; three plain numbers sit underneath.", "author": "KeyframeUI ", "categories": [ "blocks", "stats-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/stats-sections/margin-note-stats", "registryDependencies": [ "https://keyframeui.com/r/margin-note.json" ], "files": [ { "path": "components/margin-note-stats.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "golden-hour-cta", "type": "registry:block", "title": "Golden Hour CTA", "description": "A closing call to action across a full-width Golden Hour scene. The sun sets as the section comes into view and the road's lights come on; describing a trip and sending it brings out the night and the moon.", "author": "KeyframeUI ", "categories": [ "blocks", "cta-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/cta-sections/golden-hour-cta", "dependencies": [ "motion" ], "registryDependencies": [ "https://keyframeui.com/r/golden-hour.json" ], "files": [ { "path": "components/golden-hour-cta.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "launch-dock-testimonials", "type": "registry:block", "title": "Launch Dock Testimonials", "description": "A testimonials section where the proof is the customers' own apps. Under the headline a Launch Dock walks through six apps built on one sync platform, each window growing up out of its icon, while the room takes the open app's color and its founder's quote settles in underneath. Handwritten notes in the margins point at the dock, and the one that says to tap an app rubs itself out once the visitor does.", "author": "KeyframeUI ", "categories": [ "blocks", "testimonials" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/testimonials/launch-dock-testimonials", "registryDependencies": [ "https://keyframeui.com/r/jot.json", "https://keyframeui.com/r/launch-dock.json" ], "files": [ { "path": "components/launch-dock-testimonials.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "launch-dock-logos", "type": "registry:block", "title": "Launch Dock Logos", "description": "A logo cloud that tells you why each logo is there. The customers' marks sit quiet in a dock; pick one, or let it walk through them, and its mark takes its color while a small card launches out of it with the one number its story is about and a link to the rest.", "author": "KeyframeUI ", "categories": [ "blocks", "logo-clouds" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/logo-clouds/launch-dock-logos", "registryDependencies": [ "https://keyframeui.com/r/launch-dock.json" ], "files": [ { "path": "components/launch-dock-logos.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "jot-pricing", "type": "registry:block", "title": "Jot Pricing", "description": "A pricing section where the handwritten notes do the selling. A note beside the billing switch points at Yearly and rewrites itself to a thank-you when the visitor switches, while every price rolls to its new number. Drag the device slider and the note above the plans swings its arrow to the one that fits.", "author": "KeyframeUI ", "categories": [ "blocks", "pricing-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/pricing-sections/jot-pricing", "registryDependencies": [ "https://keyframeui.com/r/jot.json", "https://keyframeui.com/r/odometer.json" ], "files": [ { "path": "components/jot-pricing.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "jot-hero", "type": "registry:block", "title": "Jot Hero", "description": "A split hero for a sync engine with a live demo beside the headline: a laptop and a phone on one checklist. A handwritten note asks the visitor to tick something off on the phone, then swings its arrow to the laptop, where the same row just ticked itself and flashed. Another note points at the one-line install command.", "author": "KeyframeUI ", "categories": [ "blocks", "hero-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/hero-sections/jot-hero", "dependencies": [ "motion" ], "registryDependencies": [ "https://keyframeui.com/r/jot.json" ], "files": [ { "path": "components/jot-hero.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "skyline-hero", "type": "registry:block", "title": "Skyline Hero", "description": "A printed hero for a release-train tool: an editorial serif headline over a halftone city whose towers rise and light up on load. A Dot Rail under the nav runs on its own until a link is hovered, then jumps under it, and \"Send a test train\" sends a train across the elevated line at the foot of the city.", "author": "KeyframeUI ", "categories": [ "blocks", "hero-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/hero-sections/skyline-hero", "registryDependencies": [ "https://keyframeui.com/r/dot-rail.json", "https://keyframeui.com/r/skyline.json" ], "files": [ { "path": "components/skyline-hero.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "skyline-stats", "type": "registry:block", "title": "Skyline Stats", "description": "A stats section where the chart is a city: each team is a tower as tall as its count of release trains, with the number on a sign on its roof. Hover or focus a tower and it lights up floor by floor while the others dim. Beside it, a serif headline and three figures in a ruled list.", "author": "KeyframeUI ", "categories": [ "blocks", "stats-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/stats-sections/skyline-stats", "registryDependencies": [ "https://keyframeui.com/r/skyline.json" ], "files": [ { "path": "components/skyline-stats.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "skyline-cta", "type": "registry:block", "title": "Skyline CTA", "description": "A closing call to action over a city at dusk with a few windows lit. Point at \"Get on board\" or tab to it and the whole city switches its lights on, one window at a time; press it and a train leaves across the line.", "author": "KeyframeUI ", "categories": [ "blocks", "cta-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/cta-sections/skyline-cta", "registryDependencies": [ "https://keyframeui.com/r/skyline.json" ], "files": [ { "path": "components/skyline-cta.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dot-rail-feature", "type": "registry:block", "title": "Dot Rail Feature", "description": "A feature section that walks a release through its five stations as tabs that play by themselves. The LED dots under the current station count up like a timer before the next one comes up; point at a station and the lit run jumps under it, pick one and it stays. Each station shows what happens there, with the product's own readout beside it.", "author": "KeyframeUI ", "categories": [ "blocks", "feature-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/feature-sections/dot-rail-feature", "dependencies": [ "motion" ], "registryDependencies": [ "https://keyframeui.com/r/dot-rail.json", "utils" ], "files": [ { "path": "components/dot-rail-feature.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dot-rail-changelog", "type": "registry:block", "title": "Dot Rail Changelog", "description": "A changelog laid over a year. The rail is the year, with a tick at each release and the months under it; its lit dots sit on the newest release. Point at a release or tab to it and they run across the year to its date with a short comet tail, then back to the newest when you leave.", "author": "KeyframeUI ", "categories": [ "blocks", "changelog-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/changelog-sections/dot-rail-changelog", "registryDependencies": [ "https://keyframeui.com/r/dot-rail.json" ], "files": [ { "path": "components/dot-rail-changelog.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "throughline-hero", "type": "registry:block", "title": "Throughline Hero", "description": "A hero for an AI product-photo studio, built on one giant word. An Echo Reel turns through what it shoots (sneakers, skincare, ceramics), each word inking in as it rolls into the middle, while Throughline tiles of what it hands back ride dotted lines across the reel and pick up the violet through their glass. Hold a tile to stop its line and read it; a button in the corner stops all the motion.", "author": "KeyframeUI ", "categories": [ "blocks", "hero-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/hero-sections/throughline-hero", "registryDependencies": [ "https://keyframeui.com/r/echo-reel.json", "https://keyframeui.com/r/throughline.json" ], "files": [ { "path": "components/throughline-hero.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "throughline-feature", "type": "registry:block", "title": "Throughline Feature", "description": "A feature section for an AI product-photo studio: one product shot in the middle of a stage, and every crop and format it becomes riding out from under it along five dotted spokes (marketplace square, feed, story, banner, alt text, WebP). Copy and three numbers sit beside it. Hold a tile to stop its spoke and read it.", "author": "KeyframeUI ", "categories": [ "blocks", "feature-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/feature-sections/throughline-feature", "registryDependencies": [ "https://keyframeui.com/r/throughline.json" ], "files": [ { "path": "components/throughline-feature.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "echo-reel-pricing", "type": "registry:block", "title": "Echo Reel Pricing", "description": "A pricing section where the plan picker is one giant word. Click the plan printed above or below, or press ↑ ↓, and the reel turns it into the middle and inks it in, while the card beside it rolls the price and the monthly photo count with an Odometer. A monthly or yearly switch rolls the price too.", "author": "KeyframeUI ", "categories": [ "blocks", "pricing-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/pricing-sections/echo-reel-pricing", "registryDependencies": [ "https://keyframeui.com/r/echo-reel.json", "https://keyframeui.com/r/odometer.json" ], "files": [ { "path": "components/echo-reel-pricing.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "echo-reel-footer", "type": "registry:block", "title": "Echo Reel Footer", "description": "A night footer that ends on a giant wordmark. Point at a link column, or Tab into it, and the Echo Reel at the foot turns to that column's name and inks it in, then turns back to the brand a beat after you leave. With a newsletter field, three link columns, the legal line and a status light.", "author": "KeyframeUI ", "categories": [ "blocks", "footers" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/footers/echo-reel-footer", "registryDependencies": [ "https://keyframeui.com/r/echo-reel.json" ], "files": [ { "path": "components/echo-reel-footer.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "plan-fit-pricing", "type": "registry:block", "title": "Plan Fit Pricing", "description": "A pricing section for an AI dubbing tool, priced by the minutes you dub. Drag the usage slider and four plan cards measure it against their allowances: past one, its overage shows as a hatched stretch and its price climbs, until the highlight glides to the plan that costs less. Monthly and yearly billing count every price over, and a volume card beside \"In every plan\" lights up at the slider's far end.", "author": "KeyframeUI ", "categories": [ "blocks", "pricing-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/pricing-sections/plan-fit-pricing", "registryDependencies": [ "https://keyframeui.com/r/plan-fit.json" ], "files": [ { "path": "components/plan-fit-pricing.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "plan-fit-cta", "type": "registry:block", "title": "Plan Fit CTA", "description": "A closing call to action on a night band. Beside the headline, a plan picker on its own card: drag to how much video you publish and the cards swipe to the plan that fits, and the main button changes to name it.", "author": "KeyframeUI ", "categories": [ "blocks", "cta-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/cta-sections/plan-fit-cta", "registryDependencies": [ "https://keyframeui.com/r/plan-fit.json" ], "files": [ { "path": "components/plan-fit-cta.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "black-box-hero", "type": "registry:block", "title": "Black Box Hero", "description": "A hero for an AI product that shows its work. A question drops down a wire into a glossy black box, its three faces open in turn with what each part did for that question, and the answer comes back up beside it. Point at a face to hold it open. Under it, four numbers in oversized type roll into place.", "author": "KeyframeUI ", "categories": [ "blocks", "hero-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/hero-sections/black-box-hero", "dependencies": [ "motion" ], "registryDependencies": [ "https://keyframeui.com/r/black-box.json", "https://keyframeui.com/r/odometer.json", "utils" ], "files": [ { "path": "components/black-box-hero.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "black-box-feature", "type": "registry:block", "title": "Black Box Feature", "description": "A how-it-works section with the product as a black box and its steps beside it. The box opens one face per step on its own while a hairline fills under the step that's playing; point at a step and its face opens, point at a face and its step lights up, pick one and it stays.", "author": "KeyframeUI ", "categories": [ "blocks", "feature-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/feature-sections/black-box-feature", "dependencies": [ "motion" ], "registryDependencies": [ "https://keyframeui.com/r/black-box.json", "utils" ], "files": [ { "path": "components/black-box-feature.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "black-box-cta", "type": "registry:block", "title": "Black Box CTA", "description": "A closing call to action on a night band with the product as a glass box: a wireframe with a lit core turning inside. Its faces open in turn to walk through the trial, each with a hairline label, and any of them opens under the pointer.", "author": "KeyframeUI ", "categories": [ "blocks", "cta-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/cta-sections/black-box-cta", "registryDependencies": [ "https://keyframeui.com/r/black-box.json" ], "files": [ { "path": "components/black-box-cta.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "standings-hero", "type": "registry:block", "title": "Standings Hero", "description": "A hero for an app-ranking tool. Beside a headline with two boxed words and a link field joined to its button, a store chart races through eight weeks: the visitor's app overtakes one row after another on its way from sixth to first, and the rank readout above it rolls over at each pass. With a navbar.", "author": "KeyframeUI ", "categories": [ "blocks", "hero-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/hero-sections/standings-hero", "registryDependencies": [ "https://keyframeui.com/r/standings.json" ], "files": [ { "path": "components/standings-hero.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "standings-feature", "type": "registry:block", "title": "Standings Feature", "description": "A keyword-tracking feature section. On the left, the keywords an app could rank for, each with its monthly searches, the app's rank and how far it moved; on the right, the race for the picked keyword. Pick another and the same six apps slide to their new places, with a suggestion for how to climb under them. The keywords play by themselves, a line under the current one filling like a timer, until the visitor picks one.", "author": "KeyframeUI ", "categories": [ "blocks", "feature-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/feature-sections/standings-feature", "registryDependencies": [ "https://keyframeui.com/r/standings.json", "utils" ], "files": [ { "path": "components/standings-feature.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "slide-puzzle-integrations", "type": "registry:block", "title": "Slide Puzzle Integrations", "description": "An integrations section where fourteen tool tiles sit in a grid of slots around the headline. They start scrambled and solve themselves like a sliding puzzle, then one slides over every few seconds; point at a tile for its name, or sweep the mouse fast to shove a row along. Under the card, three notes on how the integrations work.", "author": "KeyframeUI ", "categories": [ "blocks", "integrations" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/integrations/slide-puzzle-integrations", "registryDependencies": [ "https://keyframeui.com/r/slide-puzzle.json" ], "files": [ { "path": "components/slide-puzzle-integrations.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "slide-puzzle-cta", "type": "registry:block", "title": "Slide Puzzle CTA", "description": "A closing call to action on a dark band, in both color schemes. The apps that top a dozen store charts slide around the headline and email field like a sliding puzzle; point at one for its name and its chart.", "author": "KeyframeUI ", "categories": [ "blocks", "cta-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/cta-sections/slide-puzzle-cta", "registryDependencies": [ "https://keyframeui.com/r/slide-puzzle.json" ], "files": [ { "path": "components/slide-puzzle-cta.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "reroute-hero", "type": "registry:block", "title": "Reroute Hero", "description": "A payments-routing hero with the processors on a wheel under your mark. It drills its own outage within two seconds: the live processor drops, the charge reroutes to the next one, then traffic moves back. Visitors can take one offline themselves.", "author": "KeyframeUI ", "categories": [ "blocks", "hero-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/hero-sections/reroute-hero", "registryDependencies": [ "https://keyframeui.com/r/reroute.json" ], "files": [ { "path": "components/reroute-hero.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "reroute-features", "type": "registry:block", "title": "Reroute Features", "description": "A bento grid of platform features: a processor wheel that reroutes around its own outages, a charge snippet, regions, a vault with its tokens drifting round a glowing lock, payment methods, flat pricing rows, and refunds clearing a Checkpoint of finance rules.", "author": "KeyframeUI ", "categories": [ "blocks", "feature-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/feature-sections/reroute-features", "registryDependencies": [ "https://keyframeui.com/r/checkpoint.json", "https://keyframeui.com/r/reroute.json", "utils" ], "files": [ { "path": "components/reroute-features.tsx", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "checkpoint-feature", "type": "registry:block", "title": "Checkpoint Feature", "description": "An approvals section for a payments product: three points down the left, and on the right payouts clearing a policy one barrier at a time. A large payout waits for sign-off, so a visitor can approve or deny it, and one to a bank outside the allowlist is turned away.", "author": "KeyframeUI ", "categories": [ "blocks", "feature-sections" ], "docs": "Live preview and the components it's built with: https://keyframeui.com/blocks/feature-sections/checkpoint-feature", "registryDependencies": [ "https://keyframeui.com/r/checkpoint.json" ], "files": [ { "path": "components/checkpoint-feature.tsx", "type": "registry:component" } ] } ] }