Motion and interactions

States and motion

The editor supports hover and press styling alongside entrance, loop and scroll effects. Start with a readable static design, add one effect at a time, then verify it in preview. Use duration and easing deliberately; avoid essential content depending on a long animation.

Animation

Every motion setting lives in the Effects tab of the inspector and compiles to plain CSS, so a published page animates without an animation library and stays readable without JavaScript.

• Entrance. Presets (fade, rise, drop, slide, zoom, blur, pop, reveal wipe) or Custom, which combines start opacity, X/Y movement, scale, rotation and blur. Arrive word by word, letter by letter, or with Children one by one to stagger a container's direct children. Plays chooses once or every time the layer comes back into view; Trigger offset sets how far up the screen it must come before it starts.
• Curves. Ease uses a cubic-bezier editor with presets. Spring uses real stiffness, damping and mass: the spring is simulated and shipped as a CSS linear() easing with a cubic fallback, so it can overshoot and settle. A spring's length comes from its physics, shown under the curve graph.
• Hover and press. Besides colour, opacity and scale, hover can lift, move, rotate, tilt in 3D and blur; press can push down. State transition replaces the default ease with your own curve or spring for both states.
• Scroll. Fade, rise, parallax, zoom, blur, slide, rotate and shrink effects are tied to the layer's progress across the viewport. Runs picks the range: while entering, the whole pass, while fully visible, or while leaving (which plays the effect in reverse).
• Loop. Pulse, float, sway, spin, bounce, wiggle and breathe, with amount, delay, direction (forward, reverse, yoyo) and smooth or constant speed. A loop on a layer with an entrance starts after the entrance finishes.
• Preview. Play runs the selected layer's entrance on the canvas with the same keyframes and timing as the published page; All plays every entrance on the page. Preview interactions tests hover, press and state transitions.

Visitors who ask for reduced motion get the finished layers without entrances, scroll effects or loops.

Click actions

Native click interactions include navigate, scroll-to, toggle-layer, show-layer and hide-layer. Set the target deliberately and verify that it still exists after duplicating or deleting layers. Use a real link for ordinary navigation where possible.

Carousel and marquee

1. Add the interactive composition and edit its native child content.
2. Configure autoplay, interval and direction.
3. For a carousel, review arrows, dots, swipe, loop, pause-on-hover and transition settings.
4. Preview with one item and several items, then test narrow screens.

Carousel settings support slide, fade and zoom transitions. A marquee is continuous moving content; keep essential information available without requiring visitors to chase moving text.

Tabs and accordion

Headers and panels remain editable layers. A trigger and its panel share a target identifier within the disclosure composition. Preserve matching targets when editing. Verify focus, keyboard behavior and visible content in the rendered page.

Effects and accessibility

Text effects and shader visuals are decorative enhancements, not substitutes for readable text. Test contrast, reduced-motion preferences and low-powered devices. Do not assume every effect is automatically appropriate for every accessibility requirement.