Animated Hero Sections for React
The top of the page: navigation, the headline, the calls to action and the product at work. Free to install, each with the components it's built around.
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-heroBefore 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.