Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Gallery blocks

Pro

Scrubbing Video Thumbnails Gallery Block for Vue

Three video-course posters on their own hairline cells with a length badge, a watched line and a fixed view count, that step through four drawn storyboard frames as you move across them or press the arrow keys.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A video-thumbnail gallery for Vue with Ark UI, for Showhow, a video-course platform. Three lessons sit in cells with an overshoot on their own hairlines, three across from md and one on a phone. Each poster is a drawn frame (never a photograph) with a length badge, a thin line for how much you have watched and, under it, the title, the teacher and a view count. Move the pointer across a poster, or focus it and press an arrow key, and it steps through four drawn storyboard frames of the lesson with the chapter's name over each; on a touch screen, tap or drag across it. No video is loaded or played. The courses, teachers and counts are made up for the example. Built from Badge, Progress and Guides.

FAQ

How does scrubbing work?

A range input covers the poster, invisible, and its value is the frame. On a mouse the pointer's place across the poster sets the frame (mirrored in a right-to-left page) and the poster returns to the first frame when the pointer leaves; a keyboard or a finger moves the range itself. Its spoken value names the frame and the chapter.

How does it work with a keyboard?

Tab reaches each poster, which has a visible focus ring, and Left and Right (or Down and Up) step through the frames, Home and End go to the first and last. A poster is a slider, not a link: put the link on the title.

How do I use real video?

Replace each frame's drawing with a still from the lesson (img in the stack), keep the four frames and the chapter names, and put the video link on the title. If your frames come from a sprite sheet, move the object-position instead of stacking images.

Is the watched line live?

No: watched is a fixed number in each lesson's data, and so is the view count. Connect them to your own records.

What happens with reduced motion?

The frames change at once, without the short cross-fade. Nothing here moves by itself.

Does it work in a right-to-left page?

The posters scrub from the reading start, the frame ticks keep their order, and the length, teacher and count are isolated so the digits stay in order.

All 100 gallery blocks