Reel

A scrolling media strip that displays images and videos in flowing rows.

Installation

npx shadcn@latest add @scrollxui/reel

Usage

import { Reel, ReelItem } from "@/components/ui/reel";

const items: ReelItem[] = [
  { id: '1', type: 'image', src: '/photo.jpg' },
  { id: '2', type: 'video', src: '/clip.mp4' },
];
 
<Reel items={items} />

Examples

Pause On Hover

API Reference

Reel

A scrolling media strip that displays images and videos in flowing rows.

Props

Property	Type	Default	Description
`items`	ReelItem[]	`—`	Array of media items to display.
`rows`	number	`3`	Number of scrolling rows.
`repeat`	number	`9`	Times items duplicate per row for seamless looping.
`pauseOnHover`	boolean	`true`	Pauses scrolling when hovered.
`applyMask`	boolean	`true`	Fades out left and right edges.
`duration`	number	`30`	Scroll speed in seconds.
`direction`	alternate \| forward \| reverse	`alternate`	Scroll direction across rows.
`className`	string	`—`	Custom styles on the wrapper.
`id`	string	`—`	Unique identifier for each item.
`type`	image \| video	`—`	Media type of the item.
`src`	string	`—`	URL of the media file.