127+ Primitives
CTA Banner
CardsFull-width call-to-action section with a self-contained flickering canvas grid background masked radially so the grid is denser at the edges and fades toward the center. Includes an email signup form with loading, success, and validation states animated via Framer Motion AnimatePresence.
CanvasFramer MotionFormA11y Ready
Now in public beta
Ship beautiful interfaces faster
Join 12,000+ engineers building with BoseUI components every week.
No credit card required · Cancel any time
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/cta-banner.json"
Props
TypeScript props supported by <CTABanner />.
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | undefined | Bold headline rendered inside the banner. |
| subheading | string | undefined | Muted supporting copy rendered beneath the headline. |
| placeholder | string | "Enter your email" | Placeholder text for the email input. |
| buttonLabel | string | "Get started" | Label for the submit button in its idle state. |
| onSubmit | (email: string) => Promise<void> | void | undefined | Async callback called with the validated email string on form submit. |
| accentColor | string | "#6366f1" | CSS color used for the grid squares, glow blob, and submit button background. |
| className | string | undefined | Additional Tailwind CSS classes merged into the outer container. |
Key Features
- Self-contained InternalGridCanvas — no external FlickeringGrid import; single file drop-in.
- Radial mask-image makes grid denser at edges and transparent at center so text stays readable.
- AnimatePresence button label swap: idle → loading spinner (animated rotate) → success checkmark (SVG pathLength).
- Input shake animation on validation failure using Framer Motion x keyframes.
- AnimatePresence height + opacity transition on inline error message.
- Slow floating glow blob using infinite repeating animate with ease-in-out y oscillation.
- Stagger entrance: badge, heading, subheading, form fade+rise with staggerChildren.
- Accessible: aria-invalid, aria-describedby, aria-live='polite', sr-only label, focus-visible rings.
- Respects prefers-reduced-motion; all animations bypass when enabled.
Keyboard & Accessibility
- Email input has sr-only <label>, aria-invalid and aria-describedby linked to inline error.
- aria-live='polite' div announces success and error states to screen readers.
- Button aria-label updates to match current state (idle / loading / success).
- All interactive elements have clearly visible focus-visible rings.
- Decorative canvas and glow blob marked aria-hidden='true'.
- prefers-reduced-motion respected — all Framer Motion animations are bypassed.