Coming from Remotion, HyperFrames or After Effects

Kinetic takes the composition's attributes, the renderer and the runtime from HyperFrames and adds the clock, scenes, readiness, the guard and an in-browser render. The tables map Remotion's APIs, a HyperFrames GSAP timeline and After Effects' tools to their Kinetic equivalents.

A Kinetic scene computes from the clock, so this.clipFrame, counted from the start of the scene's clip, takes the place of useCurrentFrame(), and this.local is the same value in seconds. A GSAP timeline becomes keyframes tracks, and the clip's data-start replaces the position of the tween.

Where each part comes from

HyperFrames	Kinetic
The composition's attributes (`data-start`, `data-duration`, `data-composition-id`) The command-line renderer, with parallel workers The attributes of an audio clip The runtime script, for the HyperFrames render Composition variables The transcript and beat files The catalog of blocks	The clock, which runs the page with no runtime Scenes, which are components whose values are functions of time `keyframes` tracks, and `styleAt()` to evaluate them at a time The motion, text and data helpers Readiness, which holds frame 0 until the data has loaded, and typed `inputs` The determinism guard and `check()` The preview bar `render()` in the browser, with the sound of the audio clips The audio clips played in the preview, and `level()` and `spectrum()`

Coming from Remotion

A Remotion component computes from the current frame. A Kinetic scene computes from the clock.

Remotion	Kinetic
`useCurrentFrame()`	`this.clipFrame` in a computed, counted from the start of the scene's clip. `this.local` is the same value in seconds.
`interpolate()`	`interpolate(t, at, to, options)` on seconds. It clamps by default, and `extrapolate: 'extend'` extends.
`spring()`	`spring(t, { stiffness, damping, mass })` or `spring(t, { duration, bounce })`, with `t` in seconds.
`interpolate(frame, [a, b], [0, 1])` as a progress	`ramp(t, a, b, ease)`, and `mix(from, to, p)` for the value between two numbers or colors.
`<Sequence from>`	`data-start` and `data-duration` on the scene's element.
`<Series>`	A relative `data-start`, such as `"intro + 0.5"`.
A zod `schema`	`inputs`, with `String`, `Number` and `Boolean` types and a `validator`.
`delayRender()`	`waitFor` for queries, and a promise returned from `seek(local)` for one frame.
`<AbsoluteFill>`	A positioned layer, `position: absolute; inset: 0`.
`staticFile()`	A path, such as `from: 'data/sales.json'` or the `src` of an `<img>`. Kinetic holds frame 0 until the images under the scenes have decoded.
`<Audio>`	An `<audio>` clip with `data-start`, and `data-media-start`, `data-volume` and the fades where needed.

Coming from plain HyperFrames

A HyperFrames composition normally registers a GSAP timeline on window.__timelines. In Kinetic the timeline becomes computed properties and keyframes tracks. The clip's data-start replaces the position of the tween, and the tracks count from the start of the clip.

// HyperFrames with GSAP
const tl = gsap.timeline({ paused: true });
tl.from('#title', { opacity: 0, y: 40, duration: 0.6, ease: 'power2.out' }, 0.4);
window.__timelines['main'] = tl;

// Kinetic, on a clip with data-start="0.4"
wildflower.kinetic.scene('title-card', {
    keyframes: {
        heading: {
            opacity:    { at: [0, 0.6], to: [0, 1], ease: 'power2.out' },
            translateY: { at: [0, 0.6], to: [40, 0], ease: 'power2.out' }
        }
    }
});

Coming from After Effects

A Kinetic composition is a web page, and a layer is an element in it, styled with CSS. A keyframe is a time and a value on a track, an expression is a computed that reads the time, and a pre-comp is a clip with its own start and length. Most of what an After Effects project uses has a counterpart with another name.

The comp, layers and keyframes

After Effects	Kinetic
Composition settings	The root's `data-width`, `data-height`, `data-fps` and `data-duration` (The composition root).
A layer, its stacking order	An element in the root; later elements paint over earlier ones, or `z-index` says otherwise.
A solid, a shape layer	A styled `<div>`, or SVG with fill and stroke in CSS.
A pre-comp	A clip: an element with `data-start` and `data-duration`, whose scenes count time from its start (Scenes).
Layer in and out points	`data-start` and `data-duration` or `data-end`; a clip is hidden outside them.
Position, scale, rotation, opacity keyframes	Tracks in a scene's `keyframes`: `{ at: [0, 0.6], to: [40, 0] }` per property (Layers and keyframes).
Anchor point	`transform-origin`.
Parenting, a null object	A wrapper element; its transform moves everything inside it. A wrapper with no content of its own is a null.
Hold keyframes	`ease: 'steps(1)'` on the segment, which holds the value until the next key and then jumps.
A motion path with auto-orient	`offset-path` with `offset-rotate: auto` and an `offsetDistance` track (Paths and shapes).
3D layers and the camera	`styleAt()`'s 3D keys, `camera()`, `depth()` and `focus()` for depth of field (A camera).
Motion blur	`render({ shutter: 180 })`, or `config({ shutter: 180 })` for every render; `smear()` for blur in the live page (Motion blur).

Easing and the graph editor

Kinetic has no graph editor. Each segment of a track takes an ease by name.

In After Effects	In Kinetic
Linear keyframes	`'linear'`
Easy Ease	`'cubic-bezier(0.33, 0, 0.67, 1)'`, the default 33% influence; `'power2.inOut'` is close
Easy Ease In, on the keyframe the motion arrives at	An `.out` ease, such as `'power2.out'`
Easy Ease Out, on the keyframe the motion leaves	An `.in` ease, such as `'power2.in'`
Handles pulled far out, for a fast start and a long settle	`'expo.out'` or `'power4.out'`
A value handle dragged past the value, for overshoot	`'back.out'`, or a spring with `bounce`
Auto Bezier through several keyframes	`ease: 'smooth'` on the track: one curve through every key, with no change of speed at the keys between the first and the last
A custom curve	`cubic-bezier(x1, y1, x2, y2)`
Roving keyframes, for constant speed along a path	A linear `offsetDistance` track

