A footer led by a gridded newsletter card with a send button that morphs into a drawn check and a reader count that rolls up. Each link column has a highlight that glides between links, and the columns fold into accordions on narrow containers.
npx shadcn@latest add https://hyperblur.dev/r/footer-newsletter-groups.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/footer-newsletter-groups.tsx.
import { FooterNewsletterGroups } from "@/components/hyperblur/footer-newsletter-groups"
<FooterNewsletterGroups onSubmit={async (email) => console.log(email)} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Terrain" | Brand name in the bottom row. |
| title | string | "Field Notes, every other Thursday." | Newsletter heading. |
| subtitle | string | Newsletter description. | |
| placeholder | string | "you@company.com" | Email placeholder. |
| buttonLabel | string | "Subscribe" | Submit button text. |
| successMessage | string | "You are in. The next issue lands Thursday." | Shown after a successful submit. |
| subscribers | number | 18240 | Starting reader count. It increases by one after a signup. |
| groups | { title: string; links: { label: string; href: string; badge?: string }[] }[] | 4 groups | Link columns. A badge shows a small pill after the label. |
| copyright | string | "© 2026 Terrain Systems" | Copyright line. |
| region | string | "English, United States" | Language and region label. |
| onSubmit | (email: string) => void | Promise<void> | Called with the email. A rejected promise shows the error state. | |
| accent | string | "#10b981" | Button, marker and badge color. |
| className | string | "" | Extra classes for the root element. |
| style | CSSProperties | Inline styles merged after the accent variables. |