Lilly Tech Systems
Creating Videos with Remotion + Claude Code
Learn to create text animations, image sequences, data-driven videos, add audio, and build multi-scene compositions — all by prompting Claude Code.
Text Animations
Text is the foundation of most video content. Here's how to ask Claude Code for common text effects:
Typewriter effect: "Create a component where the text 'Welcome to AI' appears one character at a time, like a typewriter, over 2 seconds." Word-by-word reveal: "Create a component that reveals the sentence 'Build videos with code' one word at a time, each word fading in with a slight upward motion." Animated counter: "Create a counter that animates from 0 to 10,000 over 3 seconds with comma formatting and easing."
Image Sequences
Include images and photos in your videos using Remotion's <Img> component:
"Create a slideshow component that shows 3 images
from the public/ folder (slide1.png, slide2.png,
slide3.png). Each image should be visible for 3
seconds with a crossfade transition between them.
Use Remotion's staticFile() for the image paths."
public/ directory. Reference them with staticFile("filename.png") in your components. Remotion preloads assets to prevent flickering during rendering.Data-Driven Videos
One of Remotion's most powerful features is generating videos from data. Pass data as props to your compositions:
"Create a bar chart animation component that takes an array of { label: string, value: number } objects as props. Each bar should grow from 0 to its value with a spring animation, staggered by 5 frames. Use a dark background with colored bars. Include labels below each bar and the value above." // Example data you can pass: const data = [ { label: "React", value: 85 }, { label: "Vue", value: 62 }, { label: "Angular", value: 45 }, { label: "Svelte", value: 38 }, ];
Using React Components
Any React component works in Remotion. You can use:
- CSS modules or styled-components for scoped styling
- SVG components for scalable graphics
- Custom hooks for reusable animation logic
- Third-party libraries like Framer Motion (with caveats) or D3 for charts
- HTML Canvas for pixel-level control via
<OffthreadVideo>
Styling with CSS
Style your video scenes the same way you style React apps:
"Create a stylish quote card component for social
media. 1080x1080 square format. Dark gradient
background (#1a1a2e to #0f3460). Large quote text
in white, centered. Author name below in a smaller
gold-colored font. Add a subtle decorative quote
mark icon in the top-left corner at 20% opacity."
Adding Audio
Add background music, narration, or sound effects with Remotion's <Audio> component:
"Add background music to the composition using
the file public/music.mp3. The music should fade
in over the first 30 frames and fade out over
the last 30 frames. Set the volume to 0.3 so it
doesn't overpower any future narration."
Multi-Scene Compositions
Use <Sequence> to arrange multiple scenes in order:
"Create a complete 15-second video with 3 scenes:
Scene 1 (0-5s): Title card with 'AI Video Demo'
that slides in from the bottom with a spring.
Scene 2 (5-10s): Three bullet points that appear
one by one, each with a fade-in and slide-right
animation, staggered by 1 second.
Scene 3 (10-15s): A call-to-action 'Learn More at
ai-school.dev' that scales up from 0 to 100% with
a bouncy spring animation.
Use Sequences to arrange the scenes. Add smooth
transitions between them."
💡 Try It: Create a Multi-Scene Video
Ask Claude Code to create a 3-scene video for you. Include a title card, a content scene with animated text, and an outro. Experiment with different prompts to see how the output changes. Preview in Remotion Studio and iterate until you are satisfied.