Price 3D Card

What is Price 3D Card?

Price 3D Card is a fully interactive pricing component with smooth 3D tilt on hover, a flip animation between monthly and yearly billing, and an automatic savings badge. Customise up to four pricing tiers with features, tooltips, icons, and call-to-action buttons. Ideal for SaaS landing pages, product pricing sections, agency service pages, and membership portals.

Core Features

• Interactive 3D tilt effect that follows the cursor, with adjustable sensitivity and spring physics

• Smooth card flip animation to toggle between monthly and yearly pricing with staggered delays

• Automatic savings badge that calculates and displays the percentage saved on yearly billing

• Customisable "Most Popular" badge with gradient styling and subtle glow pulse animation

• Feature tooltips that appear on hover for information-rich feature lists

• 14 supported currencies including USD, EUR, GBP, JPY, AUD, CAD, CHF, NZD, ZAR, SEK, INR, BRL, PLN, and KRW

• Four built-in theme presets: Glass, Dark, Gradient, and fully Custom

Controls inside Framer

Plans

• Plan name and subtitle

• Monthly price and yearly total (up to 10,000)

• Built-in or custom icon per plan

• "Most Popular" badge toggle

• CTA button text and link

• Feature list with optional tooltip for each item

Theme and Currency

• Theme preset: Glass, Dark, Gradient, Custom

• Currency symbol selector (14 currencies)

• Billing period label (e.g. "month", "year")

• Background colour

Toggle

• Show or hide the monthly/yearly toggle

• Custom labels for monthly and yearly

• Savings badge visibility

Card Style

• Corner radius

• Glow intensity

• Tilt sensitivity

• Flip animation speed

Typography

• Heading font

• Price font

• Body font

• Button font

Custom Colours (visible when theme is set to Custom)

• Accent, glow, glow alt, card background

• Primary and secondary text

• CTA background and text

• Badge gradient start and end

• Toggle background, thumb, and border

• Tooltip background

Best use cases

• SaaS and software product pricing pages with monthly and yearly billing

• Agency and freelancer service tier comparisons

• Membership and subscription-based platforms

• Product landing pages that need a premium, interactive pricing section

Build trust and drive conversions with pricing cards that feel premium. Drop in, configure, and ship.

Questions or custom requests?

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