Docs Core Concepts Page Structure

Page Structure

An Impulse page is built in one of three modes, and the mode decides what you are building. Page Settings shows them as one row: Cinematic / Hybrid / Classic.

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, with no separate "Hero" and "Body" zones.

Hybrid is the third shape: a short deck of cinematic screens used as a hero, with a classic scrolling document underneath it. The visitor swipes through the deck, then the page hands over and scrolls normally. Choose it when you want a cinematic opening on a page that still has to carry real content. It was called Combo before 2026-08-27; the mode and its stored value are unchanged.

Everything below about screens, the environment, reveals and snap navigation applies to Cinematic pages, and to the deck half of a Hybrid page. The document half of a Hybrid page behaves exactly like Classic.

How many page modes there are: three page modes

There are three page modes, and Page Settings shows them in one row:

| Mode | What the page is | |---|---| | Cinematic | A deck of full-viewport screens over one animated environment. Snap navigation, reveals, no normal scrolling. | | Hybrid | A short cinematic deck used as a hero, with a classic scrolling document under it. | | Classic | A normal top-to-bottom scrolling document of sections. The default for every new page. |

Pick one in Page Settings > Mode. The mode is page-wide: there is no per-section or per-screen mode.

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.

Hybrid mode, formerly Combo: a cinematic hero with a scrolling page under it

Hybrid is a cinematic deck used as a hero, with a normal scrolling document beneath it. The visitor swipes through the first few full-viewport screens, and once the deck ends the page hands over and scrolls like any Classic page.

Use it when the opening should be cinematic but the page still has to carry real content: a product story over a spec sheet, a studio intro over a catalogue.

  • Set it in Page Settings > Mode > Hybrid, then set how many screens

    • belong to the deck. Sections above that count are screens; everything after it is document.

  • The deck half behaves like Cinematic: reveals, the environment, snap

    • navigation.

  • The document half behaves like Classic: sections size to their content,

    • no environment, and reveals play on scroll rather than on screen arrival.

  • The mode was called Combo until 2026-08-27. Only the label changed.

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 Cinematic, Hybrid or Classic. 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 the first screen is simply the first thing visitors see. A cinematic hero over a scrolling document is a real shape, but it is its own mode, Hybrid, not a zone inside a cinematic page.
  • 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.