KeyframeUI

Components

Every component has a live preview, its source and an install command. Try them here, then open one for its examples and props.

Keyframe

Move your pointer across me

The card leans toward the cursor and catches the light.

Tilt Card

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

  • Card
  • Interaction
  • 3D
Demos
Default, Pricing Cards, Feature Grid
Packages
clsx, tailwind-merge
npx shadcn@latest add @keyframeui/tilt-card
Open Tilt Card

Scroll inside the box

Arc Scroll

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

  • Scroll
  • Cards
  • Motion
Demos
Default, Case Studies, Timeline, Testimonials
Packages
motion, clsx, tailwind-merge
npx shadcn@latest add @keyframeui/arc-scroll
Open Arc Scroll

Field notes

Small things, done well

Nobody remembers a divider. They remember the one that moved when they brushed past it.

Sweep across the line, or tap it.

Pluck String

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

  • Divider
  • Interaction
  • SVG
Demos
Default, Strum, Changelog
Packages
clsx, tailwind-merge
npx shadcn@latest add @keyframeui/pluck-string
Open Pluck String

Recents

9 photos

Tap a photo. Drag it down to put it back.

Zoom Lightbox

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.

  • Gallery
  • Gesture
  • Motion
Demos
Gallery, Product Images, Case Study
Packages
motion, clsx, tailwind-merge
npx shadcn@latest add @keyframeui/zoom-lightbox
Open Zoom Lightbox

Acme /Projects

Projects

  • StorefrontUpdated 2h agoLive
  • DocsUpdated yesterdayLive
  • Admin dashboardUpdated 3 days agoBuilding
  • BlogUpdated last weekLive

New here? Take a 20-second tour.

Spotlight Tour

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.

  • Onboarding
  • Overlay
  • Motion
Demos
Product Onboarding, What's New, Form Help
Packages
motion, clsx, tailwind-merge
npx shadcn@latest add @keyframeui/spotlight-tour
Open Spotlight Tour

Thursday, October 9

Today

Expand Card

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.

  • Card
  • Gesture
  • Motion
Demos
Today Feed, Changelog With Links, Shop
Packages
motion, clsx, tailwind-merge
npx shadcn@latest add @keyframeui/expand-card
Open Expand Card
okto.studio
Okto°Contact
Independent design studio, Oslo

Brands thatmove beforethey speak.

Identity, websites and motion for companies that would rather be felt than explained.See the work

Counter Curtain

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.

  • Preloader
  • Hero
  • Text
Demos
Studio Portfolio, Launch Page, Editorial
Packages
clsx, tailwind-merge
npx shadcn@latest add @keyframeui/counter-curtain
Open Counter Curtain

Make things that move

A studio for motion design

Get in touch

Selected work

2024–2026
  • Lumen2026
  • Parcel2025
  • Halcyon2025
  • Fieldnote2024

Expanding Hero

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.

  • Hero
  • Scroll
  • Video
Demos
Studio Reel, Product Launch, Event
Packages
motion, clsx, tailwind-merge
npx shadcn@latest add @keyframeui/expanding-hero
Open Expanding Hero
nord.studio
Nord Studio
A dark timber house lit from inside at dusk, behind a eucalyptus tree

We design thingspeople remember

Identity, products and spaces for companies that care how things feel.

Intro Loader

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.

  • Preloader
  • Hero
  • Image
Demos
Studio, Lookbook, Wordmark
Packages
clsx, tailwind-merge
npx shadcn@latest add @keyframeui/intro-loader
Open Intro Loader

Inside Northwind

Everything your revenue team needs, in one window

Scroll to take it apart.

app.northwind.io/overview
Overview
Search⌘K
RevenueLast 12 weeks
Top accounts
  • Acme Corp$48k
  • Globex$36k
  • Initech$22k
  • Umbrella$17k
Northwind
OverviewPipelineAccountsReportsWorkspacesAcme CorpGlobexInitechUmbrella
RevenueLive
$48.2k
+12.4% this week
Active usersLive
2,931
+8.1% this week
ConversionLive
3.8%
+0.6% this week
Type a command…
SuggestionsCreate invoiceIInvite teammateTExport reportESwitch workspaceW
Maya

Built for speed

Every screen loads in under 100ms, even with a million rows.

Keyboard first

Anything you can click, you can do from the command menu.

Live by default

Numbers, comments and cursors update the moment they change.

Exploded UI

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

  • Scroll
  • 3D
  • Showcase
Demos
Dashboard, Architecture, Design System
Packages
motion, clsx, tailwind-merge
npx shadcn@latest add @keyframeui/exploded-ui
Open Exploded UI

1,284

Odometer

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.

  • Number
  • Data
  • Motion
Demos
Default, Pricing, Dashboard KPIs, Indian Grouping, Landing Stats
Packages
motion, clsx, tailwind-merge
npx shadcn@latest add @keyframeui/odometer
Open Odometer

Selected work

2022–2025

