Create Stunning Videos with JavaScript Using Remotion & Kiro IDE

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.

What is Remotion?

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?

1. 
   Programmatic control — Generate hundreds of personalized videos from data


2. 
   Version control — Your videos are code, track changes with Git


3. 
   Reusability — Build components once, use them everywhere

Here's a simple fade-in animation in Remotion:

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>

  );

};

Notice something? No CSS animations. Remotion uses useCurrentFrame() to drive everything — that's how it renders each frame deterministically.

The Problem: AI Gets Remotion Wrong

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.

The Solution: Kiro + Steering Files

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.

What Kiro Does Differently

1. 
   Steering files — Persistent context that applies to every interaction


2. 
   Spec-driven development — Break features into requirements → design → tasks


3. 
   Vibe mode — Autopilot that creates and modifies multiple files


4. 
   Hooks — Automated actions triggered by events (save, prompt, etc.)

For Remotion, steering files are huge. We give Kiro all the rules:

• Use useCurrentFrame(), not CSS animations


• Always clamp interpolations


• Use <Img> from remotion, not <img>
  


• Use spring() with proper damping configs

And it follows them every time.

Setup (60 Seconds)

Step 1: Create a Remotion project

Options: Blank Project, TailwindCSS, No Agents, Not VS Code

npx create-video@latest my-video

cd my-video

npm install

Step 2: Add Remotion skills to Kiro

Run this single command to pull in all the Remotion best practices:

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

Step 3: Open in Kiro

kiro .

That's it. The .kiro/steering/ folder now contains 30+ rule files covering animations, timing, sequencing, images, audio, transitions, and more.

What You Can Build

Once set up, try prompts like these in Kiro's Vibe mode:

Simple animation

"Create a fade-in animation that reveals text over 1 second"

Multi-scene video

"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"

With specific effects

"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.

Example Output

Here's what Kiro generates for a multi-scene intro (simplified):

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>

  );

};

Notice:

• ✅ 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)

All the Remotion patterns, automatically.

Rendering

Preview your video:

npm run dev

Open http://localhost:3000 to see the Remotion Studio with hot reload.

Export the final video:

npx remotion render ProductLaunch out/video.mp4

Patterns Kiro Handles

Global Setup (Optional)

Want Remotion skills in ALL your Kiro projects?

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

Now every workspace gets Remotion knowledge automatically.

Tips for Best Results

1. Use Vibe mode — Kiro's autopilot creates multiple files at once and iterates quickly




2. Describe scenes in plain English — Be specific about timing, colors, and effects




3. Iterate visually — The Remotion Studio hot-reloads, so ask Kiro to tweak and see changes instantly




4. Add audio last — Get the visuals right first, then layer in music:
   
   

   import { Audio } from "@remotion/media";

   import { staticFile } from "remotion";



   <Audio src={staticFile("music.mp3")} volume={0.5} />

1. 
   Use YouTube Audio Library — Free royalty-free music at studio.youtube.com
   

Resources

• Remotion Docs


• Remotion Skills Repo


• Kiro IDE


• Kiro Steering Docs

TL;DR

# 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 .

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