Visual & layout
Layered stack system:Video cards are arranged in an overlapping stacked layout, creating depth and visual hierarchy while keeping every card partially visible.
Always-active motion:Each card continuously plays its video preview, giving the section a lively, immersive feel even before interaction.
Modern cinematic styling:Soft shadows, rounded corners, smooth scaling, and clean spacing combine to create a premium showcase experience.
–––––––––––––––––––––––––––
Interaction
Hover-to-reveal content:When users hover over a card, text smoothly fades and slides into view — ideal for showcasing titles, services, projects, or short descriptions.
Focus elevation:Hovered cards subtly rise, scale, or shift forward to create an interactive depth effect while maintaining the stacked composition.
Smooth transitions:Every animation is designed for fluidity and responsiveness, creating an intentional and polished browsing experience.
Clickable cards:Each video card can include its own internal or external link, allowing direct navigation to pages, case studies, products, or services.
–––––––––––––––––––––––––––
Customization
Fully customizable via the properties panel:
Replaceable video files
Titles & descriptions
Links per card
Stack spacing & overlap amount
Border radius & shadows
Hover animation intensity
Video autoplay & mute controls
Overlay opacity & text positioning
Responsive layout behavior
–––––––––––––––––––––––––––
Responsive behavior
Desktop:Layered horizontal or angled stacked layout with immersive hover interactions and motion-focused presentation.
True responsive preview:Every breakpoint displays its correct structure directly inside Framer for accurate designing and testing across devices.
–––––––––––––––––––––––––––
Use Cases
This component works especially well for:
portfolio showcases
SaaS feature highlights
agency project sections
product storytelling
landing page hero sections
cinematic brand presentations
creative case study previews
Perfect for creating an engaging, motion-driven section that captures attention instantly while keeping navigation intuitive and visually clean.
–––––––––––––––––––––––––––
Preview / Functionality
Visual & layout
Layered stack system:Video cards are arranged in an overlapping stacked layout, creating depth and visual hierarchy while keeping every card partially visible.
Always-active motion:Each card continuously plays its video preview, giving the section a lively, immersive feel even before interaction.
Modern cinematic styling:Soft shadows, rounded corners, smooth scaling, and clean spacing combine to create a premium showcase experience.
–––––––––––––––––––––––––––
Interaction
Hover-to-reveal content:When users hover over a card, text smoothly fades and slides into view — ideal for showcasing titles, services, projects, or short descriptions.
Focus elevation:Hovered cards subtly rise, scale, or shift forward to create an interactive depth effect while maintaining the stacked composition.
Smooth transitions:Every animation is designed for fluidity and responsiveness, creating an intentional and polished browsing experience.
Clickable cards:Each video card can include its own internal or external link, allowing direct navigation to pages, case studies, products, or services.
–––––––––––––––––––––––––––
Customization
Fully customizable via the properties panel:
Replaceable video files
Titles & descriptions
Links per card
Stack spacing & overlap amount
Border radius & shadows
Hover animation intensity
Video autoplay & mute controls
Overlay opacity & text positioning
Responsive layout behavior
–––––––––––––––––––––––––––
Responsive behavior
Desktop:Layered horizontal or angled stacked layout with immersive hover interactions and motion-focused presentation.
True responsive preview:Every breakpoint displays its correct structure directly inside Framer for accurate designing and testing across devices.
–––––––––––––––––––––––––––
Use Cases
This component works especially well for:
portfolio showcases
SaaS feature highlights
agency project sections
product storytelling
landing page hero sections
cinematic brand presentations
creative case study previews
Perfect for creating an engaging, motion-driven section that captures attention instantly while keeping navigation intuitive and visually clean.
–––––––––––––––––––––––––––
Preview / Functionality
