Video Accordion

A cinematic, expanding gallery component animated with plain CSS transitions — no animation library. It keeps one panel visually dominant and plays its assigned video, while the rest seamlessly compress into an obscured track-rail and pause.

This layout is incredibly useful for portfolio reels, storytelling feature sections, and high-impact editorial landing pages. On mobile viewports, it intelligently re-flows into a vertically expanding stack automatically.

Hover a compressed panel to expand it — a CSS transition interpolates the flex-grow of every sibling and the newly dominant panel starts playing while the others pause.

Opened on load

PassdefaultActiveId: to expand a panel immediately. Omit it and the accordion starts in the fully collapsed, text-free resting state.

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Video Accordion

npx shadcn@latest add @algorize-ui/video-accordion

components/custom/blocks/VideoAccordionBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Video Accordion needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

Fewer panels

panels: sets the rail's divisions — space redistributes automatically, so a two-panel reel works as well as a five-panel one.

Features

Discover the key capabilities that make this component an excellent choice for modern, animated user interfaces.

Fluid Animations

Hardware-accelerated transitions that ensure smooth 60fps performance across devices.

Highly Customizable

Exposes intuitive props for tailoring colors, sizes, and animation speeds to fit your brand.

Responsive Design

Automatically adapts to mobile, tablet, and desktop viewports without horizontal scrolling issues.

Accessible

Built with semantic HTML and ARIA labels where necessary to support screen readers and keyboard navigation.

Best Practices & Guidelines

Animation Performance

Avoid placing too many heavy animated components on a single screen to prevent layout thrashing and maintain 60fps performance. Use intersection observers to pause off-screen animations.

State Management

When triggering animations via state changes, ensure you wrap state updates in startTransition or use lightweight stores to prevent React rendering bottlenecks during the animation tick.

Props Reference

Component / Interface	Prop	Type	Default	Description
`VideoAccordion`	`panels`	`AccordionPanel[]`	Required	An array of configuration objects defining the videos, text, and IDs for the gallery.
`VideoAccordion`	`defaultActiveId`	`string`	`undefined`	The unique `id` of the panel that should be expanded by default. If omitted, the accordion starts in a fully collapsed, text-free resting state.
`VideoAccordion`	`className`	`string`	`undefined`	Custom Tailwind CSS classes to apply to the outermost responsive flex container wrapper.
`AccordionPanel`	`id`	`string`	Required	A unique identifier string required for safe React list rendering and active-panel tracking.
`AccordionPanel`	`title`	`string`	Required	Primary headline text displayed at the bottom of the panel.
`AccordionPanel`	`description`	`string`	Required	Detailed paragraph text explaining the video. This text automatically hides when the panel is collapsed.
`AccordionPanel`	`videoSrc`	`string`	Required	The URL to the background `.mp4` or `.webm` file.
`AccordionPanel`	`posterUrl`	`string`	`undefined`	Optional (but highly recommended) URL to a fallback image. This displays immediately while the video is buffering to prevent black flashes.