Skip to content
Motion

Write it like a web page, edit it like a timeline, render it in the browser.

Code, or a model, describes the motion. Elah converts it into native clips and keyframes: not a video, not a black-box layer. Every animated property is a channel on a clip, with keys that have ids, frames, values and an easing. Coming in 1.0.

Try the motion playgroundRead the docs
SC 01 · Binding

The motion is bound to the timeline

The same animation, three ways: the source you write, the keys it lands as, and the clip on a track. Hover a row in Keys to jump to that key. The same project plays in the preview and exports to MP4 in the browser.
Source, keys and timeline load as you scroll here.
SC 02 · Capabilities

Capabilities

Easing and springs

Named eases including back, elastic and bounce, any cubic-bezier, closed-form springs, steps(n) and hold keys.

typescript
{ id: 'k1', frame: 30, value: 0.8, easing: 'back-out' }

Stagger

Stagger from the start, centre, end or edges, at random, or across a grid, with repeat and yoyo, labels and relative positions. In HTML scenes and motion presets.

typescript
stagger: children 4f

Text animators

Animate text by character, word or line, or scramble it into place.

typescript
split: word 3f; each: y: 0.5 -> 0 0.5s quad-out

Motion paths

A clip travels an SVG path. Path morph and draw-on strokes are keys too.

typescript
path: (M 100 900 C 300 200 700 200 900 900) orient

Expressions

Drive a channel with wiggle, loop, sin and friends. An expression on a channel, set with setChannelExpression.

typescript
wiggle(freq, amp)  // value + noise

3D tilt for media and groups

rotateX and rotateY with perspective on video, image, sequence and compound clips.

typescript
channels: { rotateY: { source: { kind: 'keyframes' }, keys: [ /* … */ ] } }

Motion presets

Presets expand into real keyframes, so you can change them after.

typescript
in: pop-in 0.4s @0.2

Effects and transitions

GPU effects, nine transitions, compound and sequence clips, Lottie and SVG import. Effect parameters are keyable channels.

typescript
channels: { 'fx.<effect>.<param>': { source: { kind: 'keyframes' }, keys: [ /* … */ ] } }
SC 03 · Model

From a model

A model writes a VideoSpec or an HTML scene. Because Elah converts it into ordinary clips and keyframes, the output stays editable: you can inspect, retime, split and diff it like any other data. Both layers are live in 1.0. See For AI agents and HTML scenes and VideoSpec.
SC 04 · Export

Export

Export to MP4 runs in the browser, in Chrome or Edge. There is no render server, so no render bill, and your footage is never uploaded.
SC 05 · Limits

Limits

  • Export needs a Chromium browser (Chrome or Edge). Effects and the six newer transitions need WebGL2.

  • 3D tilt works on media and groups, not on text or shapes.