Does Hero Statement work with Next.js?

Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.

Can I change the copy and colours?

Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Hero Statement

A single statement that lights up word by word as you scroll, with a spinning scroll badge.

Type: Hero section
Styles: Minimal, Dark
Licence: Charcoal UI Pro

About Hero Statement

Hero Statement is a single statement that lights up word by word as you scroll, with a spinning scroll badge and soft smoke behind it.

It is a full-width hero section for React and Tailwind CSS 4, in a minimal and dark style. Preview it at any width above, then install it with one command.

When to use Hero Statement

Mission-led brands.
Agency and studio homepages.
Manifestos and launches.
Editorial sites.

How it is built

Scroll Text maps each word's brightness to scroll progress, Circular Text spins the badge and Smoke drifts behind.

It is composed from Scroll Text, Circular Text, Smoke, so installing it also installs those components, and you can restyle each one the same way you would on its own.

Goes well with Hero Statement

Hero Statement is part of a full template, so you can see it in a finished page.

Parallel template: Movement is the message.
Hero Ember: A dark React hero section with drifting embers, an announcement pill and two CTAs
Hero Split: A split React hero: copy on the left, a live product window with stats and a chart
Hero Rotating: A React hero with a rotating headline word, email capture and avatar proof
Hero Terminal: A developer React hero with light beams on a grid and a typing terminal
Scroll Text: React scroll text: words light up one by one as the paragraph scrolls by
Circular Text: React circular text running around a turning circle, faster on hover
Smoke: A slow React smoke background: blurred plumes drifting over dark sections, CSS only

Install Hero Statement

npx shadcn@latest add @charcoal/hero-scroll-text

Hero Statement is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.

Frequently asked questions

Does Hero Statement work with Next.js?: Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
Can I change the copy and colours?: Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Built from

Scroll Text: Words light up one by one as the paragraph scrolls through the viewport.
Circular Text: Text running around a slowly turning circle, with a slot in the middle. It speeds up on hover.
Smoke: Slow, blurred smoke plumes drifting over charcoal. Pure CSS transforms, so it stays cheap.

Hero Statement as Markdown