Feature Scroll

Usage

A long-form story block: 2–5 features stacked vertically. The active feature's media stays pinned on the side of the page as the reader scrolls; when each heading enters the upper portion of the viewport, the media swaps to match. Use when the features have depth — each one warrants its own paragraph + CTA — and the media carries weight (animations, product UI shots).

Media types

Each item's media can be a static image (contentType: "img", the default) or a Lottie animation JSON (contentType: "application/json" with the JSON file passed via media.json). Animated tiles get a Play / Pause overlay button in the tile header.

Layout

align_media chooses which side the pinned media tile sits on at desktop. On mobile the media renders inline above each item — no pinning. The shape ornament rotates with align_media.

Item content

Each item is heading + description + optional CTA. The CTA renders as a chevron-style link below the description. Keep descriptions under ~60 words — they share the page with a tall sticky tile, so long paragraphs throw the rhythm off.