Hero Section With Image Tracking Tags
A matching hero over a crowd photo: investors lock on one after another, with lines drawn out to the founder.
Features
- A crowd photo with people tagged at their real positions, kept aligned at every size
- Investors lock on in turn: a reticle closes in, then a card slides out with their role and match score
- Lines draw out from the founder to each match, with a pulse running along them
- A frosted card lists the current matches, best first, and follows the tags live
- A still photo: the tags and connection lines carry the motion
- A light two-tone IBM Plex headline; everything holds still for reduced motion
Best for: Matching networks, marketplaces and recruiting or investor platforms that find the right people in a crowd.
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's first half, in near-black. |
| accent | string | - | The headline's second half, in light grey. |
| description | string | - | The pitch beside the headline. |
| primaryCta | { label: string; href: string } | - | The indigo button. |
| secondaryCta | { label: string; href: string } | - | Optional hairline button. |
| facts | string[] | - | Short mono facts under the buttons. |
| round | string | - | The founder's round, at the top of the matches card. |
| scene | CrowdScene | - | The photo (src, alt, pixel size), the founder and the investors, each with their box in the photo's pixels, a name, a role and a score. |
| 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 Hero Section With Image Tracking Tags free to use?
Yes. Hero Section With Image Tracking Tags is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Hero Section With Image Tracking Tags 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 Hero Section With Image Tracking Tags in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Hero Section With Image Tracking Tags need installed?
motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Hero Section With Image Tracking Tags 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.