mcpField
R
remotion-new-markup

remotion-new-markup

github.com/remotion-devCreative & media68.6k105 installsUpdated today
Repository

About remotion-new-markup

A guide for structuring editable Remotion timelines and isolating frame-dependent animation in React components. It is for developers editing compositions while preserving timing and limiting unrelated re-renders.

Key features

  1. 01Structure editable tracks and sequences
  2. 02Localize frame subscriptions
  3. 03Keep interpolation on animated props
  4. 04Preserve timing boundaries
  5. 05Verify full and standalone compositions

Use cases

  1. 01Plan which timeline elements should be edited together
  2. 02Animate a soundtrack or overlay without frame subscriptions in parent scenes
  3. 03Extract a component while preserving keyframe timing

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/remotion-dev/remotion --skill remotion-new-markup

After installing, type/remotion-new-markupin Claude Code to confirm it loaded.

Details

From the project README

New Remotion markup

Read editable timeline structure before choosing components and wrappers. Start with what should be edited together, then choose independent tracks or consecutive sequences. The guide includes the complete interactive element, scene, parent, and registration.

For footage with synchronized captions or overlays, also read editable video timelines. For extracting a group into its own timeline, use connected compositions.

Keep frame subscriptions local

Call useCurrentFrame() in the smallest component that needs the frame to render. Keep composition and scene components that arrange clips and tracks free of frame subscriptions when only a soundtrack volume, animated title, or overlay needs to change. Extract that item into a component defined at module scope, and read the frame there instead of passing it down from the parent. This prevents that animation from re-rendering unrelated clips and scenes on every frame.

Keep editable interpolate() calls inline on the animated item's props. For example, a Soundtrack component can read useCurrentFrame() and return an Audio with volume={interpolate(frame, ...)}, while the composition only renders <Soundtrack /> alongside its scenes. Prefer a static value when the output does not actually vary with the frame.

Preserve the existing timing boundary when extracting: placing the hook inside a Sequence or a timed component changes its frame coordinates. Keep trims, offsets, volume envelopes, and animation keyframes on the same clock, or adjust the keyframes deliberately to preserve the edit. A plain React component is enough for this render boundary; add timeline wrappers only for editing needs.

Verify a structural change in the full composition and any standalone views. Preserve the existing edit, and distinguish useful markup grouping from Studio's row expansion and layout behavior.

Comments

Markdown supported