Modal

A modal / overlay that opens on a chosen trigger and animates in with one of four engines. The 9-position picker turns the same block into a centred dialog, edge-to-edge banner, side drawer, or corner toast — all from one settings panel.

When to use it

Newsletter signup modal
Cookie / consent banner (top or bottom)
Side drawer for cart / filters / nav
Toast notification anchored to a corner
Image / content lightbox

When not to use it

Slide-out side panel triggered from a button — use Modal

(it's the same idea but simpler)

Inline disclosure — use Unfold

Trigger — Click · Timer · Scroll · Exit Intent (default: Click)

How the popup opens.

Click — opens when a button or link points to the popup's

ID anchor (#popup-xyz)

Timer — auto-opens after a Delay (slider, 1–30s, default 3)
Scroll — auto-opens after the page scrolls past Scroll %

(slider, 10–100%, default 50)

Exit Intent — opens when the cursor moves toward closing

the tab

Animation — Depth · Parallax · Tilt-fall · Glass (default: Depth)

The reveal engine.

Depth — translateZ far → 0 with blur decay
Parallax — depth push, then mouse-tracked tilt while open
Tilt-fall — rotateZ + translateY drop with overshoot
Glass — frosted-glass pane + rotating conic border

Options + Position

Left column — three checkboxes:

Close button (default: on)
Close on overlay click (default: on)
Once per session (default: off) — only show once per browser

session

Right column — 9-dot position picker (3×3):

Centre — centred dialog
Top centre / Bottom centre — full-width banner
Centre left / Centre right — full-height drawer
Four corners — anchored toast popups

Colours (2-up row)

Overlay — backdrop colour (default: rgba(0,0,0,0.5))
Background — popup fill (default: #fff)

Sliders (position-aware)

The available sliders depend on the chosen position:

Width — 200–900px (default: 500 centre / 360 corner / 420

drawer). Hidden for top/bottom banner positions.

Height — 0–600px (default: 0 = auto). Hidden for drawer and

corner positions.

Padding — 0–60px (default: 24)
Radius — 0–30px (default: 0)

Edge effect — Glow · Specular · Caustic · Pressure (toggleable, default: off)

A premium edge treatment around the popup card. Click the active button again to turn the effect off.

Popup Link

A unique ID is generated per popup (e.g. popup-42). Copy the #popup-42 link and set any button's link to that anchor — the button will open this popup.

The hint reads: "Set any button's link to #popup-xyz".

Background shapes

Standard background-shapes widget at the bottom (decorative shapes behind the popup content).

Per-device overrides

Position, Width, Height, Padding, Radius all have per-device values.

Common overrides:

Position — top-banner desktop / centre on mobile
Width — auto (smaller defaults) on mobile

Common patterns

Newsletter modal

Trigger Timer · Delay 6s · Once per session on · Position Centre · Animation Depth · Width 480 · Height 0 · Padding 32 · Radius 12.

Cookie banner

Trigger Click (or open programmatically) · Position Bottom centre · Animation Tilt-fall · Edge effect Glow.

Right drawer (cart)

Position Centre right · Width 400 · Animation Parallax.

Top-right toast

Position Top right · Width 360 · Height 0 · Once per session on · Animation Glass.

blocks/off-canvas — for left/right drawers (a simpler subset

of Popup with only drawer behaviour)

blocks/button — for the trigger button that opens the popup