Tools: Create Stunning Videos with JavaScript Using Remotion & Kiro IDE

What is Remotion? ## The Problem: AI Gets Remotion Wrong ## The Solution: Kiro + Steering Files ## What Kiro Does Differently ## Setup (60 Seconds) ## Step 1: Create a Remotion project ## Step 2: Add Remotion skills to Kiro ## Step 3: Open in Kiro ## What You Can Build ## Simple animation ## Multi-scene video ## With specific effects ## Example Output ## Rendering ## Patterns Kiro Handles ## Global Setup (Optional) ## Tips for Best Results ## Resources What if you could create professional videos by writing React code — and have AI generate most of it for you? That's exactly what happens when you combine Remotion (a React framework for programmatic video) with Kiro IDE (an AI-powered IDE from AWS). In this post, I'll show you how to set this up in under 2 minutes and start creating videos from natural language prompts. Remotion lets you create videos using React and JavaScript. Instead of dragging clips in a video editor, you write code. Why would you want that? Here's a simple fade-in animation in Remotion: Notice something? No CSS animations. Remotion uses useCurrentFrame() to drive everything — that's how it renders each frame deterministically. Here's the catch: Remotion has specific patterns that most AI coding assistants get wrong. ❌ CSS animations — don't render correctly ❌ Tailwind animate classes — break during export ❌ Missing extrapolateRight: 'clamp' — values go out of bounds ❌ Using <img> instead of <Img> — images don't load before render When you ask ChatGPT or Copilot to write Remotion code, you often get broken output that looks fine in preview but fails during render. Kiro is an AI-powered IDE from AWS. What makes it different is steering files — markdown documents that teach the AI your project's patterns. Drop Remotion's best practices into .kiro/steering/ and Kiro follows them automatically. No more explaining the same rules over and over. For Remotion, steering files are huge. We give Kiro all the rules: And it follows them every time. Options: Blank Project, TailwindCSS, No Agents, Not VS Code Run this single command to pull in all the Remotion best practices: That's it. The .kiro/steering/ folder now contains 30+ rule files covering animations, timing, sequencing, images, audio, transitions, and more. Once set up, try prompts like these in Kiro's Vibe mode: "Create a fade-in animation that reveals text over 1 second" "Create a 10-second product launch video with 3 scenes: Scene 1 (0-3s): Dark background, product name 'LaunchPad' fades in with a glow Scene 2 (3-6s): Product name slides left, three feature bullets animate in from the right Scene 3 (7-10s): Call-to-action 'Try it free' scales up with bounce effect Use dark blue gradient background and cyan accent color" "Add floating particles in the background" "Make the text spring in from the right with a bounce" "Add a neural network animation with pulsing nodes" Kiro generates correct Remotion code — proper spring() animations, <Sequence> timing, premounting, the works. Here's what Kiro generates for a multi-scene intro (simplified): All the Remotion patterns, automatically. Open http://localhost:3000 to see the Remotion Studio with hot reload. Export the final video: Want Remotion skills in ALL your Kiro projects? Now every workspace gets Remotion knowledge automatically. Use Vibe mode — Kiro's autopilot creates multiple files at once and iterates quickly Describe scenes in plain English — Be specific about timing, colors, and effects Iterate visually — The Remotion Studio hot-reloads, so ask Kiro to tweak and see changes instantly Add audio last — Get the visuals right first, then layer in music: Then describe what you want. Kiro generates correct Remotion code. Ship videos. Have questions or want to share what you've built? Drop a comment below! Tags: #remotion #kiro #aws #javascript #react #video #ai #webdev #tutorial Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse COMMAND_BLOCK: import { useCurrentFrame, useVideoConfig, interpolate } from 'remotion'; export const FadeIn = () => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const opacity = interpolate(frame, [0, 1 * fps], [0, 1], { extrapolateRight: 'clamp', }); return ( <div style={{ opacity, fontSize: 72, color: 'white' }}> Hello World </div> ); }; Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: import { useCurrentFrame, useVideoConfig, interpolate } from 'remotion'; export const FadeIn = () => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const opacity = interpolate(frame, [0, 1 * fps], [0, 1], { extrapolateRight: 'clamp', }); return ( <div style={{ opacity, fontSize: 72, color: 'white' }}> Hello World </div> ); }; COMMAND_BLOCK: import { useCurrentFrame, useVideoConfig, interpolate } from 'remotion'; export const FadeIn = () => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const opacity = interpolate(frame, [0, 1 * fps], [0, 1], { extrapolateRight: 'clamp', }); return ( <div style={{ opacity, fontSize: 72, color: 'white' }}> Hello World </div> ); }; CODE_BLOCK: npx create-video@latest my-video cd my-video npm install Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: npx create-video@latest my-video cd my-video npm install CODE_BLOCK: npx create-video@latest my-video cd my-video npm install COMMAND_BLOCK: git clone --depth 1 https://github.com/remotion-dev/skills.git temp-skills; mkdir -p .kiro/steering; cp temp-skills/skills/remotion/SKILL.md .kiro/steering/remotion-rules.md; cp -r temp-skills/skills/remotion/rules .kiro/steering/; rm -rf temp-skills Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: git clone --depth 1 https://github.com/remotion-dev/skills.git temp-skills; mkdir -p .kiro/steering; cp temp-skills/skills/remotion/SKILL.md .kiro/steering/remotion-rules.md; cp -r temp-skills/skills/remotion/rules .kiro/steering/; rm -rf temp-skills COMMAND_BLOCK: git clone --depth 1 https://github.com/remotion-dev/skills.git temp-skills; mkdir -p .kiro/steering; cp temp-skills/skills/remotion/SKILL.md .kiro/steering/remotion-rules.md; cp -r temp-skills/skills/remotion/rules .kiro/steering/; rm -rf temp-skills CODE_BLOCK: kiro . Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate, spring, Sequence, } from 'remotion'; export const ProductLaunch = () => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); return ( <AbsoluteFill style={{ background: 'linear-gradient(135deg, #0a1628, #1a2744)' }}> {/* Scene 1: Logo reveal */} <Sequence from={0} durationInFrames={3 * fps} premountFor={fps}> <LogoReveal /> </Sequence> {/* Scene 2: Features */} <Sequence from={3 * fps} durationInFrames={3 * fps} premountFor={fps}> <FeatureBullets /> </Sequence> {/* Scene 3: CTA */} <Sequence from={7 * fps} durationInFrames={3 * fps} premountFor={fps}> <CallToAction /> </Sequence> </AbsoluteFill> ); }; const LogoReveal = () => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const scale = spring({ frame, fps, config: { damping: 200 } }); const opacity = interpolate(frame, [0, fps], [0, 1], { extrapolateRight: 'clamp', }); return ( <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center' }}> <div style={{ opacity, transform: `scale(${scale})`, fontSize: 96, fontWeight: 'bold', color: '#00d4ff', textShadow: '0 0 40px rgba(0, 212, 255, 0.5)', }} > LaunchPad </div> </AbsoluteFill> ); }; Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate, spring, Sequence, } from 'remotion'; export const ProductLaunch = () => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); return ( <AbsoluteFill style={{ background: 'linear-gradient(135deg, #0a1628, #1a2744)' }}> {/* Scene 1: Logo reveal */} <Sequence from={0} durationInFrames={3 * fps} premountFor={fps}> <LogoReveal /> </Sequence> {/* Scene 2: Features */} <Sequence from={3 * fps} durationInFrames={3 * fps} premountFor={fps}> <FeatureBullets /> </Sequence> {/* Scene 3: CTA */} <Sequence from={7 * fps} durationInFrames={3 * fps} premountFor={fps}> <CallToAction /> </Sequence> </AbsoluteFill> ); }; const LogoReveal = () => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const scale = spring({ frame, fps, config: { damping: 200 } }); const opacity = interpolate(frame, [0, fps], [0, 1], { extrapolateRight: 'clamp', }); return ( <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center' }}> <div style={{ opacity, transform: `scale(${scale})`, fontSize: 96, fontWeight: 'bold', color: '#00d4ff', textShadow: '0 0 40px rgba(0, 212, 255, 0.5)', }} > LaunchPad </div> </AbsoluteFill> ); }; COMMAND_BLOCK: import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate, spring, Sequence, } from 'remotion'; export const ProductLaunch = () => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); return ( <AbsoluteFill style={{ background: 'linear-gradient(135deg, #0a1628, #1a2744)' }}> {/* Scene 1: Logo reveal */} <Sequence from={0} durationInFrames={3 * fps} premountFor={fps}> <LogoReveal /> </Sequence> {/* Scene 2: Features */} <Sequence from={3 * fps} durationInFrames={3 * fps} premountFor={fps}> <FeatureBullets /> </Sequence> {/* Scene 3: CTA */} <Sequence from={7 * fps} durationInFrames={3 * fps} premountFor={fps}> <CallToAction /> </Sequence> </AbsoluteFill> ); }; const LogoReveal = () => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const scale = spring({ frame, fps, config: { damping: 200 } }); const opacity = interpolate(frame, [0, fps], [0, 1], { extrapolateRight: 'clamp', }); return ( <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center' }}> <div style={{ opacity, transform: `scale(${scale})`, fontSize: 96, fontWeight: 'bold', color: '#00d4ff', textShadow: '0 0 40px rgba(0, 212, 255, 0.5)', }} > LaunchPad </div> </AbsoluteFill> ); }; COMMAND_BLOCK: npm run dev Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: npm run dev COMMAND_BLOCK: npm run dev CODE_BLOCK: npx remotion render ProductLaunch out/video.mp4 Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: npx remotion render ProductLaunch out/video.mp4 CODE_BLOCK: npx remotion render ProductLaunch out/video.mp4 CODE_BLOCK: mkdir -p ~/.kiro/steering git clone --depth 1 https://github.com/remotion-dev/skills.git /tmp/remotion-skills cp /tmp/remotion-skills/skills/remotion/SKILL.md ~/.kiro/steering/remotion-rules.md cp -r /tmp/remotion-skills/skills/remotion/rules ~/.kiro/steering/ rm -rf /tmp/remotion-skills Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: mkdir -p ~/.kiro/steering git clone --depth 1 https://github.com/remotion-dev/skills.git /tmp/remotion-skills cp /tmp/remotion-skills/skills/remotion/SKILL.md ~/.kiro/steering/remotion-rules.md cp -r /tmp/remotion-skills/skills/remotion/rules ~/.kiro/steering/ rm -rf /tmp/remotion-skills CODE_BLOCK: mkdir -p ~/.kiro/steering git clone --depth 1 https://github.com/remotion-dev/skills.git /tmp/remotion-skills cp /tmp/remotion-skills/skills/remotion/SKILL.md ~/.kiro/steering/remotion-rules.md cp -r /tmp/remotion-skills/skills/remotion/rules ~/.kiro/steering/ rm -rf /tmp/remotion-skills CODE_BLOCK: import { Audio } from "@remotion/media"; import { staticFile } from "remotion"; <Audio src={staticFile("music.mp3")} volume={0.5} /> Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: import { Audio } from "@remotion/media"; import { staticFile } from "remotion"; <Audio src={staticFile("music.mp3")} volume={0.5} /> CODE_BLOCK: import { Audio } from "@remotion/media"; import { staticFile } from "remotion"; <Audio src={staticFile("music.mp3")} volume={0.5} /> COMMAND_BLOCK: # Create project npx create-video@latest my-video cd my-video && npm install # Add Remotion skills to Kiro git clone --depth 1 https://github.com/remotion-dev/skills.git temp-skills; mkdir -p .kiro/steering; cp temp-skills/skills/remotion/SKILL.md .kiro/steering/remotion-rules.md; cp -r temp-skills/skills/remotion/rules .kiro/steering/; rm -rf temp-skills # Open in Kiro and start building kiro . Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: # Create project npx create-video@latest my-video cd my-video && npm install # Add Remotion skills to Kiro git clone --depth 1 https://github.com/remotion-dev/skills.git temp-skills; mkdir -p .kiro/steering; cp temp-skills/skills/remotion/SKILL.md .kiro/steering/remotion-rules.md; cp -r temp-skills/skills/remotion/rules .kiro/steering/; rm -rf temp-skills # Open in Kiro and start building kiro . COMMAND_BLOCK: # Create project npx create-video@latest my-video cd my-video && npm install # Add Remotion skills to Kiro git clone --depth 1 https://github.com/remotion-dev/skills.git temp-skills; mkdir -p .kiro/steering; cp temp-skills/skills/remotion/SKILL.md .kiro/steering/remotion-rules.md; cp -r temp-skills/skills/remotion/rules .kiro/steering/; rm -rf temp-skills # Open in Kiro and start building kiro . - Programmatic control — Generate hundreds of personalized videos from data - Version control — Your videos are code, track changes with Git - Reusability — Build components once, use them everywhere - Steering files — Persistent context that applies to every interaction - Spec-driven development — Break features into requirements → design → tasks - Vibe mode — Autopilot that creates and modifies multiple files - Hooks — Automated actions triggered by events (save, prompt, etc.) - Use useCurrentFrame(), not CSS animations - Always clamp interpolations - Use <Img> from remotion, not <img> - Use spring() with proper damping configs - ✅ useCurrentFrame() drives all animations - ✅ spring() with damping: 200 for smooth motion - ✅ interpolate() with extrapolateRight: 'clamp' - ✅ <Sequence> with premountFor for preloading - ✅ Proper timing in frames (fps-based) - Use Vibe mode — Kiro's autopilot creates multiple files at once and iterates quickly - Describe scenes in plain English — Be specific about timing, colors, and effects - Iterate visually — The Remotion Studio hot-reloads, so ask Kiro to tweak and see changes instantly - Add audio last — Get the visuals right first, then layer in music: - Use YouTube Audio Library — Free royalty-free music at studio.youtube.com - Remotion Docs - Remotion Skills Repo - Kiro Steering Docs