Motion Fundamentals

Masking, mattes & alpha channels

Also searched as: masking, mattes, alpha channel, clipping path, track matte, stencil reveal

Canonical Definition

Masking is the technique of using an outline, shape, or luminance texture (matte) to restrict the visible region of an underlying layer, creating reveals, wipes, and cutouts.

Duration

12 to 24 frames for mask transition wipes

Easing Curve

cubic-bezier(0.16, 1, 0.3, 1)

Masks are the secret weapon of clean motion design. Rather than having a title or card fly in from the edge of the screen, a mask allows text to emerge out of empty whitespace as if rising from a slot in reality.

CSS `clip-path` and SVG `mask` elements provide hardware-accelerated stencil cutouts that reveal complex typography and UI surfaces without overflow clipping bugs.

Clip-Path Inset Animations

Revealing cards and typography from invisible bounding lines

Using `clip-path: inset(0 0 100% 0)` to `inset(0 0 0% 0)` wipes a container open from bottom to top with absolute boundary precision.

Catalog Implementation/Lower Third — Mask Reveal
blocklower thirdsInspect in catalog
119 lines of React

How this works: A lower-third graphic emerging from an invisible horizontal clipping plane.

  • Hardware-accelerated `clip-path` interpolation
  • Zero pixel bleeding outside designated bounding coordinates
  • Elements appear to materialize directly from whitespace

Engineering Guidelines & Common Pitfalls

Best Practices (What to do)

  • Use percentage-based insets (`inset(0% 0% 0% 0%)`) for responsive, multi-line container clipping.

Common Failure Modes (What to avoid)

  • Using fixed pixel clipping boundaries that break when dynamic text wraps onto a second line.
Generate with AI

Build masking, mattes & alpha channels in Animatiq

Prompt our motion agent in natural language. Get back typed Remotion React code with custom easing curves, brand palettes, and frame-accurate timing.

Launch in composer

Related motion principles

Text & Identity

Lower third

A lower third is a graphic overlay positioned in the lower portion of the screen that identifies a speaker, location, or subject without obstructing key facial features.

Text & Identity

Kinetic typography

Kinetic typography is the expressive animation of text itself — words and glyphs that move, scale, shear, or morph in rhythm with narrative meaning rather than merely labelling a shot.

Motion & Camera

Video transitions

A video transition is the visual join between two adjacent shots — a cut, wipe, morph, whip-pan, or shader distortion that carries the viewer across a temporal or spatial boundary.