---
title: "Card Fan — Free Framer component · Best of Framer"
description: "Free Framer component · by Michael Slotta · Cards. Interactive card fan component for Framer."
canonical: "https://framer.elliotli.dev/component/cardfanmini"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Card Fan

# Card Fan

Scroll-triggered card fan for Framer.

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

![Card Fan preview image 1](https://framer.elliotli.dev/og/component/cardfanmini/5dccbc45b5f7cbd6/1600x1200.jpg)

## Summary

Interactive card fan component for Framer.

## Description

\# Card Fan — Framer Component

\## Short Description

Interactive card fan component for Framer. Unlimited cards, cascade reveal on scroll, hover with lift + spread + depth darkening. Full property panel control.

\---

\## Full Description

Cards cascade into view on scroll and respond to hover — the active card lifts, neighbors spread, inactive cards darken. Connect any Framer components as cards. No card limit.

Two reveal animations: **Scale Up** (cards grow into position) and **Fan Out** (cards unravel from a compressed stack). Four cascade directions. Scroll-triggered. Mobile tap support with automatic device detection. Keyboard accessible.

15+ property controls — gap, lift, spread, reveal timing, hover speed, shine, darkening, optional text companion, auto-replay, and more. No code after install.

\---

\## What's Included

\- **CardFan.tsx** — the full unlimited component

\- **CardFanMini.tsx** — free 4-card version (also included as a bonus)

\- Both components, ready to drop into any Framer project

\---

\## What You Can Build With It

\- Hero sections with visual depth

\- Product showcases and feature highlights

\- Portfolio galleries

\- Image carousels that feel premium

\- Landing page visual moments

\---

\## Features

\- Unlimited card slots

\- Scale Up + Fan Out reveal animations

\- 4 cascade directions (left, right, center-out, edges-in)

\- Scroll-triggered with configurable threshold

\- Hover lift with neighbor spread

\- Depth darkening on inactive cards

\- Specular shine overlay on active card

\- Optional text companion (left or right side)

\- Auto-replay mode

\- Mobile tap-to-lift (auto-detect or force)

\- Keyboard + screen reader accessible

\- Performance optimized (rAF throttling, memoized styles, timer cleanup)

\---

\## Benefit Bullets

\- ✓ Unlimited card slots — no cap on how many components you connect

\- ✓ Two reveal animations with 4 direction options

\- ✓ Hover interactions: lift, spread, darken

\- ✓ Mobile-ready with automatic tap detection

\- ✓ Full Framer property panel — no code needed

\- ✓ Includes the free Mini version as a bonus

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

-   All · #1785

## Details

- **Author**: Michael Slotta
- **Published**: 2026-06-01
- **Updated**: 2026-06-01
- **Added**: 2026-05-19
- **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