Docs Core Concepts Page Structure

Page Structure

An Impulse page is built in one of two modes, and the mode decides what you are building.

Classic is the default. Every new page is created in Classic mode: a normal top-to-bottom scrolling document made of sections, each owning its own background. To build one you create a page and add sections. There are no screens, no environment, and no reveal animations.

Cinematic is the opt-in mode, switched on by hand in Page Settings. A cinematic page is a sequence of full-viewport screens that fly over one static animated environment. Screens are equal members of one flat list: there are no separate "Hero" and "Body" zones, and there is no such thing as a cinematic hero — a hero is a Classic-mode idea.

Everything below about screens, the environment, reveals and snap navigation applies to Cinematic pages only.

Screens

A screen is one full-viewport panel; a page is a list of them. Each screen:

  • fills the viewport (100dvh);
  • has its own background (color, image, video, or transparent to let the page environment show through);
  • has its own entrance Reveal animation (see below);
  • in Snap mode, is navigated one at a time by scroll wheel / swipe / arrow keys.

On a cinematic page, add a screen by dragging a section from the block palette into the canvas, or with + Add Screen at the bottom of the screen list. On a Classic page there is no screen list: you add sections and they flow down the document.

The screen list (left sidebar)

The screen list is a single flat list: an Environment entry at the top, then every screen on the page.

  • Environment — click to open the page-wide environment settings.
  • Screen rows — click to focus, double-click to rename, drag to reorder.

The active screen (the one currently shown in the canvas) is highlighted.

Environment (page-wide)

One environment renders behind every screen — it is a single page-wide layer, not tied to any zone. Open it from the Environment entry at the top of the screen list.

Environment effects: cosmos · wave · lava · glass · fractal · caustics · aurora · neon · corridor · flow · blob · and others.

Screens with a transparent background show the environment through them; screens with a solid background color cover it.

The environment renders in Snap scroll mode. In Classic scroll mode the page is a plain scrolling document and no environment renders — an animated backdrop behind flowing content would hurt legibility.

3D image: instead of a generated effect, pick a depth-paired image as the page background — also in the Environment panel.

Per-screen reveal (entrance animation)

Every screen has its own entrance animation, set with Reveal Effect in that screen's settings. A screen with no reveal set falls back to the page-level default reveal, set in Page Settings, Reveal Effect. The page sets the default for the whole deck and any screen can override it. (Reveal applies in Snap mode only; see Scroll mode below.)

Presets: none · z_depth · rise · fall · glide · dissolve · depth_spring · depth_vortex · depth_zoom · morph · door · swirl

Speed: each screen also carries its own Speed slider next to Reveal Effect (0-100%). Empty / unset = inherit the page-level speed. Higher = snappier transition into that screen; lower = slower / more dramatic.

Sensitivity (1-4): how many wheel ticks or swipes are needed to advance into that screen. Default 1 (a single tick advances). Set higher when you want visitors to commit to a moment before it passes: with Sensitivity 3, three same-direction ticks fire the reveal; reversals count against the total but never zero it, so a hesitant down-up-down still progresses. Snap mode only.

Depth (z_depth family only): how far the outgoing screen recedes before the next one snaps to focus. Empty = page-level default.

z_depth is the free baseline. Pro presets require a platform account.

Scroll mode (Snap vs Classic)

A page uses one scroll mode for all of its screens:

| Mode | Behavior | |---|---| | Snap (Cinematic) | Cinematic full-viewport panels. Scroll wheel / swipe / arrows advance one screen at a time, each revealing with its entrance animation. The environment renders behind every screen. A screen whose content is taller than the viewport scrolls internally before advancing. | | Classic (default) | The page scrolls as a normal vertical document. Sections own their own backgrounds. No environment and no reveals — a clean reading surface, and what every new page starts as. |

Setting it: open Page Settings (the panel shown when no screen or block is selected) and pick Classic or Cinematic. Classic is selected on every new page; Cinematic is a deliberate switch. Stored as the page setting body_scroll (classic / snap). The mode is page-wide; there is no per-screen scroll mode. In Classic, sections size to their content rather than being forced to full viewport height. Each screen also gains a Min height slider (vh) in its own settings (replacing the snap-only Reveal controls) so a chosen section can still be full-screen or any minimum height.

Reveal effects are a Snap-mode feature. In Classic (Native vertical scroll) mode no reveal animations play, the page is a plain scrolling document, and the Reveal Effect controls are hidden in Page Settings while Native vertical scroll is on. The environment is off in Classic too (see Environment above).

Navigation (Snap mode)

| Input | Action | |---|---| | Scroll wheel (desktop) | Advance to next / previous screen | | Two-finger swipe (trackpad / touch) | Advance to next / previous screen | | Arrow keys ↑ ↓ | Advance to next / previous screen | | Nav dots (optional) | Click a dot to jump to that screen | | #hash in URL | Jump directly to a named screen on load |

Infinite loop (Page Settings): when on, scrolling past the last screen returns to screen 1. When off, the last screen is the end.

Screen naming and CSS IDs

Each screen has a Name (shown in the screen list) and a CSS ID (the #hash anchor in URLs). Edit both by double-clicking the row in the screen list. Auto-generated IDs follow the pattern screen-{element_id}.

Do

  • On a Cinematic page, set the environment first (the Environment entry), then design the screens. On a Classic page there is no environment to set.
  • Keep each screen to one strong message — screens are full-viewport.
  • Name screens meaningfully — the CSS ID becomes the URL anchor.
  • Use Classic scroll for document-style, content-heavy pages where a cinematic backdrop would distract.

Don't

  • Don't look for a separate "Hero" area on a cinematic page — every screen is equal, and a "cinematic hero" is not a thing. The first screen is simply the first thing visitors see.
  • Don't assume a page is cinematic. Unless someone switched it, it is Classic.
  • Don't rely on the environment in Classic scroll mode — it is off there by design.