Hero Landscape
A full-bleed dusk landscape behind an AI prompt: a beam lights the box while it thinks, a liquid-metal send button and a thinking orb.
- Type: Hero section
- Styles: Dark, Gradient
- Licence: Charcoal UI Pro
About Hero Landscape
Hero Landscape sets an AI prompt over a full-bleed dusk landscape: a beam lights the box while it thinks, with a liquid-metal send button and a thinking orb.
It is a full-width hero section for React and Tailwind CSS 4, in a dark and gradient style. Preview it at any width above, then install it with one command.
When to use Hero Landscape
- AI assistants and chat products.
- Generative image and video tools.
- Search and answer engines.
- Premium AI launches.
How it is built
Border Beam, Liquid Metal, Thinking Orb and Shimmer Text are composed into one prompt; the thinking state is a prop you drive from your stream.
It is composed from Border Beam, Liquid Metal, Thinking Orb, Shimmer Text, 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 Landscape
Hero Landscape is part of 3 full templates, so you can see it in a finished page.
- Lattice template: Generate, keep, sell.
- Timberline template: Cabins within three hours of the city.
- Seedling template: Raise money for something that grows.
- 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
- Border Beam: A React border beam: coloured light riding the border of cards, inputs and buttons
- Liquid Metal: A React liquid metal ring for buttons and badges, in chromatic, silver or gold
- Thinking Orb: A React AI thinking orb with nine motions for nine kinds of busy
- Shimmer Text: React shimmer text: a band of light sweeps across, for loading and thinking states
Install Hero Landscape
npx shadcn@latest add @charcoal/hero-landscapeHero Landscape 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 Landscape 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
- Border Beam: A beam of coloured light that rides the border of any card, input or button, with a soft glow outside and an optional wash inside. Nine palettes, rotate or pulse.
- Liquid Metal: A ring of moving liquid metal around buttons, icons and badges: a wandering halo, a pool of reflected light, and a highlight that swings towards the cursor. Chromatic, silver and gold, plus metal text.
- Thinking Orb: A sphere of dots that shows an AI is busy, with nine motions for nine kinds of busy: working, searching, solving, listening, connecting, composing, breathing, weaving and shaping. States morph into each other; dots can lean towards the cursor.
- Shimmer Text: A band of light sweeps across text. Good for loading or thinking states.