> ## 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.
# 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:
Headline 0ms → subhead 200ms → CTA 400ms (with a soft pulse loop). The safe default for modern designs.
Each text element snaps in from a different direction with a 120ms stagger. High-energy ads, quote cards.
Main visual scales in over 900ms; copy fades around it. Product launches, brand statements.
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`](https://github.com/locus2012/hiveku_builder/blob/main/src/components/design/fabric/CanvasAnimator.ts) 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.