Animation Editor

Documentation Index

Fetch the complete documentation index at: https://docs.hiveku.com/llms.txt

Use this file to discover all available pages before exploring further.

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: 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.

​

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: 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.