Examples

Explore working compositions, inspect their source, and adapt them to your own project.

Start with a result you can see. Play or scrub each example, change a parameter, then choose Copy to use the current source. Paste composition markup inside the HTML scaffold from Create a video; the scaffold provides the element imports and preview environment. Reset restores an example's starting state.

A typographic title card

One timegroup gives this card a five-second duration. The title uses a CSS animation; the preview controls let you inspect any point in that animation. Change Title size to see the composition and copied source update together.

Interactive example

The parameter control belongs to this documentation example. The copied markup contains a concrete font size and works without the control panel. Continue with CSS & Animations or text splitting and stagger.

A three-scene sequence

The parent runs children in order: two seconds for the first card, two for the second, and two for the third. Scrub across the scene boundaries or select a point on the timeline. The finished composition lasts six seconds.

Interactive example

For overlapping scenes and transitions, continue with the time model.

More starting points

Build thisOpen the example
A player with play, pause, and scrubbingBuild an editor
Animated words and charactersText
A trimmed video clipVideo
Captions synchronized to a timelineCaptions
A custom editor timelineTimeline
Cloud output from a local projectAutomate rendering

To export these examples, follow Create a video. To assemble your own editor around a composition, follow Build an editor.