║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Reel description: A composable, Instagram-style Reel component with progress indicators and navigation controls. icon: Film dependencies:

• https://motion.dev/ installer: reel

---

Features

• Full-height, 9:16 aspect ratio container optimized for vertical video
• Progress indicators showing current and total reels
• Automatic video playback with seamless transitions
• Support for both video and image content
• Customizable controls for play/pause, mute/unmute, and navigation
• Touch-friendly navigation by tapping left/right sides
• Composable architecture for custom overlays and content
• Header and footer sections for metadata display
• Social media-style interactions support
• Keyboard accessibility for all controls
• Auto-advance to next reel when current finishes
• Responsive design that scales with viewport height

Examples

Reel with Images

Display a series of images with automatic timing and transitions.

<Preview path="reel-images" />

Custom Reel

Fully customized reel with social media-style interface including author info, likes, comments, and share buttons.

<Preview path="reel-custom" />

Minimal Reel

Simple reel with just video content, progress bar, and navigation.

<Preview path="reel-minimal" />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║