Animated CTA Sections for React
The closing ask at the end of the page: one headline and one thing to do. Free to install, each with the components it's built around.
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.