The widget library for Squarespace is here Learn more

Fluid Portfolio Accordion and Interactive Showreel

The Cinematic Fluid Accordion Gallery is a cutting-edge horizontal portfolio widget designed for high-end creative studios, digital artists, and luxury brands. Unlike traditional sliders that jump or shift abruptly, this widget utilizes flex-grow logic to create a weighted, "squish and stretch" interaction. When an item is selected, it expands smoothly to reveal editorial project metadata while the surrounding items compress proportionally, maintaining a stable and sophisticated visual balance on the page.

This widget is engineered for storytelling through motion. The transition uses a specialized Awwwards-style cubic-bezier curve, ensuring every interaction feels premium and intentional. It is the perfect solution for landing pages that need to showcase multiple high-quality case studies without cluttering the UI with lightboxes or popups.

Key Features

  • Fluid Flex-Grow Engine: An advanced interactive accordion system that redistributes container space dynamically, eliminating the "trembling" or "jumping" effect common in standard CSS transitions.
  • Editorial Metadata Reveal: Features a staggered reveal of project numbering, heavy-weight typography, and sub-meta descriptions that appear only when the item expands.
  • Awwwards-Grade Motion: Optimized with 60fps transitions and high-end easing functions to match the aesthetic of award-winning digital portfolios.
  • Adaptive Responsive Layout: The flex-ratio logic automatically adjusts for mobile devices, collapsing secondary text while maintaining the "active" item's visual dominance for touchscreen UX.
  • Dynamic Customizer Integration: Built on the Redesignee "Slides" framework, allowing users to add, remove, and clone items directly from the sidebar with instant live-preview syncing.
  • SEO-Optimized Metadata: Semantic use of H3 and spans ensures that project keywords, brand names, and industry descriptions are fully crawlable by Google and Bing.

Primary Usage Cases

  • Boutique Agency Portfolios: Display your top-tier case studies in a minimalist horizontal list that feels like a physical gallery walk-through.
  • Fashion Lookbooks: Ideal for fashion brands wanting to showcase "The Collection" where clicking a look expands the shot into a full-detail high-fashion visual.
  • Interior Design & Architecture: Use the expanded state to show a wide-angle shot of a space, while the collapsed states act as a "sneak peek" into other architectural projects.
  • Tech Product Features: Perfect for SaaS landing pages to explain different product features in a unique, horizontal interactive format.
  • Video Production Showreels: While optimized for images, the media slot can host auto-playing muted video covers for a highly cinematic commercial portfolio.

How to use this widget

  • Change your content and adjust the styles to match your design
  • Click export and copy the code
  • Paste it on your web page by adding a code/html block in your website builder (e.g., Squarespace, WordPress, Webflow, Wix) and paste the code.

👋 P.S. Have questions? Leave a comment.