The widget library for Squarespace is here Learn more

Interactive Case Study and Portfolio Video List

The Case Study Video List is a premium, minimalist portfolio widget designed for creators, agencies, and technical professionals who want to showcase their work with high-impact visual storytelling. This widget transforms a standard project list into an immersive experience by combining bold editorial typography with an integrated video lightbox trigger.

Perfect for creative directors, videographers, and UX case studies, the layout features a structured, numbered list that guides the user’s eye through your professional journey. Each item includes a high-definition preview thumbnail that, when clicked, launches a seamless, full-screen video popup, allowing your audience to dive deep into your process without leaving the page.

Key Features

  • Cinematic Video Lightbox: Launches a high-performance video modal for MP4, YouTube, or Vimeo, optimized for user engagement and story retention.
  • Numbered Project Index: Features oversized outlined typography for a "high-end magazine" aesthetic that aids in visual hierarchy.
  • Dynamic List Layout: A fully responsive portfolio list that adapts from a sophisticated multi-column grid on desktop to a stacked, touch-friendly view on mobile.
  • Interactive Play Triggers: Includes custom-styled play buttons with smooth hover animations to increase Click-Through Rate (CTR).
  • SEO-Friendly Architecture: Uses semantic <h3> and <div> tags, ensuring your project titles and case study headings are easily indexed by search engines like Google.
  • Customizer Ready: Built with the Redesignee "Slides" syntax, allowing you to add, remove, and reorder items effortlessly within the sidebar.

Primary Usage Cases

  • Production House Showreels: Organize your commercial videos or film projects in a clean, professional list that prioritizes the viewing experience.
  • UX/UI Design Portfolios: Present case study walkthroughs alongside bold titles, perfect for explaining complex design systems through video.
  • How-To & Educational Series: Create a "lessons" or "modules" list (like "How to Parallel Park") that feels organized and authoritative.
  • Architecture & Real Estate: Showcase property walk-throughs and virtual tours in a structured gallery that highlights project numbers and locations.
  • Corporate Brand Stories: Use this as an "Our Impact" section to host testimonial videos and brand documentaries in a sleek, non-cluttered format.

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.

Published:

Apr 26, 2026 07:02 AM

Category: