Metal call to action
Upgrade
Unlock the full system.
$96/ year
Every componentSource accessPriority support
Mugen Metal CTA
A premium upgrade surface built on a real-time WebGL metal shader. The primary action wears the metal ring and casts a live reflection onto the secondary button and the meta chips beside it — light that crosses from one DOM element to another.
Interaction Types
The metal ring animates continuously — one shared WebGL context drives every instance on the page
Neighbouring controls catch a mirrored reflection of the metal, cast across separate DOM elements
Both actions stay real buttons: focus rings, press feedback, and full keyboard access
How to use
'use client';
import { MugenMetalCta } from "@/components/mugen-metal-cta";
export default function Demo() {
return (
<MugenMetalCta
preset="silver"
title="Unlock the full system."
price="$96"
onAction={() => console.log("upgrade")}
/>
);
}Component Props
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Upgrade" | Mono eyebrow above the title |
| title | string | "Unlock the full system." | Headline copy |
| price | string | "$96" | Price figure |
| cadence | string | "/ year" | Billing cadence beside the price |
| action | string | "Upgrade to Pro" | Primary action label — the metal one |
| secondaryAction | string | "Compare plans" | Quiet companion action, also a reflection target |
| features | string[] | DEFAULT_FEATURES | Meta chips under the actions; each one is a reflection target |
| preset | "chromatic" | "silver" | "gold" | "silver" | Metal palette |
| strength | number | 1 | Effect intensity from 0 to 1 |
| onAction | () => void | — | Primary action callback |
| onSecondaryAction | () => void | — | Secondary action callback |
| disabled | boolean | false | Disables both actions |