Pricing Feature Card

Premium Interactions Component by Aidan Looker

Show PreviewBuy for $14
Pricing Feature Card

About Pricing Feature Card

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.