Shape Layer
After Effects shape layer with an ordered operator stack — trim paths, repeater, offset paths, wiggle paths, zig-zag and pucker & bloat — evaluated per frame as pure geometry. Install with npx remotion-ui@latest add shape-layer.
PrimitiveMotion graphicsAdvanced
$ npx remotion-ui@latest add shape-layerShapes at the top, then an operator stack that runs top to bottom, each operator reading what the ones above it produced. Order is the feature: a Trim Paths below a Repeater treats every copy as one line and draws through them in turn, and the same Trim above it draws every copy at once. The preview is three layers built from one shared stack: behind, a rounded pentagon through Offset Paths with ten looping copies ripples contour lines out past the frame; in the middle, the star through Pucker & Bloat and a compounding Repeater; in front, the same nest with the Trim below the Repeater, drawing one spiral of light through all 22 copies.
| Operator | What it does |
|---|---|
trim | start / end (0–1) and offset (turns). individual mode trims all paths as one continuous line. |
repeater | copies (fractional counts fade the last copy in), offset, and a compounding step position / rotation / scale around a pivot anchor; opacity ramp; composite above or below. |
offset | Grows or shrinks paths by pixels whichever way they wind, with miter, round or bevel joins; copies + copyOffset for concentric ripples. |
wiggle | Deterministic noise displacement with detail, wigglesPerSecond, correlation and phases. |
zigzag | Alternating ridges between vertices, corner or smooth. |
pucker-bloat | Moves vertices and tangent handles in opposite directions around the path centre. |
transform | Anchor, position, scale, rotation and opacity for everything above it. |
Every numeric parameter is Animatable: a number, a keyframe track from ae-motion, or an expression ({ frame, time, fps }) => value. The stack is also available headless as evaluateShapeStack() from shape-ops, for driving your own SVG or canvas.
Usage
import { ShapeLayer } from "@/remotion/primitives/shape-layer";
import { easyEase } from "@/remotion/lib/ae-motion";
<ShapeLayer
shapes={[{ type: "star", points: 5, outerRadius: 160, innerRadius: 70 }]}
operators={[
{ op: "pucker-bloat", amount: [easyEase(0, -0.2), easyEase(60, 0.3)] },
{ op: "repeater", copies: 16, scale: 0.9, rotation: 6, position: [0, 0] },
{ op: "trim", mode: "individual", end: 0.3, offset: [easyEase(0, 0), easyEase(90, 1)] },
{ op: "wiggle", size: 1.5, detail: 3 },
]}
stroke="#e8b86d"
strokeEnd="#f472b6"
width={480}
height={480}
/>Every numeric operator/shape parameter is Animatable: a number, an ae-motion keyframe track, or ({ frame, time, fps }) => value. Installs @remotion/paths.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/shape-layer- Use when: After Effects-style motion graphics built from composable, keyframeable operators.
- Customize: shapes, operators, width, height, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { ShapeLayer } from "@/remotion/primitives/shape-layer";
import { easyEase } from "@/remotion/lib/ae-motion";
<ShapeLayer
shapes={[{ type: "star", points: 5, outerRadius: 160, innerRadius: 70 }]}
operators={[
{ op: "repeater", copies: 12, scale: 0.88, rotation: 8, position: [0, 0] },
{ op: "trim", mode: "individual", end: 0.3, offset: [easyEase(0, 0), easyEase(90, 1)] },
{ op: "wiggle", size: 2, detail: 3 },
]}
width={480}
height={480}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| shapes* | ShapeSource[] | - | path (any SVG d), ellipse, rect, star or polygon. Merged into one geometry list. |
| operators | ShapeOperator[] | [] | Operator stack run top to bottom: trim, repeater, offset, wiggle, zigzag, pucker-bloat, transform. Order changes the result. |
| width | number | 400 | Rendered width in px; shape units are px. |
| height | number | 400 | Rendered height in px. |
| origin | "center" | "top-left" | "center" | Where (0, 0) sits in the layer. |
| stroke | string | null | "#e8b86d" | Stroke colour; null for no stroke. |
| strokeEnd | string | - | Colour the last repeater copy ramps to. |
| strokeWidth | Animatable<number> | 3 | Static, keyframed or expression. |
| fill | string | null | null | Fill colour. |
| fillEnd | string | - | Fill colour the last repeater copy ramps to. |
| lineCap | "butt" | "round" | "square" | "round" | Stroke cap. |
| lineJoin | "miter" | "round" | "bevel" | "round" | Stroke join. |
| glow | number | 0 | Bloom radius in px; 0 turns it off. |
| frame | number | - | Render this frame instead of the current one. |
Related
AE Motion
Keyframe tracks with After Effects graph-editor easing, loopOut/loopIn, deterministic wiggle, valueAtTime and parented transforms, as pure functions.
Text Animator
After Effects text animator: range and wiggly selectors drive per-character, per-word or per-line position, scale, rotation, opacity, blur, tracking and fill over measured layout. Install with npx remotion-ui@latest add text-animator.