Effects and transitions

Types

BlendMode

type BlendMode = z.infer<typeof blendModeSchema>

A blend mode as inferred from blendModeSchema.

CurvePoint

type CurvePoint = z.infer<typeof curvePointSchema>

One control point of a curves effect channel, x and y each from 0 to 1.

Effect

type Effect = z.infer<typeof effectSchema>

The union of the effect records as inferred from effectSchema, each a type, an enabled flag, and the parameters of that type.

EffectOfType

type EffectOfType<K extends EffectType> = Extract<Effect, { type: K }>

The one arm of Effect whose type is K.

EffectParam

interface EffectParam<K extends EffectType = EffectType> {
  key: Exclude<keyof EffectOfType<K>, 'type' | 'enabled'>
  min: number
  max: number
  unit?: string
}

The primary parameter of an effect type for a slider, its field name, range, and optional unit label.

EffectType

type EffectType = Effect['type']

The type field of the effects, from blur to lut3d.

MotionBlur

type MotionBlur = z.infer<typeof motionBlurSchema>

Motion blur settings as inferred from motionBlurSchema.

RenderableElement

interface RenderableElement {
  track: Track
  element: TimelineElement
  reason: 'active' | 'transition-tail' | 'transition-head'
}

An element that needs pixels at a time, with its track and whether it is active, a transition tail, or a transition head.

Transition

type Transition = z.infer<typeof transitionSchema>

A transition as inferred from transitionSchema.

TransitionPair

interface TransitionPair {
  left: TimelineElement
  right: TimelineElement
  cutMs: number
  durationMs: number
  type: TransitionType
}

Two adjacent clips joined by a transition, with the cut time, the clamped blend duration, and the type.

TransitionType

type TransitionType = z.infer<typeof transitionTypeSchema>

One of the seven transition type names as inferred from transitionTypeSchema.

Schemas

blendModeSchema

const blendModeSchema = z.enum([
  'normal',
  'multiply',
  'screen',
  'overlay',
  'darken',
  'lighten',
  'color-dodge',
  'color-burn',
  'hard-light',
  'soft-light',
  'difference',
  'exclusion',
  'hue',
  'saturation',
  'color',
  'luminosity',
])

Zod schema for the sixteen compositing blend modes, from normal to luminosity.

effectSchema

const effectSchema: z.ZodType<Effect>

Zod discriminated union on type over the thirteen effect arms below, where every arm also carries an enabled flag defaulting to true.

Type	Parameters
`blur`	`radius` from 0 to 200, default 8
`brightness`	`amount` from 0 to 4, default 1.1
`contrast`	`amount` from 0 to 4, default 1.1
`saturate`	`amount` from 0 to 4, default 1.25
`grayscale`	`amount` from 0 to 1, default 1
`sepia`	`amount` from 0 to 1, default 1
`hue-rotate`	`degrees` from -360 to 360, default 90
`invert`	`amount` from 0 to 1, default 1
`drop-shadow`	`offsetX` default 0, `offsetY` default 8, `blur` from 0 to 100 default 16, `color` default `rgba(0, 0, 0, 0.6)`
`css`	`filter`, a non-empty CSS filter string
`chroma-key`	`keyColor` default `#00ff00`, `tolerance` from 0 to 1 default 0.25, `softness` from 0 to 1 default 0.1, `spillSuppression` from 0 to 1 default 0.5
`curves`	optional `rgb`, `red`, `green`, and `blue` arrays of `CurvePoint`
`lut3d`	`lutId`, a non-empty string, and `intensity` from 0 to 1, default 1

effectsSchema

const effectsSchema = z.array(effectSchema)

Zod schema for an ordered effect stack.

motionBlurSchema

const motionBlurSchema = z.object({
  enabled: z.boolean().default(true),
  shutterAngle: z.number().min(15).max(720).default(180),
})

Zod schema for per-element motion blur, an enabled flag and a shutter angle in degrees from 15 to 720 with a default of 180.

transitionSchema

const transitionSchema = z.object({
  type: transitionTypeSchema,
  durationMs: z.number().int().min(100).max(5000).default(500),
})

Zod schema for a transition, its type and a blend window from 100 to 5000 ms centered on the cut, with a default of 500.

transitionTypeSchema

const transitionTypeSchema = z.enum([
  'dissolve',
  'fade-black',
  'fade-white',
  'slide-left',
  'slide-right',
  'wipe-left',
  'wipe-right',
])

Zod enum of the seven transition types, dissolves, fades through black and white, slides, and wipes.

Constants

EFFECT_PARAMS

const EFFECT_PARAMS: { readonly [K in EffectType]?: EffectParam<K> } = {
  blur: { key: 'radius', min: 0, max: 100, unit: 'px' },
  brightness: { key: 'amount', min: 0, max: 3 },
  contrast: { key: 'amount', min: 0, max: 3 },
  saturate: { key: 'amount', min: 0, max: 3 },
  grayscale: { key: 'amount', min: 0, max: 1 },
  sepia: { key: 'amount', min: 0, max: 1 },
  'hue-rotate': { key: 'degrees', min: -180, max: 180, unit: '°' },
  invert: { key: 'amount', min: 0, max: 1 },
  'drop-shadow': { key: 'blur', min: 0, max: 100, unit: 'px' },
  'chroma-key': { key: 'tolerance', min: 0, max: 1 },
}

The primary slider parameter for each effect type that has one, which excludes css, curves, and lut3d.

EFFECT_TYPES

const EFFECT_TYPES: readonly EffectType[]

The effect type names in the order of the effectSchema arms.

TRANSITION_TYPES

const TRANSITION_TYPES: readonly TransitionType[]

The transition type names in the order of the transitionTypeSchema options.

Functions

buildFilterString

function buildFilterString(effects: readonly Effect[] | undefined): string

Compiles an effect stack into a CSS filter string by joining the fragments of enabled effects in order, or an empty string when nothing applies.

toCompositeOperation

function toCompositeOperation(mode: BlendMode | undefined): CompositeOperation

Returns source-over for normal or an unset mode and otherwise the blend mode itself.

getActiveTransitionPairs

function getActiveTransitionPairs(track: Track, timeMs: number): TransitionPair[]

Returns the transition pairs on a track whose blend window contains timeMs.

getRenderableElements

function getRenderableElements(project: Project, timeMs: number): RenderableElement[]

Returns every element that renders at timeMs across all tracks, the active elements plus transition partners drawn outside their own ranges.

getTransitionCompletion

function getTransitionCompletion(pair: TransitionPair, timeMs: number): number

Returns how far a transition has progressed at timeMs, from 0 at the window start to 1 at its end.

getTransitionPair

function getTransitionPair(track: Track, left: TimelineElement): TransitionPair | null

Returns the transition pair anchored on a left clip with the blend window clamped to both clip durations, or null when the clip has no transition or no neighbor starts exactly at its end.

Effects and transitions

On this page