Does Hero Gallery 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 Gallery

Agency hero: an oversized headline with a highlighted phrase over two counter-scrolling rows of work.

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

About Hero Gallery

Hero Gallery is the agency homepage: an oversized headline with a highlighted phrase over two rows of work scrolling in opposite directions.

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

When to use Hero Gallery

Design and creative agencies.
Photography and video studios.
Portfolios with lots of work.
Template and theme shops.

How it is built

Two marquees run in opposite directions and Highlight Text marks the key phrase as it enters view.

It is composed from Marquee, Highlight Text, Button, 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 Gallery

Hero Gallery is part of 4 full templates, so you can see it in a finished page.

Ashfall template: Work first. Words second.
Foundry template: Big agency work, small agency speed.
Atelier template: A gallery that happens to have a checkout.
Fernhouse template: Plants that arrive happy.
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
Marquee: A CSS-only infinite React marquee with faded edges and pause on hover
Highlight Text: React highlight text: a marker sweep, hand-drawn underline or scribbled circle on scroll
Button: An animated React button with six variants, spring press feedback and a width-stable loading state

Install Hero Gallery

npx shadcn@latest add @charcoal/hero-gallery

Hero Gallery 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 Gallery 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

Marquee: CSS-only infinite marquee with faded edges. It pauses on hover and stops for reduced motion.
Highlight Text: Marks a phrase as it scrolls into view: a marker sweep, a hand-drawn underline, or a scribbled circle.
Button: Six variants with spring press feedback. The loading state swaps the label for a spinner without changing width.

Hero Gallery as Markdown