Animated Blocks for React
Whole landing-page sections, free to install. Each one is built around one of the components, so one command brings the section and the components it uses.
36 blocks in Hero Sections, Logo Clouds, Integrations, Feature Sections, Stats Sections, Testimonials, Pricing Sections, Changelog Sections, CTA Sections and Footers
Hero Sections
The top of the page: navigation, the headline, the calls to action and the product at work.
Autopilot Hero
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.
- Built with
- Autopilot, Release Pill
- Packages
motion,clsx,tailwind-merge
npx shadcn@latest add @keyframeui/autopilot-heroAgent Session Hero
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.
- Built with
- Agent Session, Glyph Field, Handoff Nav, Release Pill
- Packages
motion,clsx,tailwind-merge
npx shadcn@latest add @keyframeui/agent-session-heroGolden Hour Hero
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.
- Built with
- Footnote, Golden Hour
- Packages
motion,clsx,tailwind-merge
npx shadcn@latest add @keyframeui/golden-hour-heroJot Hero
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.
- Built with
- Jot
- Packages
motion,clsx,tailwind-merge
npx shadcn@latest add @keyframeui/jot-heroSkyline Hero
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.
- Packages
motion,clsx,tailwind-merge
npx shadcn@latest add @keyframeui/skyline-heroThroughline Hero
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.
- Built with
- Echo Reel, Throughline
- Packages
clsx,tailwind-merge
npx shadcn@latest add @keyframeui/throughline-heroBlack Box Hero
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.
- Packages
motion,clsx,tailwind-merge
npx shadcn@latest add @keyframeui/black-box-heroStandings Hero
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.
- Built with
- Standings
- Packages
clsx,tailwind-merge
npx shadcn@latest add @keyframeui/standings-heroReroute Hero
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.
- Built with
- Reroute
- Packages
clsx,tailwind-merge
npx shadcn@latest add @keyframeui/reroute-heroLogo Clouds
Who already uses the product, as logos that do more than sit in a row.
Launch Dock Logos
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.
- Built with
- Launch Dock
- Packages
motion,clsx,tailwind-merge
npx shadcn@latest add @keyframeui/launch-dock-logosIntegrations
What the product plugs into, laid out so people find theirs.
Slide Puzzle Integrations
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.
- Built with
- Slide Puzzle
- Packages
clsx,tailwind-merge
npx shadcn@latest add @keyframeui/slide-puzzle-integrationsFeature Sections
What the product does, shown working instead of listed.
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-featureStats Sections
The numbers behind the claim, with the context that makes them believable.
Margin Note Stats
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.
- Built with
- Margin Note
- Packages
motion,clsx,tailwind-merge
npx shadcn@latest add @keyframeui/margin-note-statsSkyline Stats
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.
- Built with
- Skyline
- Packages
motion,clsx,tailwind-merge
npx shadcn@latest add @keyframeui/skyline-statsTestimonials
Customers in their own words, with names and faces.
Launch Dock Testimonials
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.
- Built with
- Jot, Launch Dock
- Packages
motion,clsx,tailwind-merge
npx shadcn@latest add @keyframeui/launch-dock-testimonialsPricing Sections
Plans and how they compare, so the choice takes a minute.
Jot Pricing
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.
- Packages
motion,clsx,tailwind-merge
npx shadcn@latest add @keyframeui/jot-pricingEcho Reel Pricing
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.
- Packages
clsx,tailwind-merge,motion
npx shadcn@latest add @keyframeui/echo-reel-pricingPlan Fit Pricing
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.
- Built with
- Plan Fit
- Packages
motion,clsx,tailwind-merge
npx shadcn@latest add @keyframeui/plan-fit-pricingChangelog Sections
What shipped lately, so the page reads as alive.
Dot Rail Changelog
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.
- Built with
- Dot Rail
- Packages
motion,clsx,tailwind-merge
npx shadcn@latest add @keyframeui/dot-rail-changelogCTA Sections
The closing ask at the end of the page: one headline and one thing to do.
Sentence Form CTA
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.
- Built with
- Sentence Form
- Packages
motion,clsx,tailwind-merge
npx shadcn@latest add @keyframeui/sentence-form-ctaGlyph Field CTA
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.
- Built with
- Glyph Field
- Packages
motion,clsx,tailwind-merge
npx shadcn@latest add @keyframeui/glyph-field-ctaGolden Hour CTA
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.
- Built with
- Golden Hour
- Packages
motion,clsx,tailwind-merge
npx shadcn@latest add @keyframeui/golden-hour-ctaSkyline CTA
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.
- Built with
- Skyline
- Packages
motion,clsx,tailwind-merge
npx shadcn@latest add @keyframeui/skyline-ctaPlan Fit CTA
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.
- Built with
- Plan Fit
- Packages
motion,clsx,tailwind-merge
npx shadcn@latest add @keyframeui/plan-fit-ctaBlack Box CTA
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.
- Built with
- Black Box
- Packages
motion,clsx,tailwind-merge
npx shadcn@latest add @keyframeui/black-box-ctaSlide Puzzle CTA
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.
- Built with
- Slide Puzzle
- Packages
clsx,tailwind-merge
npx shadcn@latest add @keyframeui/slide-puzzle-ctaBefore 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.