Skip to content

component

Pricing Feature Card

By Aidan Looker

Details

Summary

What is Pricing Feature Card?

Description

What is Pricing Feature Card? Pricing Feature Card is a premium, interaction-rich pricing component designed for SaaS, agency, and product sites. Each card features a 3D tilt effect, cursor-tracking glow, animated price transitions, and a flip interaction that reveals a back face with a description and clickable image gallery. A full-viewport lightbox opens on click with keyboard navigation, prev/next arrows, and smooth animated transitions. Ideal for landing pages, launch sites, and product pricing sections. Core Features Animated billing toggle with a spring-driven knob and auto-calculated savings badge 3D card tilt that follows the cursor with adjustable intensity and premium easing Radial cursor glow overlay with configurable opacity and accent-matched colour Flip-to-reveal card back with description, three-image gallery grid, and hover expand indicators Full-viewport lightbox with backdrop blur, keyboard navigation (arrow keys + Escape), prev/next arrows, and image counter Price count-up with blur-fade transition when switching billing periods Five polished themes (Neon, Dark, Light, Midnight, Warm) plus a fully custom colour mode Controls inside Framer Plans Plan name, subtitle, and badge text Monthly price, yearly price, and period label Featured toggle and badge visibility Features title, subtitle, and up to 14 feature items CTA button text and native Framer link Back description (textarea) Three responsive image slots for the back-face gallery Interactions Billing toggle (on/off) 3D tilt (on/off) with adjustable tilt angle (3–25 degrees) Cursor glow (on/off) with adjustable glow opacity Flip button visibility Flip animation speed (0.3–1.2s) Appearance Theme selector: Neon, Dark, Light, Midnight, Warm, Custom Layout: Desktop or Mobile (segmented control) Dot pattern background toggle Typography Heading font Price font Body / Features font CTA Button font Custom Theme Colors Background, Card BG, Accent, Text, Text Muted Border, CTA Fill, CTA Text Check / Badge BG, Check / Badge Text Toggle Knob Card Style Border radius (0–32px) Padding (16–48px) Gap (0–40px) Best use cases SaaS and startup landing pages that need a pricing section visitors actually interact with Agency and studio portfolio sites showcasing tiered service packages with visual proof Product launch pages where pricing needs to feel as premium as the product itself Membership and subscription platforms presenting plan comparisons with supporting imagery Built to convert, designed to impress. Drop it onto your canvas, customise from the panel, and publish — your pricing section is ready to perform. Questions or custom requests? We design and build custom Framer components. Get in touch at contact@teampixel.com.au .

Introduction

Interactive 3D pricing with card flip.

Rank history

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

120014001600179728/148/228/309/79/15
  • All · #7663