Info Cards 3D

3D flip cards with hover effects. by Aidan Looker

Show PreviewBuy for $9
Info Cards 3D

About Info Cards 3D

What is Info Cards 3D?

Info Cards 3D is a configurable grid of interactive service cards built for showcasing offerings, features, or capabilities on any Framer site. Each card features a 3D flip interaction triggered by a dedicated button, a cursor-tracked radial colour reveal on hover, and staggered back-face content animations. Ideal for agency service pages, SaaS feature sections, portfolio highlights, and product overviews.

Core Features

  • 3D Y-axis card flip with spring physics, triggered by a dedicated plus/close button

  • Cursor-tracked radial circle reveal that expands from the exact hover entry point

  • Staggered back-face content animation with title, description, and slide-fill CTA button

  • 30 built-in line-art icons plus custom image upload support for complete brand flexibility

  • Floating icon animation with decorative sparkle accents on the front face

  • Responsive grid layout with configurable columns (1-6), gap, and left/center/right alignment

Controls inside Framer

Cards

  • Icon — choose from 30 presets or upload a custom image

  • Title — front-face heading text

  • Description — back-face body copy

  • Button Text — CTA label on the back face

  • Button Link — native Framer link picker with full page/URL/section support

Layout

  • Columns — 1 to 6 column grid

  • Gap — spacing between cards

  • Alignment — left, center, or right positioning

Colors

  • Card Background — front-face fill colour

  • Hover / Back Background — radial reveal and back-face colour

  • Icon — icon stroke colour

  • Text — front-face text colour

  • Accent — hover text, back-face text, and CTA colour

Card Style

  • Corner Radius — card border radius

  • Padding — internal card spacing

Animation

  • Flip Speed — slow, medium, or fast spring timing

  • Hover Transition — speed of text colour inversion on hover

  • Stagger Content — toggle staggered back-face content entrance

Typography

  • Font — custom font family and weight via Framer font picker

Best use cases

  • Agency and studio service pages with 3-6 core offerings

  • SaaS and product feature grids that need interactive depth

  • Portfolio or capability showcases requiring visual engagement

  • Landing page sections where hover interaction drives exploration

Each card is self-contained with its own flip state, hover tracking, and animation.

Questions or custom requests?

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