Skip to content

component

Price 3D Card

By Aidan Looker

Details

Summary

What is Price 3D Card?

Description

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

Introduction

Interactive pricing cards with tilt.

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600171628/148/228/309/79/15
  • All · #7162