Building editable beat templates for a browser video editor

A beat template in Timeline Studio starts with a set of media slots and ends with clips you can select on the timeline. In the Memory Vortex example, photos and video stills first appear as panes of a rotating glass tunnel. At 2.70 seconds, the tunnel cuts to the first full-screen shot. The next 48 shots use the same set of media bindings. Release notes

That reuse creates an interesting constraint. If a video shot starts partway through a source file or plays at a different rate, the pane in the opening should show a frame from the shot that actually follows.

One set of bindings, two outputs

The template stores a cut schedule measured on a 30 fps reference. The reference tempo is 106 BPM. Applying the template scales the measured offsets by the ratio between the reference tempo and the selected tempo, so the gaps between cuts and their markers move together. At the default tempo, frame 81 becomes the first full-screen shot.

const secondsPerReferenceFrame = (106 / selectedBpm) / 30;
const timelineTime = start + referenceFrame * secondsPerReferenceFrame;

The template resolves its media slots into actual shot ranges before preparing the opening. The same resolver supplies the full-screen clips. Those clips, the opening effect, beat markers, and optional soundtrack are added as ordinary editor objects. The smoke project for the example contained 49 visual clips, one opening effect, and one music track. Shot preparation and timing · Cut and transition schedule

Prepare the stills once

For a video slot, the atlas builder converts the midpoint of the timeline shot into source time. When multiple slots refer to the same source, it groups them, sorts their requested timestamps, and removes duplicates before extracting frames. The extraction path tries WebCodecs and can fall back to seeking a video element. Photos are decoded and center-cropped into their assigned tiles.

The result is a WebP texture atlas with 8 columns × 6 rows. Each tile is 224 × 280, which gives a 1792 × 1680 image. A decoded RGBA copy of that image is about 11.5 MiB. This bounds the size of the texture the effect samples, while the timeline clips still reference their original media. Atlas builder · Frame extraction

During playback or export, the Canvas 2D effect computes its pane geometry from the current time within the clip. It clips to each visible polygon and uses the source-rectangle form of drawImage() to paint the corresponding atlas tile. The drawing step can then render a frame at any requested timestamp, including a jump during scrubbing, using the prepared image and the effect settings. Canvas renderer

Keep the next beat in place when replacing a clip

A replacement is a local edit. If the timeline clip lasts two seconds and the user selects three seconds from another video, the replacement plays at 1.5×. The editor keeps the clip ID and timeline duration, then updates its media and source range. Reapplying the template with new bindings is the separate operation that rebuilds the opening atlas. Clip replacement

To reproduce the sequence, open Templates → Memory Vortex Beats in the browser editor, keep the sample media and default tempo, and apply the template. At 30 fps, inspect frames 80 and 81 in the export to see where the opening hands off to the first shot. The Timeline Studio repository contains the editor and the template definitions.

Disclosure: AI drafted this article using the released source, project records, and exported frames.