remotion-component-gen
installsforks
How to install remotion-component-gen?
ncklrs/startup-os-skills/remotion-component-gen
$npx -y skills add ncklrs/startup-os-skills --skill remotion-component-genGenerates individual Remotion scene components from visual direction. Input is visual/animation description for a specific scene. Output is SCENE_COMPONENT.md with complete TSX implementation. Use when implementing scenes or when asked to "create a scene component", "implement sc
SKILL.md
| 1 | # Remotion Component Gen |
| 2 | |
| 3 | Generates production-ready Remotion scene component implementations from visual direction and animation specifications. This skill focuses on creating complete, working scene components. |
| 4 | |
| 5 | ## What This Skill Does |
| 6 | |
| 7 | Generates scene component code for: |
| 8 | |
| 9 | 1. **Scene components** — Complete TSX implementation for individual scenes |
| 10 | 2. **Animation integration** — Applies spring/interpolate from animation configs |
| 11 | 3. **Visual layout** — Implements positioning, sizing, layout logic |
| 12 | 4. **Asset integration** — StaticFile imports and asset usage |
| 13 | 5. **TypeScript types** — Props interfaces for scene components |
| 14 | |
| 15 | ## Scope Boundaries |
| 16 | |
| 17 | **IN SCOPE:** |
| 18 | - Complete scene component TSX code |
| 19 | - Animation implementation (springs, interpolate) |
| 20 | - Layout and visual styling |
| 21 | - Asset imports and usage |
| 22 | - Component-level logic |
| 23 | |
| 24 | **OUT OF SCOPE:** |
| 25 | - Animation config definitions (use `/remotion-animation`) |
| 26 | - Composition sequence layout (use `/remotion-composition`) |
| 27 | - Project scaffolding (use `/remotion-scaffold`) |
| 28 | - Asset sourcing (use `/remotion-asset-coordinator`) |
| 29 | |
| 30 | ## Input/Output Formats |
| 31 | |
| 32 | ### Input Format: Visual Direction for Scene |
| 33 | |
| 34 | Accepts scene description with visual and animation details: |
| 35 | |
| 36 | **From Motion Spec:** |
| 37 | ```markdown |
| 38 | ## Scene 1: Logo Reveal (0s - 5s) |
| 39 | |
| 40 | **Visual Description:** |
| 41 | - Centered logo on dark background |
| 42 | - Logo scales from 0.8 to 1.0 with smooth spring |
| 43 | - Subtitle text fades in below logo |
| 44 | - Background: #0A0A0A (Black) |
| 45 | - Logo color: #FF6B35 (Primary) |
| 46 | |
| 47 | **Animation Details:** |
| 48 | - Logo entrance: Frames 0-30 |
| 49 | - Spring config: smooth (damping: 200) |
| 50 | - Scale: 0.8 → 1.0 |
| 51 | - Opacity: 0 → 1 |
| 52 | - Subtitle reveal: Frames 20-50 |
| 53 | - Fade in with slight upward movement |
| 54 | - TranslateY: 20px → 0 |
| 55 | - Opacity: 0 → 1 |
| 56 | |
| 57 | **Assets:** |
| 58 | - Logo: public/images/logo.svg |
| 59 | ``` |
| 60 | |
| 61 | **From Natural Language:** |
| 62 | ``` |
| 63 | Create Scene1Intro with centered logo that springs in from 0.8 scale to 1.0. |
| 64 | Add subtitle text below that fades in after logo. |
| 65 | Use smooth spring animation for logo, linear fade for text. |
| 66 | ``` |
| 67 | |
| 68 | ### Output Format: SCENE_COMPONENT.md |
| 69 | |
| 70 | Generates complete scene component implementation: |
| 71 | |
| 72 | ```markdown |
| 73 | # Scene Component: Scene1Intro |
| 74 | |
| 75 | ## Status |
| 76 | ✅ Component implementation complete |
| 77 | ⏳ Ready for integration into composition |
| 78 | |
| 79 | ## Component Code |
| 80 | |
| 81 | File: `scenes/Scene1Intro.tsx` |
| 82 | |
| 83 | ```typescript |
| 84 | import { |
| 85 | AbsoluteFill, |
| 86 | spring, |
| 87 | interpolate, |
| 88 | useCurrentFrame, |
| 89 | useVideoConfig, |
| 90 | Img, |
| 91 | staticFile, |
| 92 | } from "remotion"; |
| 93 | import { COLORS, SPRING_CONFIGS } from "../constants"; |
| 94 | |
| 95 | export function Scene1Intro() { |
| 96 | const frame = useCurrentFrame(); |
| 97 | const { fps, width, height } = useVideoConfig(); |
| 98 | |
| 99 | // Logo entrance animation (frames 0-30) |
| 100 | const logoProgress = spring({ |
| 101 | frame, |
| 102 | fps, |
| 103 | config: SPRING_CONFIGS.smooth, |
| 104 | }); |
| 105 | |
| 106 | const logoScale = interpolate(logoProgress, [0, 1], [0.8, 1]); |
| 107 | const logoOpacity = logoProgress; |
| 108 | |
| 109 | // Subtitle reveal animation (frames 20-50) |
| 110 | const subtitleProgress = interpolate( |
| 111 | frame, |
| 112 | [20, 50], |
| 113 | [0, 1], |
| 114 | { |
| 115 | extrapolateLeft: 'clamp', |
| 116 | extrapolateRight: 'clamp', |
| 117 | } |
| 118 | ); |
| 119 | |
| 120 | const subtitleTranslateY = interpolate(subtitleProgress, [0, 1], [20, 0]); |
| 121 | const subtitleOpacity = subtitleProgress; |
| 122 | |
| 123 | return ( |
| 124 | <AbsoluteFill |
| 125 | style={{ |
| 126 | backgroundColor: COLORS.background, |
| 127 | justifyContent: "center", |
| 128 | alignItems: "center", |
| 129 | }} |
| 130 | > |
| 131 | {/* Logo */} |
| 132 | <div |
| 133 | style={{ |
| 134 | transform: `scale(${logoScale})`, |
| 135 | opacity: logoOpacity, |
| 136 | }} |
| 137 | > |
| 138 | <Img |
| 139 | src={staticFile("images/logo.svg")} |
| 140 | style={{ |
| 141 | width: 400, |
| 142 | height: 400, |
| 143 | }} |
| 144 | /> |
| 145 | </div> |
| 146 | |
| 147 | {/* Subtitle */} |
| 148 | <div |
| 149 | style={{ |
| 150 | position: "absolute", |
| 151 | top: height / 2 + 250, |
| 152 | transform: `translateY(${subtitleTranslateY}px)`, |
| 153 | opacity: subtitleOpacity, |
| 154 | }} |
| 155 | > |
| 156 | <h2 |
| 157 | style={{ |
| 158 | color: COLORS.text, |
| 159 | fontSize: 48, |
| 160 | fontWeight: 600, |
| 161 | margin: 0, |
| 162 | }} |
| 163 | > |
| 164 | Innovation in Motion |
| 165 | </h2> |
| 166 | </div> |
| 167 | </AbsoluteFill> |
| 168 | ); |
| 169 | } |
| 170 | ``` |
| 171 | |
| 172 | ## Component Props (if needed) |
| 173 | |
| 174 | ```typescript |
| 175 | export interface Scene1IntroProps { |
| 176 | // Add props here if scene needs customization |
| 177 | } |
| 178 | |
| 179 | // Update component: |
| 180 | export function Scene1Intro({}: Scene1IntroProps) { |
| 181 | // ... |
| 182 | } |
| 183 | ``` |
| 184 | |
| 185 | ## Usage in Composition |
| 186 | |
| 187 | ```typescript |
| 188 | import { Scene1Intro } from "./scenes/Scene1Intro"; |
| 189 | |
| 190 | // In main composition: |
| 191 | <Sequence |
| 192 | from={SCENE_TIMING.intro.start} |
| 193 | durationInFrames={SCENE_TIMING.intro.duration} |
| 194 | > |
| 195 | <Scene1Intro /> |
| 196 | </Sequence> |
| 197 | ``` |
| 198 | |
| 199 | ## Assets Required |
| 200 | |
| 201 | - [x] Logo image: `public/ima |
People who liked this also viewed
6 picksType
- find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 2026
- grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026
- vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026
- improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026
- setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026
- triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026
