Spread Cards

What is 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 .

Stacked cards that fan out on hover.