Layout

Page structure and content framing. These components define the spatial architecture of a scrollytelling story.

Hero

Medium — ~12KB

The dramatic opening of your story. A full-screen visual — video, photo, or graphic — fills the entire viewport behind your headline. This is the first thing the reader sees.

Video background

Full-viewport hero with drone footage. The headline and subtitle sit over a dark gradient for readability.

Photo background

Aerial photography with headline overlay. Any high-resolution image works — landscapes, portraits, abstract textures.

When to use

  • The opening of every story — this is your "front page" moment that sets the mood
  • When you have strong visual assets: drone footage, a striking landscape photo, bold graphics, or an animated illustration
  • When you want the reader to feel immersed before they start reading

When NOT to use

  • In the middle of a story — use a ScrollySection instead (see the Scroll tab). A Hero is always the opening
  • If you only have text and no visual — a Section with generous spacing is simpler
  • More than once per story — one Hero sets the tone; a second one confuses the reader

Configuration

  • Background visual: video loop, photograph, illustration, solid colour, gradient, or animated graphic. Video loops should be short (10-30 seconds) and will autoplay silently
  • Headline text: your story title, displayed large over the background. Automatically gets a dark gradient behind it for readability
  • Subtitle text: a secondary line under the headline — use it for a byline, date, or a one-sentence teaser
  • Kicker text: a small label above the headline — useful for series names, organisation names, or topic labels
  • Scroll-pin effect: when enabled, the hero "sticks" on screen while the reader scrolls, creating a cinematic scroll-through before releasing into the story. Can be turned off for a simpler static hero
  • Pin duration: how long the hero stays pinned before the reader scrolls past it — short for a quick reveal, long for a slow cinematic entrance
  • Mobile: pinning is automatically disabled on phones so the story scrolls naturally on touch. The hero still fills the screen but doesn't pin
  • Sound: heroes autoplay silently. If your video has audio, it won't play — use an audio player component later in the story if you need sound

Limitations

  • One hero per story — putting two back-to-back breaks the scroll flow
  • Video backgrounds should be short loops (10-30 seconds) — long videos waste bandwidth and the reader won't wait
  • On mobile the scroll-pin effect is disabled — the hero becomes a static full-screen visual
  • The hero does NOT change visuals as the reader scrolls (that's what ScrollySection does). It's a single dramatic opening, not a multi-step narrative