Scroll Patterns

Composition recipes for scroll-driven UI. Each recipe uses VB primitives (data-sticky, data-effect, data-trigger="view-progress") or native CSS (position: sticky, animation-timeline) — no new components, just patterns.

Related:

data-trigger="view-progress" — the underlying continuous scroll trigger several of these recipes build on.
data-effect — the effect catalog and slot system.
data-sticky — VB's sticky helpers for headers, footers, and tables.

Recipes

Scroll-down indicator

Animated chevron at the bottom of a hero, nudging first-time visitors to scroll.

Sticky hero with scale-out

Pinned hero that scales and fades as the reader scrolls past.

Pinned card stack

Apple-style cards that pile on top of one another as you scroll.

Horizontal scroll section

A section where the page scrolls vertically but the content translates sideways.

Sticky share bar

Vertical share rail beside long-form content that follows the reader.