102.3K+Download
Skip to the usage guide
Remotion Markupby remotion-dev

Remotion Markup Skill.

Write React markup that behaves like a video timeline rather than a webpage with CSS animation.

  • Video
  • React
  • Motion
Download OpenDesignView Usage Guide
Source Review · Remotion MarkupSKILL.md
Task Video Produces • Frame-driven React composition markup • Media layers with explicit timing and asset references • A previewable scene with supported effect and editing structures Before You Start Remotion and feature-specific packages matching the project version; linked references determine additional media, effects, font, or export requirements.
Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Remotion Markup: Frame-Driven Video Scenes

A frame-based authoring contract and reference hub for Remotion timing, media, editable scenes, and visual effects.

Source-based workflowNot an execution benchmark

The Working Approach

Remotion Markup focuses on composition authoring: timing from the composition frame rate, animation driven by the current frame, and media elements that participate in a video timeline. The source explicitly warns that ordinary CSS transitions and animation classes are not a substitute for frame-driven rendering.

It is also a reference hub for more specialized work, from captions and maps to text measurement, effects, and audio. Its concrete value is the base contract: keep timing near the authored element, preserve independent editing targets, and use the appropriate media or effect component rather than treating every visual as an arbitrary DOM wrapper.

Expected Deliverables

  • Frame-driven React composition markup
  • Media layers with explicit timing and asset references
  • A previewable scene with supported effect and editing structures
See the Example Brief

From Brief to Review

  1. 01
    Read Composition Settings

    Use the existing frame rate for seconds-to-frames calculations and preserve the intended duration and dimensions.

  2. 02
    Author Timed Layers

    Keep independently editable media and scenes on separate JSX nodes, with timing directly on components that support it. The reviewed source also requires one second of premounting via premountFor={fps} on supported timed components, including nested items; check the installed API before applying it.

  3. 03
    Add Motion and Effects

    Drive motion with current-frame interpolation. Route specialized effects through the corresponding reference and compatible component.

  4. 04
    Inspect Video Frames

    Review Studio playback and representative rendered frames for text overflow, media readiness, and timing.

02 When to Use It

When to Use It

Remotion and feature-specific packages matching the project version; linked references determine additional media, effects, font, or export requirements.

A Good Fit

  • Product VideosCombines footage, images, lower thirds, and audio inside a repeatable timeline.
  • Code-Editable MotionUseful when visual layers need to remain understandable and editable in both source and Studio.

Limits to Check

  • Not Browser AnimationCSS transitions and Tailwind animation classes are called out as unsuitable for the documented rendering model.
  • Reference and Version DependenciesThe entry links to many feature-specific documents. Available components and effects must be checked against the installed Remotion version.

Bring These Inputs

  • Composition BriefState the scene sequence, duration, dimensions, and intended pacing.
  • Media AssetsProvide real image, audio, video, and font files or approved source URLs.
  • Editing NeedsIdentify layers that must be changed independently after initial authoring.

03 Decisions That Matter

Decisions That Matter

  1. Frame-Rate-Aware Timing

    Using the composition's fps keeps time expressions connected to the actual video settings.

  2. Effects Have Targets

    The source distinguishes components that accept effects directly from DOM content requiring a suitable canvas wrapper.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Load the whole markup reference set. Package-add commands in the source install runtime modules, not this Skill itself.

Upstream Source File
https://github.com/remotion-dev/skills/blob/32b241b97f4e0e4ab61fe9a41b05e6e64503f8c5/skills/remotion-markup/SKILL.md

Remotion and feature-specific packages matching the project version; linked references determine additional media, effects, font, or export requirements.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief
Use Remotion Markup to add a timed product-title overlay to this footage. Preserve the current frame rate and scene duration. Use frame-driven opacity and translation, keep the title independently editable, and load the text-measurement guidance before fitting the long subtitle. Preview the opening, settled, and exit frames.

Inspect the Result

Check the actual output against these observable criteria.

  • No required motion depends on CSS animation or transitions.
  • Timed layers preserve their own editable source nodes.
  • Text and media are correct in representative rendered frames.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
remotion-dev
Repository
remotion-dev/skills
Skill File
skills/remotion-markup/SKILL.md
License
Not confirmed — review the upstream terms before reuse.
Reviewed Snapshot
2026-10-07 · 32b241b97f4e
Editorial Source Summary
A frame-based authoring contract and reference hub for Remotion timing, media, editable scenes, and visual effects.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Can I reuse a CSS animation?

The source says to refactor it into frame-driven Remotion animation so the render follows the timeline.

Should I wrap every component in Sequence?

No. It prefers direct timing props where supported and reserves wrappers for meaningful shared timing or other behavior.

Can effects be applied to any div?

Not directly through the documented effects prop. The entry identifies supported components and an HtmlInCanvas path for grouped DOM content.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesignBrowse Design Skills
Upstream Source File
https://github.com/remotion-dev/skills/blob/32b241b97f4e0e4ab61fe9a41b05e6e64503f8c5/skills/remotion-markup/SKILL.md