Remotion

Move media assets from a Remotion repository to Cloudflare R2, update source references to public URLs, and verify that uploaded files match the originals before removing local copies.

• Moving repository media assets to Cloudflare R2
• Updating source references to hosted media URLs
• Verifying uploaded files before deleting local copies

Set up a new Remotion Element for development in the documentation’s Remotion Studio. It follows the design and contribution guides, creates the starting structure, and offers to launch Docs Studio for a preview.

• Starting development of a new Remotion Element
• Preparing an Element with the official guides
• Previewing a scaffolded Element in Docs Studio

Add a person to the Remotion experts page by placing their portrait, entering their profile and contact links, and generating an expert card image. The instructions specify file locations, profile fields, and how to verify card generation.

• Add a new person to the Remotion experts page
• Register a portrait, specialties, and contact links
• Generate an expert card image

Create and display captions for Remotion videos, with guidance for transcribing audio or video, importing SRT files, and animating captions. Keep caption text and timing in a shared JSON format.

• Generate captions from video or audio
• Display and animate captions in a video
• Import existing SRT subtitles

Structure Remotion code so elements can be selected and edited visually in Remotion Studio. Covers reusable scenes, editable text and styles, timeline organization, and keyframes, which define how properties change over time.

• Make text, colors, and positions editable in Studio
• Edit scene and clip timing independently
• Adjust animation keyframes and easing

Start a new Remotion video by setting up a project when needed and opening Studio before building scenes. Covers folder selection, React video structure, multiple scenes, and timelines with individually editable clips.

• Set up a new Remotion video project
• Add a new video to an existing project
• Create a video with multiple scenes

Build Remotion video scenes with animation, media, and visual effects. Follow React markup patterns that keep timing and individual elements editable in Studio, with guidance for reusable scenes and frame-based motion.

• Create a title fade-in
• Add an editable lower third over a video
• Organize multiple scenes into editable timelines

Build apps with Remotion, from forms that trigger video rendering to complex video editors. Get guidance on templates, embedded previews, and choosing where rendering—the process of producing the video—runs.

• Build a form that generates videos
• Embed a Remotion preview in a React app
• Choose where video rendering runs

Find how to retrieve audio and video metadata with Mediabunny, a library for handling media in the browser. The skill points to focused guides for audio duration, video duration, and video width and height.

• Finding an audio file's duration in seconds
• Finding a video file's duration in seconds
• Checking a video file's width and height

Find current Remotion documentation for a feature or API, then retrieve relevant pages as Markdown. Use the documented behavior to guide implementation instead of relying on previously learned API details.

• Look up how a Remotion feature works
• Check current API details before implementation
• Retrieve documentation pages as Markdown

Update Remotion and its related packages while keeping their versions aligned. The workflow checks project dependencies, updates installed Remotion skills and lockfiles, and reviews changes using the project's existing package management conventions.

• Update Remotion and related packages together
• Align Remotion versions across workspaces
• Adjust auxiliary dependencies during an upgrade

Guide an agent to the right Remotion instructions for creating videos, adding captions or maps, exporting files, and building applications. The workflow emphasizes checking an interactive preview as the video takes shape.

• Create a video while reviewing its preview
• Find guidance for captions and animated maps
• Export a finished video

Choose a technique for adding maps to Remotion videos, from satellite images with animated overlays to globe views, geographic annotations, and terrain flythroughs. Compare approaches based on the intended shot and service requirements.

• Animate overlays on a satellite image
• Show a globe or 3D buildings with Mapbox
• Use MapLibre without an API key

Export Remotion compositions as videos or still images using command-line tools. Extract several selected frames as images in one call, with references for additional export options and videos with transparent backgrounds.

• Export a finished Remotion video
• Save a still image from a composition
• Export multiple selected frames as PNG images

Launch Remotion Studio to preview a video in a browser while it is being created or edited. Keep the preview open to review changes, and choose browser behavior, server ports, or logging options.

• Preview a video early in production
• Review changes while editing
• Open Studio in an in-app browser

Best practices for Remotion - Video creation in React

The English summary is being prepared. Showing the original description.

Structure Remotion markup for interactivity

The English summary is being prepared. Showing the original description.

Router for all Remotion skills

The English summary is being prepared. Showing the original description.

Content, animation and effects best practices

The English summary is being prepared. Showing the original description.

Preview a Remotion video

The English summary is being prepared. Showing the original description.

Build an app with Remotion

The English summary is being prepared. Showing the original description.

Remotion Map animation knowledge

The English summary is being prepared. Showing the original description.

Transcribing, displaying and animating captions

The English summary is being prepared. Showing the original description.

Upgrade Remotion, and related packages

The English summary is being prepared. Showing the original description.