Projects 15 E - Video carousel with hover playback

Pro

Horizontal carousel of video panels that crossfade from thumbnail to playback on hover, with navigation arrows and looping.

Vue
Shadcn Projects 15 E block

Component Data

  • ID:projects15e
  • Access:pro
  • Created:Oct 1, 2025
  • Type:block

Projects 15 E block design & features

This variant places video panels inside a shadcn/ui Carousel that scrolls horizontally with previous and next arrow buttons. A header container above holds the large heading and audio icon label. The carousel is full-width with each item sized to roughly two-thirds of the viewport, allowing neighboring panels to peek in from the edges.

Each carousel item contains the standard video section: a thumbnail crossfades to a looping muted video on hover, with a dark overlay and bottom-left text for studio name and project title. The carousel loops infinitely and aligns items to the start.

The horizontal scroll introduces lateral navigation absent from the stacked variants, giving the section a more exploratory feel. Navigation arrows are positioned over the content area at vertical center of the media panels.

On mobile each carousel item fills the full width, and the user can swipe or tap arrows to navigate between panels.