Hero Section With Pixel Glow Background

A planet of glowing square pixels rises behind a dark analytics hero, with live numbers drifting over it.

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

Features

A planet of square pixels rises from the bottom, its rim glowing and breathing
Every pixel shimmers on its own phase; drawn on one canvas at 24fps, paused off screen
Live analytics chips drift over the glow, with a visitor count that keeps climbing
A two-tone Host Grotesk headline, white and softer white
One still frame for reduced motion

Best for: Analytics, data and AI products that want a dark, glowing first screen with their numbers alive on it.

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, in white.
accent	string	-	The headline's second half, in a softer white.
description	string	-	The line under the headline.
primaryCta	{ label: string; href: string }	-	The white button.
secondaryCta	{ label: string; href: string }	-	Optional frosted button.
facts	string[]	-	Short facts under the buttons.
chips	LiveChipsContent	-	The visitors, revenue and top-source chips over the planet.
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 Pixel Glow Background free to use?

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

Does Hero Section With Pixel Glow Background 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 Pixel Glow Background 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 Pixel Glow Background 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 Pixel Glow Background 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.