Section

A section is a row of your page. Drop one in to start a new band of content. Sections stack vertically and fill the page width by default.

Every page is made of screens — sections ARE screens. Visitors scroll between screens; within a screen, the section holds your content.

The settings panel has two tabs: Layout and Animation.

When to use it

A new band of content (hero, feature row, testimonial, footer)
A wrapper around a group of blocks that share alignment, padding,

background, or animation

When not to use it

A single inline piece of content — use a Button or Text block
Inside another section — nest a Grid, Rows, or Columns instead

Layout tab

Full Width — toggle (default: off)

When on, the section ignores the page's max content width and fills the viewport edge to edge. Use for full-bleed hero images and dark footer bands.

Direction — button group: ↓ (column, default) · → (row)

Stack the section's children vertically (↓) or arrange them horizontally (→).

Content Width — slider, 20–100% (default: 100)

Width of the inner content as a percentage of the section's available space. Drop to 60–80 for narrow centred text columns.

Content Gap — slider, 0–80px (default: 0)

The gap between the section's children.

Padding Top / Bottom / Left / Right — sliders, 0–200px (default: 20)

Inner padding on each side. The section's background extends through the padding — only the content is inset.

Height Mode — button group: Auto · Min vh · Aspect · Fixed px (default: Auto)

Auto: section grows to fit its content
Min vh: minimum height as a percent of the viewport
Aspect: maintains a width-to-height ratio
Fixed px: locks the section to a pixel height

When Min vh is selected: a Min Height slider appears (0–100, default 60). When Aspect is selected: an Aspect Ratio button group appears with 16:9, 21:9, 4:3, 1:1. When Fixed px is selected: a Height slider appears (100–2000, default 600).

Alignment — 9-dot grid + Spread button

The 9-dot grid sets where the children sit inside the section (content_align × valign: left/center/right × top/center/bottom). Spread distributes children evenly across the section's height (or width, when Direction is →) instead of clustering at one anchor.

Background — 4-corner mesh gradient · Image button

Section background. Four colour swatches map to the four corners of a mesh gradient — each swatch controls one corner's colour and opacity (alpha in the colour picker). When only the first swatch is opaque and the rest are transparent, the result is a plain solid colour. The Image button opens the media library to set a background image.

When any gradient swatch is non-transparent, additional controls appear:

Distort — slider, 0–100 (default: 0). Randomly warps the mesh

for organic, non-linear colour fields.

Mouse — slider, 0–100 (default: 0). Mouse-reactive distortion —

the mesh deforms as the cursor moves over the section.

Grain — slider, 0–100% (default: 0). Film-grain layer rendered

over the gradient mesh.

Padding — slider, 0–200px (default: 0). Insets the background

fill from the section edges. Most useful when Distort edges is on — pulling the fill inward keeps the heavily-distorted edges away from the page boundary.

Distort edges — toggle (default: off). When off, section edges

stay clean; when on, distortion extends to the edges.

When a background image is set: a 9-dot Position picker and a Cover · Contain button group appear.

When the section is the active screen, this group is labelled Screen Background.

Overlay — gradient · two swatches · swap

A gradient layer over the background for tinting or darkening. Two colour swatches define the start and end colours; the swap (⇆) button reverses them. Both swatches support full alpha — set one to transparent for a one-sided fade; use matching colours at different opacities for a plain tinted vignette. Use this to improve text legibility over busy backgrounds without obscuring them entirely.

Video Background — URL field

Plays a silent video as the section background. Mobile shows the poster fallback. Set a fallback image URL via the secondary input.

Overlay

Merged into the Overlay section above (now a two-swatch gradient with per-swatch alpha instead of a separate opacity slider).

Visibility — collapsible

Hide the section based on viewer state (Off / All / Logged In / Logged Out).

Tilt — divider with inline toggle (default: off)

Mouse-reactive 3D tilt on the section's children. When on, an Intensity slider (0–100%, default 50) appears.

Note: Tilt is disabled for screens (it competes with the global 3D environment). Use it on nested content sections inside a screen.

Ambient — 4×2 button grid + Off

A subtle full-section background animation. Stacks with bg colour, gradient, and image.

Float · Shine · Ripple · Glitch
Pulse · Prism · Aurora · Spotlight

When an effect is selected:

Intensity slider, 0–100% (default 50)
Hue slider, 0–360° (default 200) — appears only for

colour-aware effects: Pulse, Spotlight, Aurora

Over content toggle — appears only for Shine, Pulse, Prism,

