AI Hero Section With 3D Image

An AI answers hero in Google Sans: the product answers live on a cobalt glass panel, every claim cited and its source card lighting up.

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

Features

The product as the hero: a question types itself, Lucent searches, the answer streams in
A numbered citation chip after every claim, each lighting up its source card in the rail
A sources-read counter, a pulsing skeleton while searching and follow-up questions after
Headline left with the pitch and buttons right, all on one width with the navbar
Still cobalt glass art contained inside the product panel
Holds a finished answer for reduced motion

Best for: AI assistants, enterprise search and knowledge tools that need to show answers people can trust.

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
eyebrow	string	-	Optional small uppercase line above the headline.
title	string	-	The headline.
accent	string	-	Optional last word or two in cobalt.
description	string	-	The pitch beside the headline.
primaryCta	{ label: string; href: string }	-	The main button.
secondaryCta	{ label: string; href: string }	-	Optional second button.
reassurance	string	-	Optional trust line under the buttons.
answers	{ question; checked; answer: { text; cite }[]; sources; followUps }[]	-	The questions the window plays through, each with its cited answer, sources and follow-ups.
placeholder	string	-	What the empty ask bar says before a question types in.
art	string	-	Optional still render shown inside the product panel.
clients	Brand[]	-	Optional client logos (name and icon) in one row under the product.
clientsLabel	string	-	Optional line above the client logos.
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 AI Hero Section With 3D Image free to use?

Yes. AI Hero Section With 3D Image is free to copy into your own projects. Open the Code tab and paste the files into your app.

Does AI Hero Section With 3D Image 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 AI Hero Section With 3D Image in JavaScript instead of TypeScript?

Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.

What does AI Hero Section With 3D Image need installed?

motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.

Is AI Hero Section With 3D Image 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.