Spread Cards: Premium Interactions Component by Aidan Looker

A premium card stack that spreads into an elegant fan on hover, with smooth animations and drag-to-reorder interaction. Ideal for portfolios, team showcases, and product highlights. Each card supports responsive images, rich text, labels, and an optional CTA.

What is Spread Cards?

Spread Cards is an interactive card stack component that elegantly fans out when hovered, revealing each card in a smooth, layered spread. Cards sit in a natural pile with subtle rotation cues, then animate into a full fan with configurable spacing and rotation. Built for portfolios, creative showcases, team pages, and product highlights where visual impact matters. Supports up to 8 cards with full image, text, and CTA customisation.

Core Features

Stacked-to-spread animation with configurable fan distance, rotation, speed, and easing curves (Smooth, Snappy, Bouncy)
Drag-to-reorder interaction — grab any card and drag it to a new position in the deck, or flick it to the back
Optional CTA button per card with a premium slide-fill hover animation, link support for internal and external navigation
Independent font controls for Title, Body, Label, and Button — full typographic flexibility from the properties panel

Controls inside Framer

Cards

Image (Responsive Image with alt text)
Label, Title, Subtitle, Description
Button Text and Button Link (native Framer Link)
Up to 8 cards per stack

Layout

Card Width (150–500 px)
Card Height (200–700 px)

Colors

Text, Label Background, Label Text, Gradient Overlay

Card Style

Border Radius, Shadow Intensity, Gradient Strength

Button Style

Show/Hide toggle, Border and Fill colour, Text colour, Border Radius

Animation

Spread Gap (40–300 px), Rotation (0–15 degrees), Speed (Fast, Medium, Slow), Easing (Smooth, Snappy, Bouncy)

Interaction

Drag to Reorder toggle

Typography

Title Font, Body Font, Label Font, Button Font

Best use cases

Portfolio and photography showcases — fan out project thumbnails with elegant titles and "View Project" CTAs
Team or people sections — stack team member portraits that reveal on hover with name, role, and bio
Product or feature highlights — present a curated selection of items in a compact, interactive card deck
Event or gallery previews — display event photos in a stacked layout that invites exploration

Present content that rewards curiosity. Drop it in, configure your cards, and let the interaction do the storytelling.