Card Grabber

Card Grabber

About Card Grabber

What is Card Grabber?

Card Grabber is a physics-driven interactive card stack that lets visitors grab the top card and fling it away in any direction to reveal the next card beneath. Built for feature showcases, service breakdowns, and product highlights, it turns static content into a tactile browsing experience that encourages exploration. Ships with a dark neon theme, 24 premium line icons, and spring-animated transitions.

Core Features

  • Grab-and-fling interaction with free-direction drag and physics-based dismiss

  • Spring-animated card transitions with smooth scale, position, and opacity interpolation

  • 24 built-in SVG line icons with optional custom image upload per card

  • Cursor-tracking radial glow that follows mouse position on the top card

  • Accent-tinted icon container with subtle float animation

  • Glassmorphic stat badge for key metrics or proof points

  • Accent stripe, ambient breathing glow, and hover border glow

  • Dark neon color theme with full accent color customisation

  • Deterministic stack scatter for a natural pile appearance

Controls inside Framer

Features

  • Icon (24 SVG options: Chart, Zap, Shield, Globe, Refresh, Code, Layers, Database, Lock, Rocket, Target, Puzzle, Lightbulb, Cloud, Bell, Settings, Users, Mail, Camera, Compass, Heart, Star, Phone, Headphones)

  • Custom Icon (upload an image to replace the SVG icon)

  • Title

  • Description

  • Stat Badge (leave empty to hide)

  • CTA Text (leave empty to hide the link)

  • CTA Link

Card Dimensions

  • Card Width

  • Card Height

Colors

  • Card Background

  • Accent

  • Text

  • Muted Text

  • Border

Card Style

  • Border Radius

  • Shadow Intensity

  • Accent Stripe toggle

  • Stat Badge toggle

  • Stack Scatter

Animation

  • Fling Speed (Fast, Medium, Slow)

  • Fling Distance threshold

  • Easing (Smooth, Snappy, Bouncy)

Effects

  • Cursor Glow toggle

  • Glow Intensity

Typography

  • Font

Best use cases

  • Feature or service showcase on SaaS landing pages

  • Product highlight carousels for portfolio and agency sites

  • Interactive pricing or plan comparison breakdowns

  • Engagement-driven content sections that reward user interaction

Turn passive scrolling into active exploration. Card Grabber gives your visitors a reason to interact with every feature you ship.

Questions or custom requests?

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