Elements
The elements a file is written in: the timeline (clips, tracks, transitions, captions), free code, and ready-made titles, graphics and effects. Each page shows an example as the export renders it, with the file that made it, then the element's props. Generated from the Zod schemas in packages/kit/src/jsx/schemas; run pnpm docs:gen, and pnpm docs:examples for the videos.
Timeline
<Composition>The video: frame rate, size, background and theme. It ends where its content ends.<Track>A row of elements. A sequence track plays its children back to back; a free track (layout="free") places each at its own start.<Clip>A stretch of a video or image asset, trimmed by seconds, transcript words or camera shots, with speed, fit and transform.<Gap>Empty time between clips on a sequence track.<Transition>A blend between the two clips it sits between on a sequence track.<Marker>A named point on the timeline.Free code
<Layer>Free code in the frame: any React, CSS, canvas or WebGL, placed on the timeline like any overlay; useT() is its time.<Three>A three.js scene on the timeline: plain three.js in setup, or React Three Fiber children, on the video's clock.<Motion>Children animated by a Motion sequence on the video's clock.Text and graphics
<Title>Text over the picture in the theme's type, with entrances by letter, word or line.<Captions>Subtitles from an asset's transcript that follow the clips through every trim.<Caption>One cue inside <Captions>, written by hand: its text, start and end.<Graphic>A built-in graphic by kind: lower thirds, callouts, counters, progress and more.<Shape>A vector shape (rectangle, circle, star, polygon, path) with fill, stroke and shadow.<Svg>One-off vector art from inline SVG markup or a file.<Sticker>A ready-made icon or sticker by name.Effects and colour
<Effect>A filter on its parent: brightness, blur, grayscale, vignette, grain and more.<Adjustment>Filters everything beneath it for its own stretch of time.<Mask>Shows only a shape of its clip, with a feathered edge or inverted.Motion and time
<Keyframe>Animates one property of its parent between values, with easing.<SpeedKey>Changes its clip's speed from a moment on, eased: speed ramps.<Freeze>Holds one frame of its clip for a while, then plays on.Structure
<Nested>A sequence written once as a component and placed like a clip.<Multicam>Several camera angles of one take; <Cut>s pick which one shows.<Angle>One camera of a <Multicam>: its asset and sync offset.<Cut>Switches a <Multicam> to an angle at a moment.Sound
Capabilities
| element | timed | visual | audio | trims source | transformable | children allowed |
|---|---|---|---|---|---|---|
<Composition> | track, marker, multicam, captions | |||||
<Track> | clip, audio, gap, transition, title, shape, svg, sticker, graphic, adjustment, nested, layer, multicam | |||||
<Clip> | yes | yes | yes | yes | yes | effect, keyframe, mask, speedKey, freeze |
<Audio> | yes | yes | yes | keyframe | ||
<Gap> | yes | |||||
<Transition> | yes | yes | ||||
<Title> | yes | yes | yes | effect, keyframe, mask | ||
<Shape> | yes | yes | yes | effect, keyframe, mask | ||
<Svg> | yes | yes | yes | effect, keyframe, mask | ||
<Sticker> | yes | yes | yes | effect, keyframe, mask | ||
<Graphic> | yes | yes | yes | effect, keyframe, mask | ||
<Captions> | yes | caption | ||||
<Caption> | yes | yes | ||||
<Marker> | ||||||
<Adjustment> | yes | yes | yes | effect, keyframe | ||
<Mask> | keyframe | |||||
<Nested> | yes | yes | yes | yes | yes | effect, keyframe, mask, speedKey, freeze |
<Multicam> | angle, cut | |||||
<Angle> | ||||||
<Cut> | ||||||
<Layer> | yes | yes | yes | effect, keyframe | ||
<Effect> | keyframe | |||||
<Keyframe> | ||||||
<SpeedKey> | ||||||
<Freeze> |