Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Filmstrip Frame Row Features Block for Svelte

A storyboard row of five numbered frames for a demo recorder, each a small greyscale drawing with a scene line, in one band of shared hairlines in a snapping scroll area with a visible scrollbar thumb.

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 storyboard row for Svelte with Ark UI. A compact header sits over one band of five frames, joined by hairlines under a top rule with + marks, in a sideways scroll area. Each frame is a small greyscale drawing of a step (a click path, a trimmed timeline, a callout, hidden data, a share link), a "Frame 02 / 05" badge, a scene line and a sentence. The scroll area gently snaps to the frames, fades at both edges and shows a visible track and thumb. Below md each frame is 80% of the width, so the next one peeks in. It's built from Scroll Area, Badge and Guides, with CSS for the entrance and your theme's tokens for every colour. For tools that show a process in steps, a recorder, a builder or an editor.

FAQ

How do I change the frames?

Each frame is a FrameCell with a frame (a title and a description), a number and its drawing as the child. Add one by writing another FrameCell and a drawing component, and update TOTAL so the "Frame 02 / 05" badges agree.

How do I scroll it?

Drag or swipe, use the scroll wheel with Shift, or drag the thumb of the scrollbar under the frames. The thumb is always showing, on a visible track, so it's clear there is more. The frames snap gently into place and the list has a name, "The five frames of a demo, side by side". The scroll area draws its own scrollbar, always visible, in the theme's colours.

Are the drawings real screenshots?

No. They are small greyscale drawings from tokens, hidden from assistive technology, so each frame's title and sentence carry the meaning. They keep their 16 by 9 shape at every width.

Does it work right to left?

Yes. The frames run from the right, the edge fades and the snap points follow the direction, the timeline's times keep their order, and the cut marker mirrors with the strip.

What moves, and what happens with reduced motion?

The header and the strip fade up once when the page loads, with a CSS transition; with reduced motion they appear at once. Scrolling is the visitor's own, and nothing moves by itself.

How does it fit on a phone?

Frames are 80% of the width, so the next one shows at the edge as a hint, and the scrollbar thumb is visible under them. The drawings and text stay at the same sizes, and the page itself never scrolls sideways at 320 pixels.

All 170 features blocks