React Hero Section with an Eclipse Glow Background

Pro

A dark launch hero built around one image: a ring of light around a black disc, like a solar eclipse, glowing behind the copy. Above the headline sits your brand mark and a New badge; below it, a white button, a ghost button with a play icon and a row of greyscale logos.

Hero Section With Eclipse Glow block preview

An image that frames the headline

Hero Section with Eclipse Glow is a React and Tailwind CSS hero section for AI and developer products that places an eclipse style glow photograph behind centred copy, with an announcement badge and two calls to action. It runs in Next.js or any React app.

The ring of light does compositional work: it draws the eye to the middle of the screen, which is exactly where the headline sits. A radial scrim darkens the area behind the text and the image is dimmed slightly and scaled up, so the glow frames the words rather than competing with them.

It is a static block. There is no canvas, shader or entrance animation, and nothing moves except colour on hover, which makes it fast and predictable on any device.

From background to buttons

Eclipse photograph

A cover image scaled to 112 percent and dimmed to 82 percent brightness, with a 12 percent black layer and a radial scrim behind the copy.

Brand and badge

A sparkles icon with your brand name, then a pill with a short tag such as New and an announcement line.

Uppercase headline

Two lines split on a newline, uppercase and sized with container query units so it grows with the space available.

Paired buttons

A solid white primary and a translucent ghost secondary with a play icon, suited to a product tour video.

Logo row

Greyscale wordmarks at 40 percent opacity that regain colour on hover.

Who this hero suits

Use it when

AI, agent and automation products launching a new capability.
Dark sites that want one cinematic image rather than an illustration.
You have a product tour video to link from the secondary button.
You need a hero with no JavaScript cost beyond rendering.

Skip it when

Light themed sites; the block is drawn for dark only.
You cannot edit the file. The logo row is hardcoded, as explained below.
Your announcement is not new. An old New badge undermines trust.
You want an animated or interactive background.

Replace the logos before anything else

The trust row contains real company wordmarks drawn as inline SVG in the source, and there is no prop for them. Shipping the block unchanged suggests those companies use your product. Open the file, delete the hardcoded logos and render your own customers, or remove the row and its trustLabel entirely.

Everything else is a prop: brandName, badgeTag, badgeText, headline, subtext, both calls to action and backgroundImage. Any dark image with a bright centre works as the backdrop; keep the bright area behind where the headline sits.

npx wensity@latest add hero-section-with-eclipse-glow --type block

page.tsx

import { EclipticHero } from "@/components/wensity/blocks/hero-section-with-eclipse-glow";

export default function Page() {
  return (
    <EclipticHero
      brandName="Relay"
      badgeTag="Beta"
      badgeText="Agents that file their own tickets"
      headline={"Support that\nresolves itself"}
      subtext="Relay reads the queue, fixes what it can and hands the rest to your team with context."
      primaryCta={{ label: "Join the beta", href: "/beta" }}
      secondaryCta={{ label: "Watch the demo", href: "/demo" }}
      backgroundImage="/hero/relay-glow.webp"
    />
  );
}

Props

Prop	Type	Default	Description
`backgroundImage`	string	-	Cover image behind the hero. A dark frame with light in the middle suits the scrim.
`badgeTag / badgeText`	string	"New" / "Introducing Continuous Reasoning Mode"	The short tag and line in the announcement pill.
`headline`	string	"Build Agents That\nActually Finish The Job"	Uppercase title. Use a newline for the break.
`brandName`	string	"Vantage"	Shown beside the sparkles icon above the badge.
`trustLabel`	string	-	Line above the logo row. Remove it along with the hardcoded logos if you have none.
`secondaryCta`	{ label: string; href: string }	Watch Product Tour	Ghost button with a play icon. Point it at a video or demo.

Facts from the source

Real brands in the logo row

Five well known company wordmarks are hardcoded. They are sample content only and must be replaced; there is no prop to do it.

One image request

The eclipse is a single WebP from the Wensity asset host by default. Host your own copy and preload it if the hero is your largest paint.

Static and calm

Only hover colour changes animate, so the block needs no reduced motion handling.

Icons

The sparkles and play icons come from @tabler/icons-react, which installs with the block.

Dark by design

The section sits on #050208 with white type and has no light variant. On a light site, give it a hard edge or place it under a dark navbar so the switch looks intentional.

Block details

Hero Section With Eclipse Glow

Category: Hero Sections
Renders: CSS only. Paints as soon as the stylesheet arrives
Theme: Fixed dark surface. No light variant
Dependencies: @tabler/icons-reactclsxtailwind-merge
Source: 221 lines, 25 KB in one file
Install: wensity add hero-section-with-eclipse-glow --type block
Tags: dark, ai, eclipse, badge, logo-wall, centered, trust
Last updated: October 13, 2026