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

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Instagram Cards

# Instagram Cards

Interactive social cards with drag & tap

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

![Instagram Cards preview image 1](https://framer.elliotli.dev/og/component/instagram-cards/43454fc8d5c6dae1/1600x1200.jpg)

## Summary

What is Instagram Cards?

## Description

## What is Instagram Cards?

Instagram Cards is a stunning, interactive 3-card stack component inspired by social media aesthetics. Perfect for portfolios, testimonials, team showcases, or any visual content that needs engagement. Featuring smooth spring animations, drag-to-reorder functionality, and click-to-expand modals, this component creates memorable user experiences that keep visitors interacting with your content.

[![](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

-   Drag-to-swap card reordering with smooth spring physics
    
-   Double-tap heart animation on center card
    
-   Animated Instagram-style like bubble with floating hearts on click
    
-   1–3 profile avatars with verified badge and Instagram gradient border
    
-   Click-to-expand fullscreen modal view
    
-   Gradient floating heart with pulse animation
    
-   Auto-rotate carousel mode with adjustable speed
    

## Controls inside Framer

### Card Content

-   Left, center, and right card images
    
-   Caption text with show/hide toggle
    
-   Like count display
    

### Avatar Settings

-   Avatar count (1–3 avatars)
    
-   Individual avatar images
    
-   Per-avatar link URLs
    
-   Verified badge toggle
    

### Visual Style

-   Corner radius
    
-   Shadow depth intensity
    
-   Card spacing and tilt angle
    
-   Instagram gradient border toggle
    
-   Dark and light color modes
    
-   Background color
    

### Interactions

-   Hover wobble effect
    
-   Drag-to-swap reordering
    
-   Click-to-expand modal
    
-   Double-tap heart animation
    
-   Auto-rotate with speed control
    

## Best use cases

-   Portfolio showcases with interactive photo galleries
    
-   Client testimonials with social proof styling
    
-   Team member highlights with linked profiles
    
-   Product features with engaging visual cards
    
-   Social media content previews on landing pages
    

Elevate your Framer projects with interactive cards that visitors actually want to engage with. Premium animations. Complete customisation. Instant impact.

## 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 · #10754

## Details

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

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator