Svg Path Story

ProScrollpowered by @vectorvesper/motion

Scroll-scrubbed storytelling along an SVG path — cards attach to positions on the path and reveal as the scroll range passes through them, with the active range configurable at both ends.

Svg Path Story

Included with membership

Members install Svg Path Story with one command and get the full source, the usage code and the Framer remix, licensed for client work. One membership covers the whole library and the CLI.

When to use it

A timeline, a process, or a sequence where the order matters and you want the reader to feel the route between the steps. Every card is placed by hand along the path, so it suits a fixed editorial set rather than a list that changes length at runtime.

  • Spread ratio evenly across 0 to 1, leaving a little room at both ends so the first and last cards are not clipped.
  • Vary rotation across the set, alternating sign — a run of same-signed values reads as a crooked row rather than a scattered path.
  • Keep ids stable; they key the cards and a changing id resets a card's position mid-scroll.

Avoid:

  • Do not treat ratio as an aspect ratio. Values above 1 place the card past the end of the path, where it never appears.
  • Do not stack several cards at nearly the same ratio expecting a cluster — they overlap exactly and read as one card.
  • Do not rebuild the cards array inline on every render. A new array identity each render re-measures every position.

Props

Cards that travel along a drawn path as you scroll, rotating and overlapping as they go — like photographs laid out along a line rather than stacked in a grid.

<SVGPathStory />

The section and its scroll track.

PropTypeDefaultDescription
cards*SVGPathCardData[]—The cards, in order. Required — nothing renders without it.
scrollStartstring"top top"Where the journey begins, given as a position on the section paired with one on the viewport. The default starts when the section's top meets the viewport's top.
scrollEndstring"bottom bottom"Where it finishes, in the same form. The default ends when the section's bottom meets the viewport's bottom.
disableAdaptiveQualitybooleanfalseKeeps every card. By default the most constrained tier renders only every second one. This is the only downgrade in the catalogue that changes what the page says rather than how it looks, so set it whenever the cards carry content the reader needs.

<SVGPathCardData />

type

One card on the path.

PropTypeDefaultDescription
id*string—Stable key for the card.
image*string—The picture.
rotation*number—How far the card is turned, in degrees. Vary it across the set so they do not read as a row.
ratio*number—Where the card sits along the path, from 0 at the start to 1 at the end. Despite the name this is a position, not an aspect ratio — spread the values evenly, and anything above 1 falls off the end of the path.
The cards move only as the visitor scrolls, and there is no ambient motion. It has no explicit reduced-motion state.
Client component. It measures the section against the viewport, so it has to run in the browser.
It draws on the shared frame loop rather than starting one of its own, so putting several animated components on a page costs one callback, not one each, and the scheduler can set decorative work aside when frames get tight. The device tier also decides how many cards to render, which is the one place in this catalogue where the runtime changes content rather than fidelity — see disableAdaptiveQuality if that matters to you.
Back to all components