Pricing Cascade is a premium pricing table component that arranges plan cards in a distinctive staggered layout, creating natural visual hierarchy. Each card features animated price transitions, a segmented billing toggle, and a bold CTA-first structure with an editorial "Features" divider. Ideal for SaaS landing pages, agency sites, product launches, and any project where pricing needs to feel as refined as the product itself.
Staggered cascade layout — Cards step down diagonally, drawing the eye from left to right and highlighting your recommended tier naturally.
Animated billing toggle — A segmented tab control switches between monthly and yearly pricing with smooth count-up price animations and a crossed-out original price.
CTA-first card structure — The call-to-action button sits above the feature list, following high-converting editorial pricing patterns.
4 built-in themes + custom — Dark, Light, Midnight, and Warm palettes ship ready to use. Switch to Custom for full control over every color.
3 independent font controls — Set separate typefaces for headings, body text, and prices to match your brand typography exactly.
Featured card treatment — Mark any plan as featured to activate an accent strip, ambient glow, gradient badge, and solid CTA — all configurable.
Plan name, subtitle, monthly and yearly price, currency, and period label
Feature list (array of strings per plan)
CTA label and CTA link
Featured toggle with customisable badge text
Billing toggle (show/hide)
Theme (Dark, Light, Midnight, Warm, Custom)
Heading Font, Body Font, Price Font
Layout (Desktop, Tablet, Mobile)
Background, Card BG, Text Primary, Text Secondary, Accent, Border
Corner radius
Stagger depth (vertical offset per card, set to 0 for flat)
Shadow intensity
Hover lift
Accent strip width
CTA style (Solid / Outline) with optional text color override
Gradient start and end colors
Badge text color
Staggered entrance with blur-in effect
Price count-up on billing toggle
Animation speed (Slow, Normal, Fast)
SaaS pricing pages — Present tiered plans with visual hierarchy that guides visitors toward your target plan.
Agency and studio sites — Showcase service packages with the editorial polish clients expect.
Product launches — Highlight introductory pricing with animated transitions that create urgency and focus.
Membership platforms — Display membership tiers with clear feature differentiation and prominent CTAs.
We design and build custom Framer components. Get in touch at contact@teampixel.com.au.
Aidan Looker