The words "in" and "out" mean opposite things in the two tools. After Effects names an ease by the keyframe it sits on, so Easy Ease In slows the motion as it arrives. CSS and GSAP name it by the motion, so ease-out and .out slow the end of the motion.

Expressions

After Effects	Kinetic
`time`	`this.local` in a scene's computed, seconds from the clip's start; `this.time` for the composition's.
`wiggle(freq, amp)`	`wiggle(t, { frequency, amplitude, seed })`, an offset added to the value, one call per axis with its own seed.
`loopOut('cycle')`, `loopOut('pingpong')`	`extrapolateRight: 'wrap'` or `'mirror'` on the track; `extrapolate` sets both ends.
`loopOut('continue')`	`extrapolateRight: 'extend'`, which continues the last segment in a straight line.
`linear()`, `ease()`, `clamp()`	`interpolate()` and `ramp()` with an ease, both clamped; `Math.min()` and `Math.max()` for a clamp of your own.
`valueAtTime()`	The track read at another time, `interpolate(t, track)` with that `t`, or `styleAt(t, tracks)` for several tracks.
`posterizeTime()`	`posterize(t, fps)`.
`seedRandom()` and `random()`	`random(seed)`, a generator called as `random(seed)()`, and `noise()`, `noise2()` and `noise3()`, the same on every machine.
A value that follows another with inertia	A scene's `follow` block, which eases toward a store path by a spring in interactive mode and through a lesson step's script.

Text and shapes

After Effects	Kinetic
A text animator with a range selector	`split()` gives a row per letter, and `sweep(i, n, p, { shape, width, from })` gives each letter a weight from 0 to 1 as a window passes through the word; the letter's style is `styleAt()` at that weight. The shapes are ramp, square, triangle and round (sweep()).
Offsetting letters in time	`stagger(i, n, options)`, which delays each letter's own tracks.
Typewriter and scramble presets	`typewriter()` and `scramble()`.
Trim Paths	`stroke-dasharray` and a `strokeDashoffset` track.
A repeater	`repeat(n, options)`: rows of copies, each moved, turned and scaled once more than the one before (repeat()).
Polystar, path morphing	`shape()` and `matchPaths()`.

Masks, mattes, blending and effects

After Effects	Kinetic
A luma or alpha track matte	`mask-image`, with `mask-mode: luminance` for luma (A luma matte).
A mask with feather	`mask-image` with a soft gradient, or an SVG image with a blurred shape (An alpha matte and a feathered mask).
Blending modes	`mix-blend-mode`: a texture by `multiply`, a light leak by `screen` (A paper texture and a light leak).
An adjustment layer	An element with `backdrop-filter` over the area it changes (An adjustment layer).
Blur, drop shadow, color correction on a layer	CSS `filter`: `blur()`, `drop-shadow()`, `brightness()`, `contrast()`, `saturate()`, `hue-rotate()`; an SVG filter for curves.
Grain, a vignette, glow, chromatic aberration, a grade over the whole comp	`render({ finish })`, or `config({ finish })` for every render and the live page (The finish). Glow and aberration appear in the render only, and the live page takes only the grade's exposure, contrast and saturation.
Halftone and other stylised looks on footage or an image	`effect(canvas, { scene: this, source, kind })` (Effects).
Transitions: Linear Wipe, Radial Wipe, Iris, Gradient Wipe, Block Dissolve	`data-clip-transition` with `wipe`, `clock`, `iris`, `luma` or `dissolve` (Transitions).
Echo	Copies of a layer styled at earlier times, with decaying opacity, in a `data-list`.

Footage, sound and templates

After Effects	Kinetic
A footage layer, trimmed	A `<video>` with `data-start` and `data-media-start` (Footage).
Time stretch	`data-playback-rate`, the inverse of the stretch: a 200% stretch is `0.5`.
Time remapping, speed ramps, a freeze frame	`data-remap`, the clip's time as a track of file seconds, eased as a track is, forward only (Speed ramps).
An audio layer	An `<audio>` clip, with volume and fades (Audio).
Convert Audio to Keyframes	`level()` and `spectrum()`, read at the frame's time.
Layer markers on an audio layer	`data-markers` on an audio clip or footage with its sound, in the file's seconds, read with `timeOf()`.
Lottie exported through Bodymovin	`lottie(animation)`, which seeks lottie-web to the frame (Lottie).
Essential Graphics, a MOGRT template	Composition variables and `inputs`, and the batch script for one render per row of a file (Batches).
The Render Queue	The preview bar's Render button, or `render()`, which writes an MP4 in the browser (Render).

What stays in After Effects

Some tools work on footage pixels or simulate physics, and a web page has no counterpart for them. Do this work in After Effects or an editor, and bring the result in as footage or as Lottie.

Motion tracking, stabilising and the 3D camera tracker.
Rotoscoping and Roto Brush, and keying.
Content-Aware Fill, Puppet Pin, mesh warp and Liquify.
Lights and cast shadows on 3D layers. A lit 3D scene can be drawn with Trillium.
Particle simulations such as CC Particle World. A WildflowerJS pool in a scene draws many particles, with their motion written as functions of time.
Frame blending and Timewarp, which estimate motion between frames.
Effects on one HTML layer's pixels, such as displacing a block of text, which need Chrome's HTML-in-Canvas, still behind a flag. A shader effect works on an image, a video or a canvas, and the finish works on the whole frame.