Docs Core Concepts Page Structure

Page Structure

Every Impulse page is a single top-to-bottom sequence of full-viewport screens. There is no mode switcher and no page type to choose — every new page is ready to build from the start.

All screens are equal members of one flat list. There are no separate "Hero" and "Body" zones, no Hero/Body boundary, and no hero-screen count. (Page mode, Scene mode, and Hybrid mode no longer exist as separate concepts either — the structure is unified.)

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.

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.

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 (default) | 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 | The page scrolls as a normal vertical document. No environment — a clean reading surface for content-heavy pages. |

Setting it: open Page Settings (the panel shown when no screen or block is selected) and toggle the Native vertical scroll checkbox. Unchecked = Snap, the default cinematic deck. Checked = Classic native vertical scroll. 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

  • Set the environment first (the Environment entry), then design the screens.
  • 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 — every screen is equal. The first screen is simply the first thing visitors see.
  • Don't rely on the environment in Classic scroll mode — it is off there by design.