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 install Fluid Portfolio Accordion and Interactive Showreel to your website

Bring this layout to life on your website in just a few clicks.

Install on Squarespace

Edit visually using the extension or native blocks

+−

First, ensure you have pasted the global Redesignee connector script into your site's Code Injection settings. Once connected, you have two easy ways to build:

1. Native Block: Simply add the native Redesignee Widget Block directly from the fluid engine editor menu inside Squarespace.

2. Manual Markdown: Add a standard Markdown Block, paste your widget’s code snippet, and the Redesignee floating "Customize" button will automatically appear right over the block.

Both methods let you tweak settings, copy items, and design visually in real time. Saving your changes syncs the updates instantly to your live page.

See Squarespace installation guide

Install on WordPress

Connect natively via Gutenberg or Elementor

+−

Make sure you have the free Redesignee WordPress Plugin installed. If you are using Elementor, simply drag and drop the Redesignee widget from your sidebar. If you are using the Gutenberg Block Editor, click the " + " icon and select the Redesignee Block. Launch the Cloud Library directly inside your workspace, choose your customized template, and import it with a single click. It automatically inherits your theme fonts and styles!

WordPress plugin installation guide

Install on Other CMS as Code

Quick copy-and-paste for custom setups

+−

If you are using Webflow, Shopify, Wix, or a custom HTML site, click the "Export Widget" button on this page and ensure the platform selector is set to "HTML". Click "Copy" to copy the clean, un-nested source code snippet directly to your clipboard. Paste this code into any HTML component, Code Block, or Embed tool inside your website builder. All styles, animations, and scripts are self-contained and ready to run.