Animation Editor

Per-layer timing controls plus one-click motion strategies — fine-tune motion without touching code

The Animation Editor is two coordinated surfaces in the Design Studio that let you control motion without writing code or learning After Effects:

• Per-layer editor — appears in the right Style panel when any layer is selected
• Canvas-level panel — applies a coherent strategy across every layer at once

Both write to the same animation property on each layer that the AI agent uses, so user-applied and AI-applied animation are indistinguishable in the saved design.

Per-layer editor

Click any text, shape, image, or CTA on the canvas. The right Style panel shows an Animation section with these controls:

Control	What it does
Enter preset	Pick one of 14 presets (fade-up, scale-in, pop, slide-* in 4 directions, wipe-up/down)
Enter delay	Milliseconds to wait before this layer’s entrance begins (0-3000ms)
Enter duration	Milliseconds the entrance transition takes (50-2000ms)
Exit preset	Same vocabulary as enter; leave empty if the layer should stay until end
Exit at	Milliseconds into playback when the exit begins
Exit duration	Milliseconds the exit transition takes
Loop	Continuous motion while on screen — pulse, wiggle, breathe, rotate-slow

Sliders are debounced 250ms, so dragging the duration knob doesn’t thrash the runtime or trigger autosave on every pixel. When you stop moving, the new value commits, the keyframe snapshot rebuilds, and playback continues from the updated baseline.

Selecting an animated layer auto-pauses playback. You don’t fight a moving target while editing — adjust freely, then press Play again.

Editing in the middle of playback

You can change anything about a layer at any time without breaking motion:

• Move it — drag to a new position; the runtime invalidates the keyframe snapshot and rebuilds from the new resting state
• Restyle — change fill, fontFamily, opacity, stroke; motion uses your new property as the “rest” state
• Retype — animations are property-of-layer, not property-of-text; type a new headline and motion plays on the new copy

This is the difference between “animation as a layer property” and “animation as a baked video.” Other tools force you to re-render the whole clip. Hiveku’s runtime reads the current layer state on each play and rebuilds keyframes on the fly.

Canvas-level Animation panel

The right side of the editor has an Animation panel separate from per-layer controls. It applies a coherent strategy across every layer in one click. Four strategies ship by default:

Cascade Fade-Up

Headline 0ms → subhead 200ms → CTA 400ms (with a soft pulse loop). The safe default for modern designs.

Kinetic

Each text element snaps in from a different direction with a 120ms stagger. High-energy ads, quote cards.

Hero Scale + Fade

Main visual scales in over 900ms; copy fades around it. Product launches, brand statements.

Slideshow

Multi-slide enter+exit at fixed offsets so they swap. Reels, Stories, sequential frames.

Clicking a strategy:

• Replaces enter/exit presets across every animatable layer
• Preserves existing loop motions — a CTA that was pulsing keeps pulsing after re-strategy
• Updates canvas-level duration if the new strategy needs more time
• Shows a 4-second inline status banner confirming what was applied (with aria-live="polite" for screen readers)

You can switch strategies as many times as you want — there’s no commit button, no save dialog, no file changes. Try Cascade, then Kinetic, then back to Cascade. The Animation panel is a quick way to explore.

Total canvas duration and loop

Below the strategy buttons, the panel shows:

• Duration (ms) — total length of one playback cycle
• Loop on/off — whether playback restarts when it reaches the end
• FPS — only relevant at MP4 export time (default 30)

The AI agent reads these values when deciding how to time animations. If you set duration to 8000ms, the agent won’t put an exit_at past 8000ms. If you flip loop off, the agent stops adding looping motions.

How the runtime works

Under the hood, the CanvasAnimator class manages playback with a snapshot-and-restore model:

1. On Play, it reads every layer’s current properties (position, scale, opacity, rotation) into a WeakMap snapshot
2. On each frame, it computes the layer’s state for the current time based on the layer’s animation property
3. On Pause/Stop, it restores the snapshot — every layer returns to exactly where it was

This means:

• Drift-free — playback never permanently changes layer properties
• Edit-safe — invalidating a snapshot (drag, type, restyle) just rebuilds it from current state
• Memory-clean — the runtime disposes itself when the canvas unmounts, no orphaned animation frames

You don’t need to know any of this to use the editor. But if you’ve fought After Effects’s “ghost values” or Canva’s “lost edits when you press play again,” the snapshot model is the architecture choice that prevents both.

Reading what the AI did

When the AI agent applies animations, the response will look something like:

“Cascading fade-up — headline first at 0ms, subhead at 200ms, CTA at 400ms with a soft pulse loop. Total duration 5000ms.”

Click any layer the agent animated, look at the right Style panel, and you’ll see the exact same values exposed as dropdowns and sliders. There’s no hidden state. Everything the AI authored, you can edit.

If the AI’s response says “applied animations to N layer(s)” but you don’t see motion on press Play, check the Animation panel — total canvas duration may have rolled back. Set it longer than the latest exit_at + exit_duration and try again.