HeroSection

A landing page hero that renders your own headline, description, actions, command line and media in a centered, split or minimal layout, or, without a title, one of three designed full-screen samples.

When to use

• The first section of a landing page, with your own copy: pass title and the layout you want.
• centered for a headline-led page, split when you have a product visual for the right side (media), minimal for type only.
• Not for a page-level header inside the app: use PageHeader.
• Not for a closing call to action lower on the page: use CtaSection.

Usage

import { HeroSection } from "@/components/iris/blocks/hero-section/hero-section";

h(HeroSection, {
  variant: "split",
  title: "Deep search for your Mac",
  description: "Moria reads file names, the text inside documents, PDFs, code and images into its own local index.",
  announcement: { label: "Agents can search it too, over MCP", href: "/changelog" },
  primaryAction: { label: "Download for Mac", href: "/download" },
  secondaryAction: { label: "See the query operators", doneLabel: "Opening the docs" },
  install: [{ label: "mcp", command: "moria mcp" }],
  meta: ["Requires macOS 26", "0 bytes to the cloud"],
  media: h(SearchPreview),
});

Props

Prop	Type	Default	Description
variant	"centered" | "split" | "minimal"	"centered"	Layout for your content. Without title it picks a designed sample: centered is HeroLumen, split is HeroRelay, minimal is HeroCadence.
title	string	none	Your headline. When set, the hero renders your content (HeroContent) instead of a designed sample.
description	string	none	Supporting paragraph.
announcement	HeroAction | null	none	A small pill link above the headline.
primaryAction / secondaryAction	HeroAction | null	none	{ label, href?, onClick?, external?, doneLabel? }. With href it renders a link; with doneLabel and no href the button confirms in place for a moment.
install	{ label, command }[] | null	none	Commands to copy; the first is shown with a $ prompt and a copy button.
media	ReactNode	none	A visual beside your content in the split layout.
meta	string[]	none	Small facts under the content, such as version and requirements.
highlight	string	none	Kept for compatibility; highlighted phrases render as plain text.
animateIn	boolean	true	Plays the staggered entrance once on mount.
className	string	none	Extra class on the section.

Notes

• With your own title the hero keeps its natural height; the designed samples fill one full screen (100svh).
• Prefer passing title. The designed samples carry their own sample products and copy (Entrolytics in HeroLumen, OpsisID in HeroRelay, Anasa in HeroCadence).
• Buttons are Button at size lg (40 px); link actions are 36 px.
• The HeroSectionBlock demo wrapper adds a floating variant switcher over the hero; use HeroSection directly in product pages.
• The section is a size container named hero, so the layout follows the space it has rather than the viewport. Headline and description use the display and body type tokens; the entrance is a stagger of rise and fade. Under reduced motion only the opacity fades.