Video Accordion

A cinematic expanding video gallery built with Framer Motion. It keeps one panel visually dominant while the rest compress into a compact rail, making it useful for portfolio reels, storytelling sections, and editorial landing pages.

Nature & Wildlife

Transform your audio tracks into compelling visual stories automatically.

Animal Companions

Create impactful short-form content perfect for social media campaigns.

Beautiful Child

Capture the pure joy and innocence of childhood moments in stunning clarity and smooth motion.

Blooming Flower

Experience the vibrant colors and delicate details of nature's most beautiful blooming flowers.

Features

Expanding panels: The active card grows smoothly while inactive cards collapse into narrow previews.
Cinematic blur transitions: Non-active videos soften and scale back to reinforce focus.
Responsive layout: Stacks vertically on smaller screens and switches to a wide horizontal composition on desktop.
Optional Pexels loading: Provide an API key to replace the demo content with fetched videos.

Usage

Props

Prop	Type	Default	Description
`cards`	`VideoAccordionCard[]`	`DEFAULT_CARDS`	Video panel content used when no remote fetch is configured.
`pexelsApiKey`	`string`	`undefined`	Optional Pexels API key for loading dynamic videos.
`query`	`string`	`"nature"`	Search term used when fetching videos from Pexels.
`perPage`	`number`	`10`	Number of videos requested from Pexels.
`loadingText`	`string`	`"Loading stunning videos..."`	Message shown while remote videos are loading.
`className`	`string`	`""`	Additional classes for the outer container.
`onActiveChange`	`(cardId: VideoAccordionCard["id"] \| null) => void`	`undefined`	Callback fired when the active panel changes.

VideoAccordionCard Type

Notes

Keep the component inside a tall container so the motion and typography have enough room to breathe.
If you supply pexelsApiKey, the fetched content replaces the local cards array after the request resolves.