Text scenes

Outline Text Echo — editable Remotion component

A bold centered word or number that releases a screen-filling grid of matching outline copies around the solid original.

Component details

Agent Motion installs components into an existing Remotion project. If you are starting fresh, create the standard project structure first:

npx @agent-motion/cli create remotion my-remotion-video

Run this command from the root of your Remotion project. No separate Agent Motion CLI installation is required.

npx @agent-motion/cli add outline-text-echo@0.13.0

Presets are bundles of public typography and outline props; the component is always transparent so it can be placed over any scene background.
The solid center text is visible from frame zero; only the internal outline echoes animate outward.
Keep centerMaskEnabled on for a clean solid word: echoes remain invisible behind its row and reveal only after crossing the adjustable centerMaskHeightPercent boundary.
Keep layerMasksEnabled on to clip every echo into a separate horizontal slice that travels with it; upper masks reveal downward from the text top and lower masks reveal upward from the text bottom.
Horizontal copies use direction-aware side masks: left columns reveal from the left text edge and right columns reveal from the right text edge; layerMaskWidthPercent controls their visible width.
Use short words or numbers for a strong silhouette; long text automatically shrinks to fit the resolved width.
Use copiesPerSide with spacingPercent for vertical density, and horizontalCopiesPerSide with horizontalSpacingPercent to extend every outline row across the frame.
When the requested spacing would push an outer layer beyond the component, the spacing is reduced uniformly so final layer centers remain evenly distributed without stacked edge masks.
Set strokeWidth and echoOpacity for subtle contour trails or high-contrast graphic repetitions.
Leave x, y, width, and height unset for a centered component using eighty percent of the composition box.