Layered Stacked Gallery

The Layered Stacked Gallery is a high-end, motion-driven component designed to transform static image displays into a cinematic, tactile experience. This widget is specifically engineered for designers who want to showcase a depth of content within a compact footprint, using a sophisticated "physical" stacking logic that feels both modern and intuitive.

The Visual Concept

The widget utilizes a multi-layered z-index approach to create a dynamic physical stack. Rather than a traditional flat grid, images are nested behind one another with subtle offsets in rotation and position.

• Optimal Configuration: While the widget supports multiple files, it truly shines with 2 or 3 images. This allows for enough "peek" area to trigger user curiosity without cluttering the layout.
• Tactile Depth: Built-in drop shadows and smooth CSS transitions give the cards a sense of weight. When a user interacts with the stack, the cards fan out or cycle through, creating a fluid transition that mimics real-world photography portfolios.
• Adaptive Styling: The background layers can be configured to use vibrant brand colors (like the purple accent in the preview) or transparent glassmorphism effects, allowing the gallery to blend seamlessly into any site aesthetic.

Key Features

• Fluid Engine Optimized: Like all Redesignee blocks, this is built to live natively within Squarespace’s Fluid Engine, ensuring it remains perfectly stable across all screen sizes.
• Hover-Triggered Expansion: The stack is designed to "expand" on hover or click, revealing the secondary and tertiary images with high-performance hardware-accelerated animations.
• Zero Jitter: The math behind the card rotation is locked to prevent the "shaking" often found in standard CSS carousels, keeping the edges sharp and the motion professional.

Where to Use This Widget

This component is ideal for areas where you need to tell a story or show "more" without taking up an entire section of the page.

• Creative Portfolios: Use it to group project highlights. A single project can show the final result on top, with process sketches or alternative views tucked neatly behind.
• "About Me" Sections: Perfect for a curated stack of personal photos or lifestyle shots that add a human touch to a professional bio without looking like a messy collage.
• Service Highlights: Showcase a service with a primary icon or image on the top card, and supporting visual evidence or iconography on the layers underneath.
• Testimonial Visuals: Pair a client’s headshot with a secondary image of the work you completed for them, creating a more engaging way to display social proof.
• Blog/Article Featured Images: Instead of a single flat thumbnail, use the stack to hint at the "gallery" of content waiting inside the post.