Hover Preview

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.

  • List
  • Image
  • Motion
Demos
Default, Team, Journal
Packages
motion, clsx, tailwind-merge
npx shadcn@latest add @keyframeui/hover-preview
Open Hover Preview

Selected work · 01 / 06

Halden House

Architecture · 2025

View case study

Playhead Reel

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.

  • Gallery
  • Scroll
  • Timeline
Demos
Default, Changelog, Travel Journal
Packages
motion, clsx, tailwind-merge
npx shadcn@latest add @keyframeui/playhead-reel
Open Playhead Reel
linear
Linear
cubic-bezier(0.22, 1, 0.36, 1)
Ease out
cubic-bezier(0.65, 0, 0.35, 1)
Ease in-out
spring · bounce 0.3
Spring

0.00s

Sync Grid

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.

  • Video
  • Comparison
  • Scrubbing
  • Motion
Demos
Easing, Model Output, Render Quality, Redesign
Packages
motion, clsx, tailwind-merge
npx shadcn@latest add @keyframeui/sync-grid
Open Sync Grid

Task

Add a dark mode toggle to the settings page

Thought Trail

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.

  • AI
  • Status
  • Motion
Demos
Default, Chat Reasoning, Deploy Log, Research Agent
Packages
motion, clsx, tailwind-merge
npx shadcn@latest add @keyframeui/thought-trail
Open Thought Trail

Customer stories

What changed after they switched

  • 01
    A bank that now ships every FridayHalcyon Bank

    Thirty engineers moved from quarterly release trains to weekly ones, without a rollback in the first year.

    52 releases in 2025Read the story
  • 02
    One booking system for forty restaurantsCommon Table

    Hosts used to juggle three tools a night. Now every table, waitlist and deposit runs through one screen.

    38% fewer no-showsRead the story
  • 03
    Checkout, rebuilt for the phone firstFern & Pilot

    Two thirds of orders come from phones. A one-page checkout took paying from three minutes to forty seconds.

    21% more completed ordersRead the story
  • 04
    Eleven designers, one libraryNorthstar

    Six drifting UI kits became one shared library that engineers pull from directly, so mockups and code finally match.

    6 kits down to 1Read the story
  • 05
    Code review in half the timeRelay

    A team across nine time zones switched to smaller pull requests and recorded walkthroughs, and stopped waiting a day for review.

    Reviews 2× fasterRead the story

Stretch Index

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.

  • List
  • Hover
  • Layout
Demos
Customer Stories, Open Roles, Podcast Episodes
Packages
motion, clsx, tailwind-merge
npx shadcn@latest add @keyframeui/stretch-index
Open Stretch Index

Craft

We sweat the details you'll never notice

Every space on this card was decided, not defaulted. Point at anything to see its numbers, click to pin it, then hold ⌥ and point at another to measure between them.

A gray floor lamp against a white wall

Kessel Floor Lamp

$240

Arrow keys move between elements: up to the parent, down to the first child, left and right to siblings. Enter pins one, and moving on then measures the distance from it. Escape clears.

Redline

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.

  • Inspector
  • Hover
  • Design
Demos
Details, Design System, Dev Handoff
Packages
motion, clsx, tailwind-merge
npx shadcn@latest add @keyframeui/redline
Open Redline
14Calendar
Tue14
Wed15
Thu16
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM

Standup

Roadmap sync

11 – 12:30pm

Customer calls

1 – 3pm

Standup

Lunch & learn

12 – 1pm

Sprint review

3 – 5pm

Hiring panel

10 – 11:30am

Design crit

1 – 2pm

Autopilot

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.

  • Cursor
  • Interaction
  • Showcase
Demos
Agent at Work, Design Review, Three Clicks
Packages
motion, clsx, tailwind-merge
npx shadcn@latest add @keyframeui/autopilot
Open Autopilot
barro.studio
Barro

Ceramics studio · Lisbon

Pottery for slow mornings

Hand-thrown in Alfama, fired twice, and made to be used every day, not saved for guests.

Visit the studioShop bowls

Wheel classes every Saturday

Stoneware bowls and cups on a wooden table
Describe a site…↵

Blueprint

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.

  • Layout
  • Scroll
  • Motion
Demos
Site Builder, Studio Process, Generated Dashboard
Packages
motion, clsx, tailwind-merge
npx shadcn@latest add @keyframeui/blueprint
Open Blueprint
Start a projectField & Fold Studio
Hi, I'm from . We'd like help with , ideally by . Our budget is around , and you can reach me at.

Sentence Form

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.

  • Form
  • Input
  • Motion
Demos
Project Brief, Demo Request, Event RSVP
Packages
motion, clsx, tailwind-merge
npx shadcn@latest add @keyframeui/sentence-form
Open Sentence Form

The agent that does the busywork

Hand it the weekly report, the expense chasing and the calendar tetris. It plans the steps, does them, and checks its own work before it tells you.

Start for freeWatch a demo

Release Pill

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.

  • Badge
  • Hover
  • Changelog
