Pricing Card Cascade

What is Pricing Cascade?

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.

Core Features

• 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.

Controls inside Framer

Plans

• 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

Essentials

• Billing toggle (show/hide)

• Theme (Dark, Light, Midnight, Warm, Custom)

• Heading Font, Body Font, Price Font

• Layout (Desktop, Tablet, Mobile)

Custom Colors (visible when theme is Custom)

• Background, Card BG, Text Primary, Text Secondary, Accent, Border

Card Style

• 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

Badge Style

• Gradient start and end colors

• Badge text color

Animation

• Staggered entrance with blur-in effect

• Price count-up on billing toggle

• Animation speed (Slow, Normal, Fast)

Best use cases

• 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.

Questions or custom requests?

We design and build custom Framer components. Get in touch at contact@teampixel.com.au.