Neo Brutalist Hero Section
A product-first neo-brutal CRM hero: a sharp two-line headline with a marker scribble beside a live pipeline board where teammates drag deals across colour-blocked stages, wins burst into confetti and the won total counts up.
Features
- Split layout: a short two-line Bricolage Grotesque headline beside a big, dense live product board
- Kanban deals that are picked up with a tilt, carried across columns by a named teammate cursor and dropped with a bounce
- A confetti burst and a counting won total each time a deal lands in Won, plus a fresh lead dropping in
- One hand-made touch: a marker underline drawn on with SVG pathLength
- Black 2px outlines, hard offset shadows and colour-blocked columns, animated with transforms only
- Holds still for reduced motion and re-composes to a two-by-two board on phones
Best for: CRMs, sales tools and project boards for small teams that want to feel friendly and fun, with the product doing the selling.
Installation
npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| announcement | { label: string; text: ReactNode; href: string } | - | Optional news capsule above the headline. |
| title | string | - | The first line of the headline. |
| accent | string | - | Optional second line, underlined with a marker scribble. |
| description | string | - | The line under the headline. |
| primaryCta | { label: string; href: string } | - | The orange button. |
| secondaryCta | { label: string; href: string } | - | Optional white button. |
| proof | string | - | Optional rating line beside five stars, under the buttons. |
| board | { title; views: string[]; columns: string[]; deals: Deal[]; teammates: { name }[]; startStages: number[]; wonLabel; wonStart: number } | - | The live pipeline. Deals are { company, value, detail, icon, owner }; startStages gives each starting deal's column; extra deals arrive as fresh leads. |
| nav | { brand: { name; icon }; links: Cta[]; cta: Cta } | - | Optional built-in navbar in this hero's style. |
| className | string | - | Extra classes for the section. |
FAQ
Is the Neo Brutalist Hero Section free to use?
Yes. Neo Brutalist Hero Section is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Neo Brutalist Hero Section work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use Neo Brutalist Hero Section in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Neo Brutalist Hero Section need installed?
motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Neo Brutalist Hero Section accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.