Hero Section With Photo and Glass Cards

An AI agents hero on a sunlit photo: a Albert Sans headline in the open sky and a frosted rail of agents gliding across the bottom.

npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-merge

Features

A frosted rail of agent cards glides left every few seconds on a heavy, well-damped spring
The card in focus is largest and sharp, with a live status and a task bar that fills until the rail moves on
Outer cards shrink, fade and blur behind frosted ends, like a shallow depth of field
A full-bleed still photo, the person to the left and the copy set in the open sky
On phones the photo drops below the copy so the face stays clear; everything holds still for reduced motion

Best for: AI agent platforms and automation tools that sell work taken off a team's plate.

npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-merge

Then copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.

Prop	Type	Default	Description
title	string	-	The headline's first half, in white Albert Sans.
accent	string	-	The headline's second half, softer, on its own line on wide screens.
description	string	-	The line under the headline.
primaryCta	{ label: string; href: string }	-	The white button.
secondaryCta	{ label: string; href: string }	-	Optional near-black button.
facts	string[]	-	Short reassurances with checkmarks under the buttons.
agents	Agent[]	-	The agents on the rail: name, role, current task and icon. Six or more.
photo	{ src: string; alt: string }	-	A wide photo with open sky on its right half.
nav	{ brand: { name; icon }; links: Cta[]; cta: Cta }	-	Optional built-in navbar in this hero's style.
className	string	-	Extra classes for the section.

Is the Hero Section With Photo and Glass Cards free to use?

Yes. Hero Section With Photo and Glass Cards is free to copy into your own projects. Open the Code tab and paste the files into your app.

Does Hero Section With Photo and Glass Cards 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 Photo and Glass Cards 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 Photo and Glass Cards 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 Photo and Glass Cards 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.