Aurora, Spotlight; controls whether the effect renders on top of or behind the children

Note: Ambient is disabled for screens. Use it on nested sections or content blocks inside a screen.

3D Reveal — scroll-triggered section entrance

When a preset is active, the section and all its content start in a concealed state (distorted, blurred, fragmented, etc.) and play a one-time reveal animation the moment the section scrolls into the viewport. Unlike per-block entrance animations (which animate individual elements), 3D Reveal obscures and reveals the whole section at once.

Click a preset to activate; click again to deactivate.

18 presets (4-column grid): Noise · Ripple · Liquid · Shatter · Static · Melt · Focus · Tumble · Tunnel · Wave · Bars · Cards · Aperture · Zipper · Pinwheel · Crosscut · Blinds · Diamonds

When a preset is active, four sliders and an easing picker appear:

Intensity — slider, 0–100 (default: 55). Effect strength — how

hidden the section is before the reveal.

[Per-preset parameter] — slider, 0–100 (default: 40). Name

changes per preset: Waves for Ripple, Grain for Shatter, etc. Controls the effect's primary variable (wave count, grain density…).

Depth — slider, 0–100 (default: 40). Z-axis depth of the

concealment.

Speed — slider, 0–10 (default: 5). Reveal animation speed.

Easing — button group: Glide · Snap · Spring (default: Spring). Motion curve for the reveal animation.

Animation tab

The Animation tab is the section's background-animation engine — configurable layered effects rendered behind the content. Separate system from Tilt and Ambient (which live on Layout). Use this for richer, layered motion that the simple presets can't express.

Animation — toggle (default: off)

Master switch for the background-animation engine. When off, none of the layer settings render.

Animation Layers — repeater

When the toggle is on, this is where layered effects are configured. Each layer is its own effect (rings, lava, waves, etc.) with its own settings (speed, opacity, blend mode, colours). Add layers with + Layer, drag to reorder, click to expand and edit, × to remove.

The available effects depend on which presets the install ships with. Each layer's full options open inline when the layer is expanded.

Screen Entrance

A Screen Entrance preset picker sits at the top of the Animation tab. It controls how this screen animates in when the visitor scrolls onto it. Applies to every section since all sections are screens.

Per-device overrides

Almost every Layout setting has separate Tablet and Mobile values at the top of the panel. See concepts/responsive-overrides.

Common overrides:

Padding Top/Bottom — usually smaller on mobile (40–60 vs 120–160)
Direction — switch from → on desktop to ↓ on mobile when stacked

cards are too narrow on phones

Content Width — sometimes 100% on mobile

Common patterns

Hero band

Full Width on · Padding TB 80–160 · Content Width 80% · Alignment centre-centre. Optionally Min vh 90, Tilt on, Ambient set to Aurora or Float.

Three-card row

Direction → · Content Gap 24 · three children. For evenly-styled cards, prefer a Grid; for distinct per-cell styling, Rows.

Card over background image

Set a background image · Overlay on · start colour #000000 at 60–70% opacity, end colour transparent · white text inside. The overlay is essential: without it white text disappears into the image. For a uniform tint (no gradient), set both swatch colours to #000000 at the same opacity. For a bottom-fade vignette, start = opaque at bottom, end = transparent at top (swap the swatch order accordingly). When building multiple cards in a grid that all use this pattern, keep overlay settings identical across cards so the visual weight matches.

Footer

Full Width on · dark background (#1a1d21 or #1d2327) · Padding T 64 B 32.

Quote pull-out

Narrow Content Width (50–60) · large Padding TB (120+) · italic text inside.

Don't

Don't nest sections inside sections. Use Grid or Rows

for multi-cell layouts inside a section.

Don't enable Tilt on text-heavy sections — distracting.
Don't pile multiple Ambient effects on one section. Pick one.
Don't use a background image with light text without enabling the overlay. Without it the text is invisible over any photo. Start the overlay at ~60% opacity and adjust from there.
Don't set Min vh on every section — only the hero. Auto everywhere

else lets content breathe.

Don't confuse the Layout-tab Ambient (preset-based) with the

Animation-tab Animation Layers (engine-based). They're different systems.

blocks/grid — for evenly-distributed columns inside a section
blocks/rows — for grid layouts where each cell is

independently styled

blocks/columns — for absolute-positioned children inside a

section

concepts/page-modes — the flat screen sequence + page-wide environment
concepts/responsive-overrides — how the per-device tabs work
concepts/page-overlay — the page-wide overlay set in Page Settings