Crucible CTA
The closing call-to-action band: headline and subhead over a contained, subtle Ember rise, an Anvil-struck primary CTA beside a quiet secondary link, and a one-shot Sparks burst fired the first time the band scrolls into view (IntersectionObserver, once, skipped under reduced motion). All copy and both effects are prop-controlled.
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/crucible-ctaManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| headline | React.ReactNode | "The floor is hot. Pour something." | Band headline, rendered inside the <h2>. |
| subhead | React.ReactNode | "Start free with 200 pours a month — no card, no cooldown." | Supporting line under the headline. |
| primaryCta | CrucibleCtaAction | { label: "Fire the forge" } | Primary call to action, rendered as the Anvil button. |
| secondaryCta | CrucibleCtaAction | { label: "Talk to the foundry", href: "#" } | Secondary call to action, rendered as a quiet link (or button when no href is given). |
| embers | boolean | true | Render the subtle Ember background rising inside the band. |
| burst | boolean | true | Fire a single Sparks burst the first time the band scrolls into view. Skipped entirely under reduced motion. |
| 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.