Transitions

Write a transition on its own line in your screenplay, and Web UI draws it when the scene changes.

Transition	What it does
SOFT CUT TO:	Quickly fades the new frame in over the old one, which stays underneath. This is the default when a beat doesn’t name a transition.
CUT TO:	Switches to the new frame instantly.
DISSOLVE TO:	Fades both frames at once, crossing at half opacity.
DIP TO:	Fades the old frame out, then fades the new one in.
WIPE TO:	Sweeps the new frame across the old one from left to right, with a soft edge.
WIPE UP TO:, WIPE DOWN TO:, WIPE LEFT TO:, WIPE CORNER TO:	The same wipe, in the direction named. WIPE CORNER TO: travels diagonally toward the top right.
PUSH TO:	Slides the new frame in from the right, pushing the old one out to the left.
SCATTER TO:	Swaps the frames cell by cell, in a fixed scattered pattern.
IRIS TO:	Opens a circle onto the new frame, over the old one.

Only the words in a transition’s name matter, so DISSOLVE TO: and Dissolve to. are the same transition. A transition Web UI doesn’t recognize uses the soft cut.

The soft cut leaves every pixel the two frames share untouched, so only what changed appears to move. That makes small changes, like a new expression, easy to notice.

Adding your own transitions

To add a transition, decorate resolveShaders with a higher priority than Web UI’s. Return your own shaders for the transition names you handle, and pass the rest to next.

Shader uniforms

A shader’s texture coordinates run from 0 to 1 in both directions, whatever the frame’s shape. Anything measured in those coordinates comes out stretched: a circle becomes an ellipse, and a square becomes a rectangle.

Web UI sets two uniforms that describe the frame’s shape, if your shader declares them:

Uniform	Type	Value
u_resolution	vec2	The frame’s width and height, in pixels.
u_aspect	float	The frame’s width divided by its height.

To correct for stretching, multiply horizontal measurements by u_aspect.