Spread Cards

Premium Interactions Component by Aidan Looker

Show PreviewBuy for $7
Spread Cards

About Spread Cards

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.

Questions or custom requests?

We design and build custom Framer components. Get in touch at contact@teampixel.com.au.