remotion-motion-graphics
Create and edit motion graphics videos with Remotion (React): intros and outros, logo animations, promos, text animations, captions on footage, and compositing images and B-roll. Use when the user wants a motion graphics video built in Remotion, is working in a Remotion project, or says their Remotion video looks generic or amateur. Read it before writing Remotion code.
Target: React / Next.js. Automatically collected · unverified.
Excerpt from the author’s documentation
Extracted from a fixed version of SKILL.md in its original language. This is the author’s documentation; installation, compatibility and runtime results have not been verified by this site.
Read the original English text
Topics in the source
- Remotion Motion Graphics
- Non-negotiable rules (apply to EVERY composition)
- Workflow
- Step 1 — Scope
- Step 2 — Setup
- Step 3 — Build
- Step 4 — Render
- Step 5 — VERIFY (mandatory, never skip)
Remotion renders React components frame-by-frame into video. Code quality is not the bottleneck — motion design craft is. Untrained generation produces linear easing, opacity-only fades, simultaneous entrances, flat colors, and no texture. That is the "generic AI video" look. This skill exists to prevent it. 1. NEVER use linear interpolation. Every interpolate() gets an easing curve; every entrance prefers spring(). Always extrapolateLeft/Right: "clamp". 2. Entrances animate 2–3 properties together (opacity + translateY + scale). A lone fade is forbidden. 3. Stagger everything. Lists, words, rays, cards: 3–6 frame offsets. Nothing enters simultaneously. 4. Exits exist and are faster than entrances (10 frames vs 20). 5. Five-layer stack in every scene, bottom to top: background mesh → assets → graphics/type → color grade → grain + vignette. Never a flat solid background. 6. Every still image gets Ken Burns (slow scale 1→1.08 + pan). Every video asset uses , never . 7. Idle elements breathe: anything on screen >2s gets sin-wave micro-motion. 8. All timing derives from fps via useVideoConfig(). No magic frame numbers. 9. One theme object at the top of the project (colors, easings, spr
This is an excerpt. Refer to the complete source and its current requirements.
- Source repository
- alfaris/full-production-studio
- Source file
- skills/remotion-motion-graphics/SKILL.md
- Fixed revision
- 223f74cc6dceb4c16858c4d58b5d066e7c5eeb83
Sources and evidence
This record was collected automatically. Its documentation, suitability and runtime behavior have not been manually verified.
Author: alfaris/full-production-studio · original repository metadata. Documentation review: Not reviewed. Last source check: 2026-11-10T12:01:33.937Z.
Categories are inferred from names, descriptions and paths. They do not establish compatibility.
License and attribution
MIT. Third-party content and copyright remain with their authors. Refer to the original license and terms.
Original license ↗Synchronization, copying and user-reported success do not mark a resource as runtime-tested.
Limitations and notes
- Collecting metadata does not mean this site has installed, adapted, runtime-tested or security-reviewed the resource.