Aurora Shimmer
Buttons
Holographic Pricing Stack
A layered glass pricing stack with an animated edge scan and morphing heights.
Customize
ADVERT
Overview
Holographic Pricing Stack presents three pricing cards in a stacked, glassy layout with depth layering and holographic highlights. Hover to feel the tilt and glow, then toggle billing to watch the cards morph smoothly between monthly and annual plans. It is ideal for premium pricing sections, product tiers, and commerce moments that need visual drama without sacrificing clarity.
Props
Use the props below to customise the holographic pricing stack in your own React application.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| title | string | No | "Holographic pricing for modern launches" | Headline text shown above the pricing stack. |
| accentText | string | No | "Toggle billing to see the stack morph in depth." | Supporting line beneath the title, useful for a short explanation. |
| plans | { id: string; name: string; badge: string; description: string; priceMonthly: string; priceAnnual: string; features: string[]; isFeatured?: boolean }[] | No | [{ id: "signal", name: "Signal", badge: "Starter", description: "Essential telemetry for early teams.", priceMonthly: "$19", priceAnnual: "$190", features: ["Live dashboards", "Basic automations", "Email support"] }] | Array of plan definitions rendered in the stacked cards. |
| billingInterval | "monthly" | "annual" | No | "monthly" | Optional controlled billing interval. When set, the toggle reflects this value. |
| onBillingChange | (value: 'monthly' | 'annual') => void | No | undefined | Callback fired when the billing toggle is clicked. |
| colors | string[] | No | ["#020617", "#38bdf8", "#a855f7"] | Array of up to three hex colors used for the backdrop and holographic glow. |
| intensity | number | No | 0.9 | Overall glow strength for the cards and background highlights. |
| tilt | number | No | 1 | How much the pricing stack tilts in 3D as you move the pointer. |
| parallax | number | No | 1 | How much depth and parallax offset is applied across the card stack. |
| scanSpeed | number | No | 1 | Speed of the animated edge scan highlight on the cards. |
| minHeight | number | string | No | 460 | Minimum height for the component container. Accepts a number (pixels) or any valid CSS height string. |
| className | string | No | undefined | Optional custom class name merged onto the root container for layout tweaks. |
Related React components
More components from the same category or sharing similar tags.
