免费在 GitHub 公开

remotion-best-practices

Build videos in React with Remotion using topic-specific guidance and code examples. Covers animation, captions, audio, scene transitions, asset handling, timing, and text layout, with additional references for charts, maps, and 3D content.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

Best practices for Remotion - Video creation in React

vercel-labs/json-render

查看安装方法

适用场景

Create text animations and scene transitions
Add captions and subtitles to videos
Adjust audio, video clips, and display timing
Build videos with charts, maps, or 3D content
Fit text to containers and check for overflow

包含的文件（37）

SKILL.md3.5 KB
rules/3d.md2.2 KB
rules/animations.md790 B
rules/assets.md1.6 KB
rules/assets/charts-bar-chart.tsx3.8 KB
rules/assets/text-animations-typewriter.tsx2.3 KB
rules/assets/text-animations-word-highlight.tsx2.6 KB
rules/audio.md3.5 KB
rules/calculate-metadata.md2.9 KB
rules/can-decode.md1.5 KB
rules/charts.md1.7 KB
rules/compositions.md3.6 KB
rules/display-captions.md5.3 KB
rules/extract-frames.md5.4 KB
rules/fonts.md3.4 KB
rules/get-audio-duration.md1.3 KB
rules/get-video-dimensions.md1.6 KB
rules/get-video-duration.md1.3 KB
rules/gifs.md3.6 KB
rules/images.md2.7 KB
rules/import-srt-captions.md2.2 KB
rules/light-leaks.md2.3 KB
rules/lottie.md1.7 KB
rules/maps.md11.0 KB
rules/measuring-dom-nodes.md974 B
rules/measuring-text.md2.9 KB
rules/parameters.md2.3 KB
rules/sequencing.md2.7 KB
rules/subtitles.md922 B
rules/tailwind.md422 B
rules/text-animations.md700 B
rules/timing.md3.8 KB
rules/transcribe-captions.md1.9 KB
rules/transitions.md5.7 KB
rules/transparent-videos.md2.2 KB
rules/trimming.md1.2 KB
rules/videos.md3.4 KB

SKILL.md（原文）

安装前可以查看交给 AI 代理的指令内容。

When to use

Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.

Captions

When dealing with captions or subtitles, load the ./rules/subtitles.md file for more information.

How to use

Read individual rule files for detailed explanations and code examples:

rules/3d.md - 3D content in Remotion using Three.js and React Three Fiber
rules/animations.md - Fundamental animation skills for Remotion
rules/assets.md - Importing images, videos, audio, and fonts into Remotion
rules/audio.md - Using audio and sound in Remotion - importing, trimming, volume, speed, pitch
rules/calculate-metadata.md - Dynamically set composition duration, dimensions, and props
rules/can-decode.md - Check if a video can be decoded by the browser using Mediabunny
rules/charts.md - Chart and data visualization patterns for Remotion
rules/compositions.md - Defining compositions, stills, folders, default props and dynamic metadata
rules/extract-frames.md - Extract frames from videos at specific timestamps using Mediabunny
rules/fonts.md - Loading Google Fonts and local fonts in Remotion
rules/get-audio-duration.md - Getting the duration of an audio file in seconds with Mediabunny
rules/get-video-dimensions.md - Getting the width and height of a video file with Mediabunny
rules/get-video-duration.md - Getting the duration of a video file in seconds with Mediabunny
rules/gifs.md - Displaying GIFs synchronized with Remotion's timeline
rules/images.md - Embedding images in Remotion using the Img component
rules/light-leaks.md - Light leak overlay effects using @remotion/light-leaks
rules/lottie.md - Embedding Lottie animations in Remotion
rules/measuring-dom-nodes.md - Measuring DOM element dimensions in Remotion
rules/measuring-text.md - Measuring text dimensions, fitting text to containers, and checking overflow
rules/sequencing.md - Sequencing patterns for Remotion - delay, trim, limit duration of items
rules/tailwind.md - Using TailwindCSS in Remotion
rules/text-animations.md - Typography and text animation patterns for Remotion
rules/timing.md - Interpolation curves in Remotion - linear, easing, spring animations
rules/transitions.md - Scene transition patterns for Remotion
rules/transparent-videos.md - Rendering out a video with transparency
rules/trimming.md - Trimming patterns for Remotion - cut the beginning or end of animations
rules/videos.md - Embedding videos in Remotion - trimming, volume, speed, looping, pitch
rules/parameters.md - Make a video parametrizable by adding a Zod schema
rules/maps.md - Add a map using Mapbox and animate it

评价

还没有评价。欢迎分享你的使用感受。

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

同一仓库的技能

codegen

免费

Helps build custom code exporters from json-render UI specifications. Covers walking the UI tree, collecting components, state references, and actions, and formatting property values for JSX, the markup syntax used in React.

中文简介正在准备中。当前显示英语简介。

Build a custom exporter for Next.js or Remix
List components and actions used in a UI specification
Convert property values into JSX attributes