@keyframery
An open-source motion layer for shadcn/ui. One <Cuts /> line animates your dialogs, sheets, tabs and toasts; four helpers animate lists, numbers, skeletons and cards.
Install this registry
npx shadcn@latest add https://keyframery.com/r/registry.json pnpm dlx shadcn@latest add https://keyframery.com/r/registry.json bunx shadcn@latest add https://keyframery.com/r/registry.json curl -s https://keyframery.com/r/registry.json Components
7 totalFilm cuts for shadcn. Add <Cuts /> once to your root layout.
npx shadcn@latest add https://keyframery.com/r/cuts.json A value that changes in place (a price, a count, a status) punches in.
npx shadcn@latest add https://keyframery.com/r/value-cut.json A placeholder becomes real without a jump; fast data never flashes a skeleton.
npx shadcn@latest add https://keyframery.com/r/load-cut.json Lists that change without jumping: arrivals, departures and reorders, keyed by id.
npx shadcn@latest add https://keyframery.com/r/list-cut.json Whole-content state changes settle with a fade or slide and a smooth container height.
npx shadcn@latest add https://keyframery.com/r/state-cut.json When a control with an icon is pressed, its icon plays its own move: a gear turns, a bell rings, a lid lifts. Works with the lucide icons already in your app.
npx shadcn@latest add https://keyframery.com/r/icon-moves.json A thing opens into its bigger self (card → detail), on the same page or across a route change.
npx shadcn@latest add https://keyframery.com/r/match-cut.json