Cinematic Expanding Gallery - Awwwards Style Portfolio

Transform your website into an immersive visual experience with the Cinematic Expanding Gallery. Inspired by the high-end interaction design found on "Awwwards" winning websites, this widget turns a standard image row into a dynamic, interactive playground. It is the perfect solution for photographers, architects, and creative agencies looking to showcase their work with drama and sophistication.

The core mechanic is a "Flex-Accordion" layout. By default, images sit side-by-side in a compressed, artistic strip (often in grayscale or zoomed in). When a user interacts—hovering on desktop or tapping on mobile—the active slice smoothly expands to dominate the screen. This animation is powered by a custom cubic-bezier easing curve, giving the movement a heavy, luxurious feel that sets it apart from standard linear animations.

As the image expands and bursts into full color, the content inside performs a staggered text reveal. The Category, Title, Description, and "View Project" button slide in sequentially, guiding the user's eye naturally down the information hierarchy. Now featuring fully editable <a> tag buttons, you can link each gallery item directly to case studies or external pages, making this not just a pretty interface, but a functional navigation hub.

Key Features:

• Expanding Flex Layout: A sophisticated accordion interaction where items dynamically resize on hover, creating a playful and engaging user experience.
• Cinematic Motion: Utilizes advanced CSS cubic-bezier transitions (0.8s duration) for smooth, premium-grade animations.
• Staggered Text Entrance: Text elements (Title, Category, Description) slide in one after another for a polished, motion-design feel.
• Dynamic Image Effects: Backgrounds transition from grayscale and zoomed-in to full-color and standard scale upon interaction.
• Linkable Project Buttons: Includes fully editable <a> tags (data-link-editable) to drive traffic to specific project pages or portfolios.
• Vertical Mobile Adaptation: The layout intelligently transforms into a stacked vertical accordion on smaller screens, preserving the expanding effect without cramping content.