Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Scroll Snap Reel Features Block for Solid

A features section as a full-height vertical snap reel: five slides that lock into place as you scroll, each with a drawing, a title, a sentence and three stats, a rail of dot buttons and a counter beside a sticky header.

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 features section for Solid with Ark UI, built as a vertical reel. At the end of the page a scroller as tall as the viewport (up to 44rem) holds five slides that each lock into place with scroll snapping; every slide is a drawing of one step of a workspace-onboarding product, a title, a sentence and three stats. A rail of dot buttons at the reel's edge jumps to a slide, and a counter in the sticky side header ("02 / 05" with a progress bar) follows the slide on screen. A divider that meets the page's top rule with a plus mark splits the header from the reel. On a phone the reel follows the header at 28rem and the counter becomes a small badge in its corner. It's built from Button, Badge and the Guides line kit, with your theme's tokens for every colour and no primary button.

FAQ

How do I change the slides?

Edit SLIDES at the top of the file: each has an id, a title, a sentence and three stats. The id picks the drawing (ImportArt, InviteArt and so on), so a new slide needs a small drawing component and a line in Art. The counter, the dot rail and the progress bar are built from the same list.

How does it work from the keyboard?

The reel is a named region you can focus: Tab to it, then the arrow keys, Page Down, Page Up, Home, End and Space scroll it, and each slide snaps into place. The dot buttons are ordinary buttons with a name like "Slide 2 of 5: Invite the team", and the one on screen is marked as current.

What moves, and what happens with reduced motion?

Dots and the progress bar change as you scroll, and clicking a dot glides to its slide. With reduced motion the glide is off, so a click jumps straight there, and the bar and dots change at once. The scroll snapping itself stays, because it is how the reel is read.

Why is the reel as tall as the viewport?

So one slide fills the screen at a time. Its height is min(100svh, 44rem), set once as a CSS variable that the scroller and every slide share, so a slide is always exactly one screen of the reel. On a phone it is a fixed 28rem, which keeps the header and the first slide on one screen.

Can it trap the page scroll?

No. The reel contains its own scroll with overscroll-behavior: contain on a region that is a fixed height, so the page scrolls on either side of it, and when you reach the first or last slide the next scroll does not chain into a bounce of the reel.

What changes in a right-to-left page?

The dot rail stays at the end edge of the reel and the progress bar fills from the start, so both mirror with the page. The drawings use logical sides too, so they mirror with it.

All 170 features blocks