StackFlow is a responsive Framer component for interactive card-based layouts with layered scaling, smooth motion transitions, editable content, and fluid depth animation across desktop and mobile devices.
This component works especially well for:
creative portfolios
agency presentations
editorial storytelling
featured case studies
fashion campaigns
product showcases
immersive landing pages
brand storytelling
visual content highlights
interactive project previews
Perfect when you want a component that feels more cinematic, spatial, and dynamic than a traditional carousel or slider.
–––––––––––––––––––––––––––
Fully customizable via the properties panel:
card images
titles
subtitles
descriptions
card width
card height
card spacing
stack offset
mobile card width
mobile card height
mobile spacing
border radius
active scale
inactive scale
depth intensity
animation speed
scroll sensitivity
background color
text color
title font
subtitle font
description font
Built to create strong visual depth and motion by default, while remaining flexible enough for different branding systems and layouts.
–––––––––––––––––––––––––––
Desktop: Large layered cards with pronounced depth and immersive spacing.
Tablet: Reduced scaling and tighter spacing for balanced mid-sized layouts.
Mobile: Compact stacked layouts with optimized touch interaction and simplified motion.
The component is designed to maintain depth, clarity, and smooth interaction across all screen sizes.
–––––––––––––––––––––––––––
Layered card composition: Cards stack dynamically in depth to create a spatial and immersive layout system.
Focused active state: The active card moves into visual focus while surrounding cards scale back softly.
Depth-based motion: Position, scale, opacity, and spacing work together to create cinematic movement.
Visible surrounding layers: Background cards remain partially visible to reinforce hierarchy and continuity.
Clean editorial structure: Minimal typography and controlled spacing keep attention on visuals and motion.
–––––––––––––––––––––––––––
Smooth scroll interaction: Cards transition fluidly through the stack during scrolling or navigation.
Focus transitions: Active cards animate naturally into position with depth-aware movement.
Hover behavior: Cards can subtly react to hover states for additional motion feedback.
Click-to-focus interaction: Selecting a card smoothly promotes it into the active position.
Touch-friendly navigation: Mobile interactions remain responsive and fluid across touch devices.
Motion continuity: All animations are designed to feel connected, soft, and visually intentional.
–––––––––––––––––––––––––––
moritz strobel
