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.
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
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
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)
Theme selector: Neon, Dark, Light, Midnight, Warm, Custom
Layout: Desktop or Mobile (segmented control)
Dot pattern background toggle
Heading font
Price font
Body / Features font
CTA Button font
Background, Card BG, Accent, Text, Text Muted
Border, CTA Fill, CTA Text
Check / Badge BG, Check / Badge Text
Toggle Knob
Border radius (0–32px)
Padding (16–48px)
Gap (0–40px)
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
Drop it onto your canvas, customise from the panel, and publish — your pricing section is ready to perform.
We design and build custom Framer components. Get in touch at contact@teampixel.com.au.
Aidan Looker
