Aurora Pricing
An interactive 3-tier pricing block with dynamic aurora borealis light curtains, spring-animated Monthly/Annual toggle switch, glowing featured Pro card, and plan select buttons.
- 5.6 KB .bexode
- 9 live inputs
- Responsive fit Layout
Use it
The code follows your customizations. Install with npm i exodeui.
import { ExodeUICanvas } from 'exodeui';
// aurora-pricing.bexode goes in /public (download it below)
export function AuroraPricing() {
return (
<ExodeUICanvas
src="/aurora-pricing.bexode"
fit="Layout" // responsive: redraws at any container size
autoPlay
interactive
onTrigger={(name) => {
// fires: 'starterSelect', 'proSelect', 'enterpriseSelect'
}}
style={{ width: '100%', height: 560 }}
/>
);
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
headline | Text | Simple, Transparent Pricing | — |
sub | Text | Build and deploy living motion without limits. Scale as your product grows. | — |
starterPrice | Text | $0 | — |
proPrice | Text | $29 | — |
enterprisePrice | Text | Custom | — |
speed | Number | 1 | 0.1 – 4 |
accent | Text | #8b5cf6 | hex colour |
accent2 | Text | #06b6d4 | hex colour |
bg | Text | #08090d | hex colour |
Events (via onTrigger): starterSelectproSelectenterpriseSelect