Skip to content

component

Info Cards 3D

By Aidan Looker

Details

Summary

What is Info Cards 3D?

Description

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 .

Introduction

3D flip cards with hover effects.

Rank history

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

110012001300138038/148/228/309/79/15
  • All · #3730