Search the docs

Search Keyframery's docs

NewKeyframery for Claude Code: MCP server and plugin

Add one line. Your shadcn/ui app animates.

Dialogs grow from the button you clicked. Tabs slide instead of snapping. Lists, numbers and loading states move instead of jumping. Your components don't change.

npx shadcn add https://keyframery.com/r/cuts.json
Get startedGitHub
  • 7 KB gzipped
  • 0 dependencies
  • Base UI and Radix
  • MIT licensed

shadcn/uias it ships

Acme workspace

Team

3 of 10 seats used

  • AR

    Ana Ruiz

    ana@acme.com

    Owner
  • BO

    Ben Okafor

    ben@acme.com

    Admin
  • CM

    Chloé Martin

    chloe@acme.com

    Member

shadcn/uiwith Keyframery

Acme workspace

Team

3 of 10 seats used

  • AR

    Ana Ruiz

    ana@acme.com

    Owner
  • BO

    Ben Okafor

    ben@acme.com

    Admin
  • CM

    Chloé Martin

    chloe@acme.com

    Member

Same app, same clicks. Only one of them has <Cuts /> in its layout.

Works with

  • shadcn/ui
  • Base UI
  • Radix
  • Next.js
  • Vite
  • React Router

Every way a screen changes, animated

A screen can only change in six ways. The first two are automatic once <Cuts /> is in your layout. The other four take one small component each.

Dialogs open from their button

Dialogs and the command palette grow out of the button you clicked and go back into it. Sheets slide in while the page steps back. Toasts fly from the button that made them.

Automatic with <Cuts />Docs
Revenue is up 12% this week.

Tabs slide instead of snapping

The indicator moves first and the new panel follows a beat later, while the height eases to fit.

Automatic with <Cuts />Docs
Order #1044

A card opens into its page

The card grows into its detail view, on the same page or on a new route, and shrinks back when you return.

<MatchCut>Docs
  • Message 1
  • Message 2

New items come from where they started

A sent message flies out of the Send button. Removed rows fold away. Reordered rows glide to their new place.

<ListCut>Docs

1,284

Numbers roll to their new value

Prices, counts and totals change digit by digit instead of flickering.

<ValueCut>Docs
Report ready. 3 charts, 12 rows.

Loading states settle in

Skeletons dissolve into the real content. If the data arrives within 300 ms, no skeleton shows at all.

<LoadCut>Docs

Install in two steps

Keyframery doesn't replace or wrap your components. It finds shadcn's own parts on the page and gives them motion. Remove the line and you're back to stock shadcn.

Read the installation guide

  1. Add it with the shadcn CLI

    npx shadcn registry add "@keyframery=https://keyframery.com/r/{name}.json"
    npx shadcn add @keyframery/cuts

    The first line registers Keyframery in your components.json, once. After that every helper installs by name, like npx shadcn add @keyframery/list-cut. The second copies <Cuts />, its stylesheet and a small engine into your project: about 7 KB gzipped, with no extra dependencies.

  2. Render <Cuts /> once, in your root layout

    app/layout.tsx

    import { Cuts } from "@/components/keyframery/cuts"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Cuts />
      </body>
    </html>
  )
}

Using a coding agent?

Copy a short prompt for Claude Code, Cursor or any other agent. It installs Keyframery, renders <Cuts />, and wraps the lists, numbers, skeletons and cards in your app.

In Claude Code, the plugin does the same, and reads the docs through the Keyframery MCP server:

/plugin marketplace add keyframery/keyframery
/plugin install keyframery@keyframery

Try it on real screens

Six app screens made of stock shadcn/ui components. Click anything. Switch Keyframery off to compare, or slow every cut down to watch it closely.

Dashboard

Revenue

$61,480

Visitors

16,240

Chat

  1. Morning. Did the docs preview build?
  2. Yes, it's on the staging link.
  3. The dialogs feel so much calmer now.
  4. Is the release branch green?
  5. All checks passed a minute ago.
  6. Great. Can you merge after the review?

Inbox

Settings

Ada Kaur

ada@studio.dev

Playlist

4 tracks, 14 min

  1. 1Night driveHalogen3:42
  2. 2Low tideMareen4:05
  3. 3Paper planesOstrava2:58
  4. 4AfterglowKiln3:31

Payments

Invoice 1044, Northwind Studio

$1,300.00

Status: Pending
Due

No payment yet. Charging uses the card on file, Visa ending 4242.

Invoice actions

Actions for invoice 1044

Set the speed like you set colours

Speed, easing, travel and blur are CSS variables in your globals.css, next to your colours. Set them for the whole app or for one section. The Theme page writes them for you.

:root { --kf-pace: 1.0; }

Questions

Start with one line

Install it, render <Cuts /> in your layout, then open any dialog in your app.

npx shadcn add https://keyframery.com/r/cuts.json
Get started