Moodboard
Swatches, type and references around the headline that you can grab and throw.
Features
- Throw any card: it glides to a stop and stays inside the hero
- Card edges light up in brand blue under the pointer
- The last card touched comes to the top
- Optional photos, with a brand gradient fallback
- Cards settle in without movement for reduced motion
Best for: Design studios, brand agencies and creative portfolios that want their taste felt, not described.
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 |
|---|---|---|---|
| title | string | - | The headline. |
| accent | string | - | Optional ending in serif italic. |
| description | string | - | The line under the headline. |
| photos | string[] | - | Up to two image URLs for the photo cards. |
| primaryCta | { label: string; href: string } | - | The blue button. |
| secondaryCta | { label: string; href: string } | - | Optional second button. |
| eyebrow | ReactNode | - | Optional line above the headline. |
| className | string | - | Extra classes for the section. |
FAQ
Is the Moodboard interactive section free to use?
Yes. Moodboard is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Moodboard 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 Moodboard in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Moodboard need installed?
motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Moodboard 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.