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.
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
Image (Responsive Image with alt text)
Label, Title, Subtitle, Description
Button Text and Button Link (native Framer Link)
Up to 8 cards per stack
Card Width (150–500 px)
Card Height (200–700 px)
Text, Label Background, Label Text, Gradient Overlay
Border Radius, Shadow Intensity, Gradient Strength
Show/Hide toggle, Border and Fill colour, Text colour, Border Radius
Spread Gap (40–300 px), Rotation (0–15 degrees), Speed (Fast, Medium, Slow), Easing (Smooth, Snappy, Bouncy)
Drag to Reorder toggle
Title Font, Body Font, Label Font, Button Font
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.
We design and build custom Framer components. Get in touch at contact@teampixel.com.au.
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.
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
Image (Responsive Image with alt text)
Label, Title, Subtitle, Description
Button Text and Button Link (native Framer Link)
Up to 8 cards per stack
Card Width (150–500 px)
Card Height (200–700 px)
Text, Label Background, Label Text, Gradient Overlay
Border Radius, Shadow Intensity, Gradient Strength
Show/Hide toggle, Border and Fill colour, Text colour, Border Radius
Spread Gap (40–300 px), Rotation (0–15 degrees), Speed (Fast, Medium, Slow), Easing (Smooth, Snappy, Bouncy)
Drag to Reorder toggle
Title Font, Body Font, Label Font, Button Font
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.
We design and build custom Framer components. Get in touch at contact@teampixel.com.au.
