---
title: "Info Cards 3D — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Aidan Looker · Cards. What is Info Cards 3D?"
canonical: "https://framer.elliotli.dev/component/info-cards-3d"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Info Cards 3D

# Info Cards 3D

3D flip cards with hover effects.

[View on Framer](https://framer.com/marketplace/components/info-cards-3d/?via=elliot-li)

![Info Cards 3D preview image 1](https://framer.elliotli.dev/og/component/info-cards-3d/e3fa6021c342bdfd/1600x1200.jpg)

## 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.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## 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**](mailto:contact@teampixel.com.au).

## Rank history [How rankings work →](/terms#rankings)

-   All · #5535

## Details

- **Author**: Aidan Looker
- **Price**: $9.00
- **Published**: 2026-05-12
- **Updated**: 2026-06-13
- **Added**: 2026-05-02
- **Categories**: Cards

## More like this

-   [Particle Team Cards](/component/particle-team-cards) — Frame Native · Free — Portraits that move as particles
-   [Card Swap](/component/card-swap) — Antoine Lacombled · $9 — A 3D card stack you can fling
-   [Overlay Reveal Card](/component/overlay-reveal-card) — Pentaclay · Free — Project Card With Hover Overlay
-   [Deckshift](/component/deckshift) — BeyondPixel · $15 — Interactive Stacked Focus Cards