How a Story is put together
A sample Story that shows every part of the authoring system — Overlay and Sidecar Scrollys, a Scrub Step and a MapStage.
This Story is a Draft and always will be: it is the reference for writing Stories. It lives in src/stories/_example/index.svx. The text is Markdown; the Scrollys are Svelte components.
An Overlay Scrolly
In an Overlay, the Steps scroll as cards over a full-screen Stage. Each Step declares a View; the Stage decides how to get there.
Singapore, with none of the Story’s layers on.
The places layer turns on, and the camera moves in.
A filter keeps only the 4 parks.
Scrub: this Step follows your scroll. Keep scrolling and the camera tilts and turns over Marina Bay.
A Sidecar Scrolly
In a Sidecar, the Steps sit beside the Stage. On a narrow screen it falls back to an Overlay. Any component that takes view and progress can be a Stage — this one is a bar chart from the Story’s own folder.
Scrub again: the bars grow as you scroll.
Malls get the most visits.
Museums get the fewest.
After the Scrollys
Ordinary text continues here. Lists and links get the Story typography:
- Write the text in Markdown.
- Declare a View on each Step.
- Let the Stage work out how to get there.
See the roadmap for what comes next.