Interactions & motion

Interactions

An interaction is when something happens, then run actions in order. They're data, executed by a fixed engine: creators never run code on visitors' devices.

Triggers

Click or tap, double click, pointer enters, pointer leaves
Scrolled into view, page loads (with delay), every N seconds
Key pressed (e.g. Enter, Escape, 1)
Secret code typed anywhere on the page (e.g. ohos, or [arrowup][arrowup])
Media finished

On scene-based pages only the visible scene listens to keys.

Actions

Open a link, go to / next / previous scene with a transition, scroll to an element
Show, hide, toggle, bring to front, play an animation
Set, toggle or change a variable, set or cycle the mood
Play, pause, toggle media
Copy text with a confirmation, show a message, wait

Variables

Variables hold page state. Elements can be shown only when a variable matches a condition, and text can print a value with {{var:Name}}. Other text tokens: {{name}}, {{username}}, {{views}}, {{year}}.

Motion

Entrance presets: Fade, Rise, Drop, Slide from right, Slide from left, Zoom in, Zoom out, Focus, Pop, Flip, Swing, Unfold, Glitch, Spin in, Custom keyframes.

Loop presets: Float, Bob, Pulse, Breathe, Spin, Wiggle, Sway, Flicker, Bounce, Orbit, Jelly, Drift, Custom keyframes.

Action animations: Shake, Jump, Pop, Spin, Flash, Wobble, Tada, Fade in, Fade out.

Easings include expo, overshoot and three spring curves, computed from a damped-spring simulation. Pointer effects (magnetic, tilt, follow) and parallax are disabled on touch screens and for visitors who prefer reduced motion. Entrances can start on load or when scrolled into view; the timeline lets you choreograph them across a whole scene.

Performance rules the engine follows

Only transform, opacity and filter are animated.
Canvas effects cap device pixel ratio, pause offscreen and in background tabs, and halve their density if frame rate drops below about 45 fps.
If scripts fail, hidden entrances reveal themselves after a few seconds so content is never lost.