Agency Hero With Project Showcase Reel
A studio hero that leads with the work: two-tone copy on the left and a fanned stack of client screens that deals the next project forward, each with its result and services.
Features
- A fanned stack of client screens in browser, phone and tablet frames, each standing on its own coloured panel
- Every few seconds the front project is dealt off to the left and the next one comes forward on a heavy spring
- A caption card overlapping the stack names the project, its result with a number and the services behind it
- A numbered index picks a project by hover, click or arrow keys, its line filling to show when the reel moves on
- Holds still while pointed at or focused, stops off screen and for reduced motion; previews take any screenshot
Best for: Design studios, dev shops and productized agencies whose best argument is the work they have already shipped.
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 pill above the headline, such as open booking slots. |
| title | string | - | The headline's first line. |
| accent | string | - | The headline's second line, in grey. |
| description | string | - | One or two lines under the headline: who it's for and what they get. |
| primaryCta | { label: string; href: string } | - | The solid button, with an arrow. |
| secondaryCta | { label: string; href: string } | - | Optional outlined button beside it. |
| footnote | string | - | Optional reassurance under the buttons. |
| projects | ShowcaseProject[] | - | The work: name, outcome, services, device (browser, phone or tablet), preview (a ReactNode such as a tall screenshot), and optional address, surfaceClassName and href. Three or more. |
| caseStudyLabel | string | "Case study" | The link in the caption, shown for projects with an href. |
| rating | { score: string; label: string } | - | Optional score and its source, under the reel. |
| clients | { name: string; icon: ComponentType }[] | - | Optional client wordmarks beside the rating. |
| 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 Agency Hero With Project Showcase Reel free to use?
Yes. Agency Hero With Project Showcase Reel is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Agency Hero With Project Showcase Reel 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 Agency Hero With Project Showcase Reel in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Agency Hero With Project Showcase Reel need installed?
motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Agency Hero With Project Showcase Reel 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.