skills.rest
hidonguyen
hidonguyenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ck:remotion

Provide Remotion and React video-building guidance with frame-driven animation patterns.

Updated Apr 2, 2026
Search Tags:#react#video#captions#composition#animation#assets#remotion
One-click install
npx skills add https://github.com/hidonguyen/trade-ops --skill ck-remotion-hidonguyen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:remotion
Source: https://github.com/hidonguyen/trade-ops/tree/main/.opencode/skills/remotion
Command: npx skills add https://github.com/hidonguyen/trade-ops --skill ck-remotion-hidonguyen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Remotion development has many platform-specific pitfalls that cause rendering flicker, asset loading failures, and incorrect timing; this Skill consolidates best practices and reliable patterns so engineers and creators can build predictable, high-quality videos using React and Remotion.

Core Features & Use Cases

  • Authoritative Patterns: Clear rules for driving animations with useCurrentFrame, sequencing, springs, and interpolation to avoid flicker and nondeterministic renders.
  • Media & Asset Handling: Guidance for staticFile usage, audio/video trimming, playback control, fonts, animated images, and extracting media metadata with mediabunny.
  • Composition & Workflow: Examples for Composition/Still definitions, calculateMetadata, transitions, captions (TikTok-style pages), and extraction of frames or audio durations for thumbnails and timelines.
  • Use Case: Implement a 30-second promo that loads remote video, applies synchronized captions, animates charts and text with frame-driven springs, and exports an .mp4 without frame glitches.

Quick Start

Generate a 30-second 1920x1080 Remotion composition that loads video.mp4, applies captions.srt, drives all animations with useCurrentFrame, and outputs a production-ready MP4.

Frequently Asked Questions about ck:remotion

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I prevent flicker when rendering videos with React and Remotion?▼

To prevent flicker in Remotion videos, drive all animations with useCurrentFrame, springs, and interpolation instead of browser-driven animations, ensuring deterministic, frame-accurate rendering outputs.

What is the best way to load local video assets in Remotion?▼

The best way to load local video assets in Remotion is using the staticFile function, which correctly resolves asset paths for reliable playback and rendering during composition.

How do I add TikTok-style captions to a Remotion video?▼

Add TikTok-style captions to Remotion videos by integrating caption sequencing with frame-driven timing patterns, synchronizing text display precisely with the current frame.

Can I extract media metadata for audio and video trimming in Remotion?▼

Yes, you can extract media metadata for audio and video trimming in Remotion by using mediabunny, which retrieves durations and properties to control playback and sequence timing.

How do I create a production-ready MP4 from a Remotion composition?▼

Create a production-ready MP4 from a Remotion composition by defining your video dimensions and duration, applying transitions, and rendering the sequence without frame glitches.

Related Skills

Explore More Software Engineering Skills→
TbK0ngTbK0ng

trellis-bootstrap

Initialize Trellis AI workflow scaffolding with .trellis structure, memory, and CLI hooks.

Community
Intermediate
aviz85aviz85
4

remotion-render

Render Remotion compositions to MP4 and WebM output files.

Community
Intermediate
anis-marrouchianis-marrouchi

motion-animation

Integrate Framer Motion with Remotion for frame-synced animations.

Community
Intermediate
MCERQUAMCERQUA
1

hyperframes

Convert HTML compositions into frame-accurate video files using headless Chrome and FFmpeg.

Community
Intermediate