Dark Hero Section With Pixel Art

Near-black, a mark drawn in shifting orange glyphs, a big serif headline and a line to paste into your agent.

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

Features

The product's mark drawn in orange glyphs on a dim dot grid, shifting as a light sweeps round it
A large Newsreader serif headline on near-black
A white pill button and a copy-into-your-agent prompt
A thin announcement strip and a serif-wordmark navbar with soft pill links
Optional customer logos in white under the prompt

Best for: AI infrastructure, model and developer products that want to feel technical and editorial at once.

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
badge	string	-	Short line above the headline, beside an orange tile.
title	string	-	The serif headline.
description	string	-	The line under the headline.
primaryCta	{ label: string; href: string }	-	The white pill.
promptLabel	string	-	The label above the prompt box.
prompt	string	-	The line to copy into an agent.
clients	{ name: string; icon }[]	-	Customer logos in a left-aligned row under the agent prompt.
clientsLabel	string	-	The mono uppercase line above the logos.
nav	{ brand: { name; icon }; links: Cta[]; cta: Cta }	-	Optional built-in navbar in this hero's style.
announcement	string	-	Optional strip above the navbar.
stars	string	-	Optional star count in the navbar.
className	string	-	Extra classes for the section.

Is the Dark Hero Section With Pixel Art free to use?

Yes. Dark Hero Section With Pixel Art is free to copy into your own projects. Open the Code tab and paste the files into your app.

Does Dark Hero Section With Pixel Art 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 Dark Hero Section With Pixel Art in JavaScript instead of TypeScript?

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

What does Dark Hero Section With Pixel Art need installed?

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

Is Dark Hero Section With Pixel Art 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.