Animated titlesthat live in the timeline.

What a composition is

HyperFrames is a free engine that turns an animated HTML page into video, frame by frame. A composition is a folder with an index.html file: the root carries the size, the frame rate and the duration; each element in time (a title, an image, a shot, a sound, a sub-composition) carries a start, a duration and a track. Animations are GSAP timelines, or CSS. It is already a timeline model, written in HTML, and that is what makes the mirror possible.

In KoraCut, a composition exists in three forms kept in agreement: the HTML in the project folder (motion/<name>/index.html, the source of truth, what the agents read and write), the clips in your timeline, and the rendered image on a transparent background, cached, that the monitor composites over your shots like any other media.

The Motion panel

It is in the Media block of Edit (⌘⌥M, or the Sequence menu). "New composition" starts from an empty template at the project's size and frame rate, or imports a HyperFrames folder, or a single .html file: everything it references locally (scripts, stylesheets, media, fonts) comes with it. The panel lists the project's compositions, their elements (name, kind, start, duration, render state), and offers "Render all" and "Open in Studio".

Its elements in the timeline

Every visual element of the composition becomes a purple clip on a "Motion · name" track, placed above your video tracks (one track per track index of the composition). Sounds go on a "Motion · name · sound" audio track. These are ordinary clips: the usual tools, undo and export work with nothing new.

You push or trim a clip

KoraCut rewrites the element's start and duration in the HTML. The image does not change, so no new render: an element's animation is relative to its own start.

You change a title's text

Double-click the clip: the inspector opens on the text field. Enter applies. Only this element is rendered again, in the background; the old one stays on screen in the meantime.

You move a sound

It is a normal audio clip, the file is the same: the HTML follows.

The HTML changes elsewhere

In the Code tab, in Studio, or through an agent: KoraCut rereads the file, adds, removes or retimes the clips, and only re-renders what changed.

What the timeline shows of an element: its place, its duration, its name, its thumbnail, and the waveform for a sound. What it does not show: the GSAP keyframes. They stay in the HTML and in Studio. Every gesture is one undo step.

Code and Studio

The Code tab of the Motion panel is an editor for the HTML: highlighting, line numbers, saving 800 ms after the last keystroke or with ⌘S. On every save, HyperFrames checks the file and its messages show under the editor; a click puts the cursor on the line. A save goes through the same path as an outside change: the timeline follows.

"Open in Studio" launches HyperFrames' visual editor in your browser, on the same files: canvas, layers, track timeline, keyframes (K key), inspector, subtitles, audio. You close the tab, you come back to KoraCut, the mirror has updated. The inspector of a Motion clip also has an "Edit the animation in Studio" button.

What it needs

KoraCut ships neither Node nor Chrome: the download stays light and one Chrome serves every project. You need Node (version 22 or later) on the machine. The rest, KoraCut does: HyperFrames installs on demand in the app's data folder, in a pinned version (an "Update HyperFrames" action changes it), and HyperFrames downloads its headless Chrome at the first render (150 MB, once).

Without Node, the Motion panel explains it and gives the link; nothing else in KoraCut depends on it. Rendering runs in the background, in the same queue as the proxies, and switches to a reduced memory mode on a modest machine. The cache is ProRes 4444 (transparency included) in the project's cache folder: heavy on disk, light to read, and reading is what matters for smooth playback.

Drive KoraCut from a terminal or an agentThe named agents