Forge Hero
The flagship landing hero: logo + nav header, a gilded headline and subhead over the Molten shader pour, and an Anvil-struck primary CTA beside a quiet secondary link. Every content knob is a prop — the Forgewright copy is only the default — and the background node is fully swappable.
motionpro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/forge-heroManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| headline | React.ReactNode | Ship <Gild>metal-grade</Gild> software | Hero headline, rendered inside the <h1>. Accepts a node so a key word can carry a treatment (the default wraps "metal-grade" in Gild). |
| subhead | React.ReactNode | the Forgewright hero subhead | Supporting line under the headline. |
| primaryCta | ForgeHeroCta | { label: "Fire the forge" } | Primary call to action, rendered as the Anvil button. |
| secondaryCta | ForgeHeroCta | { label: "Read the docs", href: "#" } | Secondary call to action, rendered as a quiet link (or button when no href is given). |
| navItems | ForgeHeroNavItem[] | Product · Foundry · Pricing · Docs · Changelog | Header navigation links. |
| logo | React.ReactNode | the Forgewright anvil-struck "F" mark + wordmark | Logo / wordmark node shown at the left of the header row. |
| background | React.ReactNode | <Molten /> | Background node rendered behind the content. It should position itself absolute inset-0 -z-10 (every Crucible background does). Pass null for a plain dark hero. |
| className | string | Extra classes for the <section> root. | |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"section">, "children"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.