Animated Feature Sections for React
What the product does, shown working instead of listed. Free to install, each with the components it's built around.
Agent Requests Feature
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.
- Built with
- Agent Session
- Packages
motion,clsx,tailwind-merge
npx shadcn@latest add @keyframeui/agent-requests-featureDiff Apply Feature
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.
- Built with
- Diff Apply
- Packages
motion,clsx,tailwind-merge
npx shadcn@latest add @keyframeui/diff-apply-featureGolden Hour Features
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.
- Built with
- Golden Hour
- Packages
motion,clsx,tailwind-merge
npx shadcn@latest add @keyframeui/golden-hour-featuresFootnote Feature
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.
- Built with
- Footnote
- Packages
motion,clsx,tailwind-merge
npx shadcn@latest add @keyframeui/footnote-featureDot Rail Feature
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.
- Built with
- Dot Rail
- Packages
motion,clsx,tailwind-merge
npx shadcn@latest add @keyframeui/dot-rail-featureThroughline Feature
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.
- Built with
- Throughline
- Packages
clsx,tailwind-merge
npx shadcn@latest add @keyframeui/throughline-featureBlack Box Feature
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.
- Built with
- Black Box
- Packages
motion,clsx,tailwind-merge
npx shadcn@latest add @keyframeui/black-box-featureStandings Feature
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.
- Built with
- Standings
- Packages
clsx,tailwind-merge
npx shadcn@latest add @keyframeui/standings-featureReroute Features
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.
- Built with
- Checkpoint, Reroute
- Packages
clsx,tailwind-merge
npx shadcn@latest add @keyframeui/reroute-featuresCheckpoint Feature
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.
- Built with
- Checkpoint
- Packages
clsx,tailwind-merge
npx shadcn@latest add @keyframeui/checkpoint-featureBefore your first install
These commands use the @keyframeui registry. Add it to components.json once per project, then every command here works as written, and each block brings its components with it.