DEV Community

Cover image for Create Stunning Videos with JavaScript Using Remotion & Kiro IDE
Bharadwaz Kari
Bharadwaz Kari

Posted on

Create Stunning Videos with JavaScript Using Remotion & Kiro IDE

#ai #javascript #react #tutorial

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>
  );
};
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Step 3: Open in Kiro 

kiro .
Enter fullscreen mode Exit fullscreen mode

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>
  );
};
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Export the final video:

npx remotion render ProductLaunch out/video.mp4
Enter fullscreen mode Exit fullscreen mode

Output Result

Patterns Kiro Handles

Pattern What Kiro Uses
Animations useCurrentFrame() + interpolate()
Timing spring() with damping configs
Sequencing <Sequence> with premountFor
Transitions <TransitionSeries> from @remotion/transitions
Images <Img> from remotion (not <img>)
Videos <Video> from @remotion/media
Audio <Audio> from @remotion/media
Fonts @remotion/google-fonts with loadFont()

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
Enter fullscreen mode Exit fullscreen mode

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} />
Enter fullscreen mode Exit fullscreen mode
  1. Use YouTube Audio Library — Free royalty-free music at studio.youtube.com

Resources

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 .
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)