Skip to main content
Most HyperFrames time isn’t the first render — it’s the twenty edits after it. A composition is plain HTML with data-* timing attributes and a GSAP timeline, so every edit you’d make in a non-linear editor maps to a specific, inspectable change in the source. You don’t re-specify the video; you name the edit the way you’d say it to a human editor, and the agent makes the smallest change that does it. This page maps the editor verbs to the prompts that land them. The examples name elements from a typical composition — swap the noun (“the lower third”, “scene 2”) for whatever yours is called. Two habits from Iterating apply to every one of them, so keep them in mind: change one thing per render, and state targets as absolute values (“scene 2 = 2 seconds”, not “a bit shorter”) so the agent lands it in a single pass instead of oscillating.

The verb → edit map

Every timeline verb resolves to a data-* attribute or an inline style. This is what each one touches under the hood — useful to know because it’s why absolute targets work and why some edits are cheap:
You sayEditor verbWhat the agent edits
”start scene 2 later / earlier”Movedata-start
”put the captions on top of the video”Restackdata-track-index + inline z-index
”end the logo sooner”Trim (right)data-duration
”skip the first second of the clip”Trim (front, media only)data-media-start / data-playback-start
”make scene 2 two seconds long”Retimedata-duration (and the GSAP timeline length)
“the audio bed is too loud”Leveldata-volume
The mental model the Studio timeline uses: move changes when a clip starts, right trim changes when it ends, and front trim only exists for media clips — a <video> or <audio> can skip into its own content, but a GSAP-driven <div> can’t start halfway through its animation. See Timeline editing for the full clip-type breakdown. One more surface the map can’t show: retiming a scene that spans the whole composition also needs the root’s data-duration bumped — the root governs total length, so a longer child never renders past it.

Trim, move, and restack

These are the pure-timing edits — no visual change, just when and where a layer lives on the timeline.
Trim the intro so it ends at 0:03 instead of 0:05.
Move the lower third to start at 0:06.
The captions are rendering behind the video — put them on a higher track so they sit on top.
Bound moves by the composition’s length — a 4-second clip moved to 0:08 in a 10-second video barely appears before the end. And absolute targets matter most here: “make the intro shorter” invites a guess; “the intro should end at 3.0s” is a single data-duration write with nothing to overshoot.
  • tighten up the opening
  • intro clip duration = 3s; leave its animation and position alone — one attribute, and the freeze clause stops a rebuild from drifting on axes you’d already settled
Before — the untouched composition. After — four verbatim edits from this page (move, right-trim, retime, restyle-with-freeze); each touched exactly the attribute the verb map promises, gates green after every edit.

Split a scene

The Studio timeline exposes move and trim as drag gestures but does not yet offer split, slip, slide, ripple, or roll. You can still split by directing the agent, because it edits the HTML directly — a split is just one clip becoming two with adjusted data-start / data-duration:
Split scene 2 at 0:04 so I can drop a transition between the two halves.
Name the exact cut point. The agent turns one clip into two adjacent clips; you then treat each half as its own layer.

Retime a scene

Retiming is a duration change, but with one catch worth knowing: a scene driven by a GSAP timeline needs the timeline to be at least as long as the new duration, or the render cuts off early.
Make scene 2 run 4 seconds instead of 2.5 — keep the animation, just give it more room.
  • stretch scene 2 — ambiguous whether you mean slower motion or a longer hold
  • scene 2 duration = 4s, same motion, add the extra time as a hold at the end
If a retimed scene cuts off before its new end, the fix is extending the GSAP timeline length (the tl.set({}, {}, <seconds>) sentinel pattern). The agent handles this; it’s the single most common reason a lengthened clip renders short. See the Video editor cheatsheet.

Make it snappier (retiming feel, not just duration)

“Snappier,” “punchier,” “more relaxed” are pacing words, and they map to concrete easing and timing choices — Vocabulary has the full table. The agent reads “snappy” as a decisive ease (power4.out) and tighter durations, “dreamy” as slow symmetrical motion, and so on.
Make scene 2 snappier — quicker entrances, harder cuts.
The reveal feels robotic; give it a bouncy overshoot.
Change one scene’s feel per render so you can attribute what helped. If a scene keeps missing, strip it to the minimal version (subject + its motion only), confirm it reads, then re-layer.

Adjust a keyframe

Individual animation properties are editable — the value, the ease, the timing of any tween. You can direct these by prompt, or edit them yourself in the Studio Design Panel; either way they resolve to the same GSAP code.
The title slides in from too far — change its entrance to travel 40px, not 200.
Give the add-to-cart item an arc instead of a straight diagonal, like it’s being tossed into the cart.
State the property target absolutely (Move X = 40, arc curviness ≈ 1.5). Keyframes & arc motion covers what’s editable, arc-motion paths, and gesture recording.
For an element-specific edit, the Design Panel’s clipboard icon copies structured context — the element’s id, position, size, and current animation — ready to paste into your prompt. It gives the agent exact spatial context instead of a vague “the title.”

Swap an asset

Replacing a video, image, logo, or audio track is a source-swap. The one rule: name the path. The agent will search for “my logo,” but a path skips the search and removes the ambiguity of which file you mean.
Replace the background music with assets/track.mp3.
Swap the hero image for assets/product-v2.png and keep its animation.
  • use the new logo
  • swap the logo for assets/logo-2025.svg

Change copy

On-screen text is edited verbatim when you quote it. Unquoted text gets paraphrased — the agent treats a description as an instruction to write copy, not to place it exactly.
Change the headline to “Ship faster.” — exact text, keep the styling.
  • update the title to say something about speed
  • title copy: "Ship faster."

Restyle one element

Visual tweaks — color, size, weight, position of a single element — are where the “freeze the rest” clause earns its keep. Without it, a restyle prompt can trigger a rebuild that drifts on layout or motion you’d already approved.
Make the CTA button 20% larger and switch it to the accent color — don’t touch anything else.
  • make the CTA pop more
  • CTA background = accent color, font-size = 1.2× current; framing and motion are right, leave them

Iterating

One variable per edit, absolute targets, freeze what works

Vocabulary

Pacing and easing words that retime the feel of a scene

Timeline editing

Which edits the Studio timeline persists, and how

Video editor cheatsheet

The data-* attributes as timeline controls