remotion-render
Render videos from React/Remotion code
こちらからも入手できます: infsh-skills,halt-catch-fire,inference-sh-6,qu-skills,tul-sh,inference-shell,inference-sh-skills,inference-skills,inferen-sh,inference-sh-8,inference-sh-9,skillssh,inference-sh-7,toolshell
Developers need to create programmatic videos from React components but lack tooling to render TSX code to MP4. This skill enables rendering videos from Remotion/React code via the inference.sh belt CLI, supporting animations, motion graphics, and data-driven videos.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「remotion-render」を使用しています。 Render a video with centered white text 'Welcome' on a dark blue background that fades in smoothly.
期待される結果:
A rendered MP4 video file (1920x1080, 30 FPS, 2 seconds) showing white 'Welcome' text fading in on a dark blue background.
「remotion-render」を使用しています。 Create a progress animation that counts from 0 to 100 over 5 seconds with a loading indicator.
期待される結果:
A rendered MP4 video showing a counting percentage with a 'Loading...' label, counting up smoothly on a black background.
セキュリティ監査
低リスクStatic analysis flagged 41 potential issues, but evaluation reveals all HIGH and MEDIUM findings are false positives. The scanner misidentified markdown code fences as Ruby backtick execution and YAML frontmatter as cryptographic algorithms. LOW findings are legitimate hardcoded URLs to the inference.sh service. This is a legitimate video rendering skill that wraps the belt CLI tool to call inference.sh's Remotion rendering API. Risk factors are confined to the expected belt tool usage and network calls required for core functionality.
高リスクの問題 (1)
中リスクの問題 (1)
低リスクの問題 (1)
リスク要因
品質スコア
作れるもの
Motion graphics automation
Create animated title sequences, data visualizations, and promotional videos from React code. Perfect for content creators who want programmatic video generation.
Data-driven video generation
Render videos that incorporate dynamic data as props. Generate personalized videos at scale for marketing, reports, or social media.
React animation prototyping
Quickly test and preview Remotion animations by rendering directly from code. Iterate on animation timing and effects without a full Remotion project setup.
これらのプロンプトを試す
Render a video with a white text 'Hello World' centered on a black background that fades in over 30 frames.
Create a video showing a counter from 0 to 100 percent that counts up over 5 seconds at 60 FPS. Use a white circular progress indicator on a black background.
Render a video with a white rounded square that bounces with spring physics on a purple background. The bounce should last 2 seconds at 60 FPS.
Create a video with three text elements ('First', 'Second', 'Third') that fade in sequentially. Each element appears for 1 second with 0.5 second gaps between them. Total duration 4 seconds.ベストプラクティス
- Start with simple animations and test rendering before adding complex effects
- Use appropriate FPS settings: 30 for standard video, 60 for smooth animations
- Keep component code focused on the visual output; pass dynamic data as props
回避
- Do not include external API calls or network requests inside the TSX component code
- Avoid very long duration videos as they increase rendering time significantly
- Do not use this for real-time video streaming; it is designed for batch video generation