Demos
Hero Badge, Launch Week, Version Bump
Packages
motion, clsx, tailwind-merge
npx shadcn@latest add @keyframeui/release-pill
Open Release Pill

How it works

From a connected repo to a merged fix in four steps

Scroll through the deck. Click an edge that peeks out above the front card to go back to it.

01Connect

Plug in the tools you already use

Sign in with GitHub and pick the repos. Slack, Linear and your database connect in a click, read-only until you say otherwise.

02Configure

Tell it how your team works

Set how far the agent goes on its own, who reviews what, and where it reports. Plain toggles, no YAML.

03Ship

Watch it open the pull request

It writes the fix, runs your tests and deploys a preview. You get a PR with the reasoning attached.

04Learn

It gets faster every week

Every review teaches it your conventions. Most teams see time to merge drop within the first month.

Sticky Deck

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.

  • Scroll
  • Cards
  • Sticky
Demos
How It Works, Case Studies, Pricing
Packages
motion, clsx, tailwind-merge
npx shadcn@latest add @keyframeui/sticky-deck
Open Sticky Deck
Clouds of ink drifting through water, in black and whiteThe same ink clouds in red, orange and electric blue
Tinta

Brand & motion studio · Lisbon

Color that stays with you.

Identities, campaigns and the motion between them, for brands that want to be remembered.

Paint Reveal

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

  • Image
  • Hover
  • Canvas
Demos
Studio Hero, Photo Restore, About the Founder, Work Grid
Packages
clsx, tailwind-merge
npx shadcn@latest add @keyframeui/paint-reveal
Open Paint Reveal
curl https://api.nova.ai/v1/responses \
  -H "Authorization: Bearer " \
  -H "Content-Type: application/json" \
  -d '{
    "model": "",
    "input": "Write a haiku about latency"
  }'
Highlighted values are editable
Response

Press Run to send the request

Polyglot

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.

  • Code
  • Developer
  • AI
Demos
Chat Quickstart, Three-Step Quickstart, Send an Email
Packages
motion, clsx, tailwind-merge
npx shadcn@latest add @keyframeui/polyglot
Open Polyglot

Pricing

Start free. Pay as your traffic grows.

Every plan gets the same models and the same speed. Higher tiers raise your limits and add the controls a security review asks for.

Feature
Free
$0 /mo

No card needed

Prototype with every fast model.

Start building
  • 20 requests per minute
  • 1M tokens a month
  • Fast and embedding models
  • Community support
Most popular
Pro
$40 /mo

Billed monthly

For apps with real users in production.

Start free trial
  • 500 requests per minute
  • Reasoning models
  • Batch API at half price
  • 5 team seats
Scale
$400 /mo

Billed monthly

High volume, tuned to your own data.

Upgrade to Scale
  • 5,000 requests per minute
  • Fine-tuning and evals
  • Zero data retention
  • Priority support
Enterprise
Custom

Annual contract

Private deployments and custom terms.

Contact sales
  • Private model deployments
  • SSO, SCIM and audit logs
  • Pin data to a region
  • 99.99% uptime SLA
Usage
Requests per minuteSustained rate across all models. Short bursts up to 2× are allowed.
20
500
5,000
Custom
Tokens per month
1M
50M
1B
Unlimited
Context windowThe most tokens a single request can read, prompt and files included.
32K
200K
1M
1M
Batch API
Not included
Included
Included
Included
Prompt caching
Not included
Included
Included
Included
Models
Fast models
Included
Included
Included
Included
Reasoning models
Not included
Included
Included
Included
Embeddings and rerank
Included
Included
Included
Included
Fine-tuningTrain on your own examples and serve the result at the base model's price.
Not included
Not included
Included
Included
Private deployments
Not included
Not included
Not included
Included
Collaboration
Team seats
1
5
25
Unlimited
Shared projects
Not included
Included
Included
Included
Usage alerts
Included
Included
Included
Included
Role-based access
Not included
Not included
Included
Included
Security
SSO (SAML, OIDC)
Not included
Not included
Add-on
Included
Data retentionHow long prompts and outputs are kept for abuse monitoring. Never used for training.
30 days
30 days
Zero
Custom
SOC 2 Type II report
Not included
Included
Included
Included
Audit logs
Not included
Not included
Included
Included
Region pinning
Not included
Not included
US or EU
Any region
Support
Support
Community
Email
Priority, 4h
Dedicated
Uptime SLA
Not included
Not included
99.9%
99.99%

Need more than 5,000 requests a minute?

We set custom limits within a day and can run models in your own cloud.

Talk to sales

Pricing Dock

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.

  • Pricing
  • Scroll
  • Table
Demos
AI API Pricing, Studio Packages, Why Switch
Packages
motion, clsx, tailwind-merge
npx shadcn@latest add @keyframeui/pricing-dock
Open Pricing Dock

Before your first install

These commands use the @keyframeui registry. Add it to components.json once per project, then every command here works as written.

Setup steps