Reel

A vertical short-video reel that snaps clip to clip on scroll or drag, with story-style progress bars, slow Ken Burns motion, hold-to-pause and double-tap likes.

318

maya.filmsFollow

Golden hour on the Tagus. Shot handheld, no grade. #lisbon #35mm

Original audio · maya.films

142

trailkidFollow

4:12am alarm, worth every step. Summit at sunrise.

Low Orbit · Samuel Reyes

604

studio.ondaFollow

Behind the scenes of our spring lookbook shoot.

Glass Gardens · Aiko & The Tides

1.3K

noodle.diariesFollow

Hand-pulled biang biang noodles in 30 seconds flat.

Original audio · noodle.diaries

kai.drawsFollow

Timelapse: inking a full page in one sitting.

Paper Suns · Juniper Hall

402

coastline.coFollow

Swell forecast said 2ft. The ocean disagreed.

Midnight Transit · Nova Harbor

Open

duration6000

autoPlay

loop

height440

Installation

npx shadcn@latest add @glint-ui/reel

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/reel.json

Usage

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

<Reel
  items={[
    { src: "/clip-1.jpg", author: "maya.films", avatar: "/maya.jpg", caption: "Golden hour in Lisbon", likes: 12400, comments: 318 },
    { src: "/clip-2.jpg", author: "trailkid", caption: "Summit at sunrise", likes: 8900, comments: 120 },
  ]}
/>

Props

Prop	Type	Default	Description
items	ReactNode	—	Array of { src, author, avatar?, caption, audio?, likes?, comments? }.
duration	number	6000	Ms each clip plays before advancing.
autoPlay	boolean	true	Advance when a clip's progress bar fills.
loop	boolean	true	Return to the first clip after the last.
height	number	440	Height in px; width follows a 9:16 frame.
className	string	—	Extra classes for the root element.