Free React Hero Section Components

The hero is the highest-stakes section you will ship, and this is the deepest category in the library, thirty-plus openings with genuinely different mechanics. Editorial structures (manifesto, letterpress, editorial index, question hero), product-led frames (product frame, split proof, metric wall, changelog), atmospheric builds (aurora, eclipse, ink bloom, glassworks), and engineered reveals (frame assembly, lock chamber, orrery, stage rig). Each one states who it is for, so you can match the opening to the argument your page is making.

33 components · MIT licensed · installable with the shadcn CLI

Aperture Hero

A camera iris of hairline blades opens once to reveal the hero, leaving a faint aperture ring behind the copy, an optical-instrument entrance for React and Tailwind sites.

Depth Field Hero

A hero with true parallax depth, grid, contour, and content layers drift at different rates against the pointer, like looking into a drafting table through glass.

Eclipse Hero

A graphite disk slides into alignment and the corona blooms, a totality entrance where the headline surfaces in eclipse light. React hero section themed by Tailwind tokens.

Frame Assembly Hero

The blueprint sheet builds itself, corner ticks fly in, frame hairlines draw, the title block stamps, then content settles into the finished drawing. Construction as choreography, once.

Glassworks Hero

A molten gather glows at the pipe, is shaped into the product panel, and anneals, primary heat decaying to graphite calm on a pyrometer countdown. A glassblowing entrance for React and Tailwind.

Glyph Storm Hero

A storm of stray characters blows across the viewport and condenses into the headline, canvas dust becomes DOM type, then the wind dies completely.

Heliostat Hero

A hairline mirror tilts on its mast and folds one beam of light onto the page, illuminating the copy as it arrives, a directed-light entrance for React and Tailwind heroes.

Ink Bloom Hero

Ink blooms across the page on arrival, organic blots spread from seed points and the headline surfaces through them, like type developing on wet paper.

Interlocking Hero

A signal-box lever frame sets the route, points swing, the signal clears, one primary path lights, and content arrives in route order. A railway interlocking entrance for React and Tailwind.

Letterpress Hero

A platen bar sweeps once and the headline stamps into the sheet with ink squash, sealed by a primary maker's chop, a letterpress entrance for React and Tailwind landing pages.

Lock Chamber Hero

The hero rises like a vessel in a canal lock, gates seal, the chamber fills, and a token-primary waterline carries the content deck to the upper level. A hydraulic entrance for React and Tailwind.

Loft Lines Hero

Hull station curves draw flat on the sheet, then loft into a 3D wireframe with one primary waterline sweeping bow to stern, naval drafting as a hero entrance for React and Tailwind.

Map Fold Hero

The hero arrives as a folded field map opening in two moves, crease hairlines remaining as designed structure. A CSS 3D unfolding entrance for React and Tailwind landing pages.

Orrery Hero

Planet armatures sweep their hairline rings at period-true rates into one dated conjunction, then park, a mechanical ephemeris entrance for React and Tailwind landing pages.

Portal Arrival Hero

The page arrives through a portal, a small framed scene scales open to full bleed while headline layers fly past the camera. One cinematic entrance, then calm.

Projection Booth Hero

Film threads the projector, the ribbon snakes reel to reel through rollers and gate, the lamp swells, and a light cone installs the media panel as a held first frame. React and Tailwind tokens.

Signal Scan Hero

A scan band sweeps down the hero once, developing content in its wake as phosphor persistence, an instrument read-out entrance that decays to stillness and provably self-terminates.

Stage Rig Hero

A theatre fly system lowers the page into place, content flats descend on hairline lift lines as counterweights rise, and a cue lamp certifies GO. A rigged entrance for React and Tailwind.

Survey Sweep Hero

A surveyor's sweep line rotates once around the hero's datum point, measuring content in as it passes, each element lands with a coordinate stamp, then the instrument goes quiet.

Tide Lines Hero

Layered sine tide lines flow behind the headline like a gauge chart of the sea, one primary line breaks the pattern with a swell. A calm loop that genuinely stills off-viewport.

Aurora Hero

Hero section with a drafting-grid backdrop, slow accent-tinted aurora, and a staggered editorial reveal. Left-aligned, themeable, reduced-motion safe.

Blueprint Hero

Hero where the headline is annotated like a technical drawing, SVG dimension lines and mono measurement labels draw themselves around the display type.

Changelog Hero

What-shipped-this-week hero for dev tools, headline beside a live-feeling release feed panel of mono version tags and dated rows, one release highlighted. Momentum as the pitch.

Countdown Launch Hero

Launch-window hero, a tabular countdown ticks toward the date under restrained display type, with a notify field as the single action. Anticipation without carnival.

Editorial Index Hero

A magazine-cover hero, oversized masthead type beside a numbered index of destinations, each row a drawn hairline that extends on hover. Navigation as the artwork.

Intent Prompt Hero

Hero built around a single prompt field, the placeholder cycles through real use-cases as ghost text, and the submit action is the page's one accent. Conversion by invitation.

Ledger Hero

Editorial hero over a live ledger strip, transaction rows tick in and reconcile beneath the headline, numbers settling one by one. The product working, as atmosphere.

Manifesto Hero

Long-form conviction hero, a multi-line manifesto set large, each line rising from its own mask, key phrases underlined in primary ink, one quiet CTA at the end. Belief before features.

Metric Wall Hero

Hero whose backdrop is a faint wall of the product's own numbers, a mono grid of stats at whisper alpha with one column resolving to full ink, the headline set over the evidence.

Product Frame Hero

Split hero where the product shot is a drafted frame, a structural UI mock built from tokens that tilts gently toward the pointer, with floating annotation chips.

Question Hero

Conversion hero that opens with a question, two answer-path buttons preview their destinations in a mirrored panel below on hover or focus. The page begins by listening.

Split Proof Hero

Split hero with a vertical proof rail, stacked metric and quote cards slide in beside the headline and drift subtly on scroll. Evidence instead of an illustration.

Terminal Hero

Split hero where a terminal card runs your product's happy path, typed command, streamed result rows, settled status line. Copy left, proof-of-work right.