Everything imports from "framefields". Subpaths exist for smaller imports: framefields/effects, framefields/audio, framefields/signals, framefields/renderer, framefields/fonts, framefields/preview. Vision runs standalone from @framefields/vision (and @framefields/vision/web in browsers).
new Composition({ width, height, fps = 60, durationMs | durationFrames, backgroundColor = "#000000", fonts, antialias3d = true })
| Member |
Returns |
Guide |
add(layer | layer[], …) |
this |
Core concepts |
addAudio(audioLayer) |
this |
Audio |
addSignal(name, signal) |
this |
Signals |
apply(effect) |
this |
Effects |
section({ source, x, y, width, height, borderRadius, effects }) |
node |
Effects |
withVision(options) |
vision bundle |
Vision |
addSubjectSandwich / addSmartFraming / addSubjectOutline |
this |
Vision |
analyzeVisionSequence(src, { tasks, categories }) |
report |
Vision |
registerFont(…) / registerEmojiFont(src) |
this |
Text |
computeDuration() |
ms |
— |
lint() |
{ severity, code, message, layerId }[] |
QA codes |
toSpec() |
program JSON |
Rendering |
renderFrame({ frame, renderer }) |
PNG Buffer |
Rendering |
renderFrameGrid(options) |
PNG Buffer |
Rendering |
renderVideo(options) |
{ filePath, cleanup, qa? } |
Rendering |
onRequestFrame(ctx => …) |
this |
per-frame hook |
| Builder |
Kind |
Layer.box(opts), Layer.flex(opts) |
containers |
Layer.text(content | spans, opts) |
GPU text |
Layer.shape(type, opts) |
rect circle ellipse polygon star arrow path |
Layer.video image svg lottie audio caption (src, opts) |
media |
Layer.chart(options, boxProps) |
charts |
Layer.sequence(entries, opts) |
scenes + transitions; has totalFrames |
Layer.section(source, target?, opts), Layer.trackedRegion, Layer.blurTrackedRegion |
regions |
Layer.camera(opts) |
3D camera |
Layer.environment(preset, opts) |
PBR world |
Layer.light, ambientLight, directionalLight, pointLight, spotLight |
lights |
Layer.model(opts), glb gltf obj fbx stl ply vox threeDS off (src, opts) |
models |
Layer.cube carousel3d plane3d prism3d |
3D layout (also on Layer3D) |
Every builder’s result has:
| Method |
Does |
.animate(...animations) |
add keyframes/drivers (merges with existing) |
.withEffect(fx) / .withEffects([...]) / .apply(fx) |
effects |
.withMatte(layer, mode) / .withMask(layer, mode) |
track mattes |
.withCrop(crop) |
crop |
.withVision(opts) |
per-layer vision mode |
.pinToObject(track, opts) / .pinToLandmark(coord, opts) |
follow vision |
.blurRegion(track, opts) |
blur a tracked object |
.relight(opts), .withDeflicker(opts), .withPbrGlass(opts), .deformWithAudio(cfg) |
specialised passes |
| Export |
Members |
Layer3D |
roundedBox sphere cylinder cube carousel prism plane grid text extrudedText model + model loaders |
Light |
ambient(color, intensity) directional point spot environment |
Lighting |
studio soft sunset dramatic (rigOptions) → array of layers |
CameraAnimation.camera() |
orbit dolly truck pedestal pan tilt roll rackFocus handheld |
| Export |
Members |
LayerAnimation |
create(), fromTo, keys, fadeIn, fadeOut, slideInX, slideInY, rotateX/Y/Z, translateZ, perspective, letterSpacing, typewriter, kineticSweep, wiggle, spring, signal, colorSignal, followPath, merge |
TextAnimator |
waveRise wordPop blurIn flip3D colorSweep |
Transition |
cut crossfade fadeThrough push slide zoom whip wipe iris |
Signal.builder, Signal.sine, Signal.cosine, Signal.fromArray, Signal.programmatic, Signal.state, Signal.computed, Signal.frame, Signal.time, Signal.progress; also sineSignal, cosineSignal, computed.
| Export |
Members |
FontManager |
register({ family, source, weight, style }), registerEmojiFont, measure(text, opts), get, has, getAll, clear |
| rich text |
rich tagged template, span, bold, italic, color, mark, size, sub, sup, parseMarkup |
Color |
parse hex rgb hsl oklch mix ramp steps lighten darken saturate rotate alpha contrast readableOn |
Gradient |
linear(stops, angle) radial(stops, { at, circle, radius }) conic(stops) |
renderSfx(trigger, ctx), mixSfxInto(bed, sfx[]), softLimit(bed, knee?, ceiling?), encodeStereoWav(channels, { sampleRate }), mixAudioTracks(...).
| Export |
Notes |
HeadlessMediaRenderer |
share one across renderFrame calls |
Media.video image lottie audio |
single-clip chains with apply, renderFrame, renderFrameGrid, renderVideo |
startPreview(entry, options) |
{ url, close(), closed } — Preview |
formatQaReport(qa) |
human-readable QA |
CompositorProgramSchema |
zod schema of toSpec() |
52 classes, e.g. Blur, Curves, FilmGrain, Vignette, ColorKey, ApplyLUT, plus Effect.<camelCase>(props) factories. See the Effects reference.
