Render CLI
npx remotion render remotion/index.tsx AiAnimation output.mp4 --codec=h264
Composition code
import { AbsoluteFill, useCurrentFrame, interpolate, spring, useVideoConfig } from "remotion";
import { Code2 } from "lucide-react";
export const AiAnimation: React.FC = () => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
// 1. Orb entrance
const orbEntrance = spring({ frame: Math.max(0, frame - 5), fps, config: { damping: 12 } });
// 2. Morph from Orb to Chat Input Box
// Morph starts at frame 35AI Generation
Apple-style animation simulating an AI prompt being typed and generating a UI component in real time.
Duration8s
Resolution1920 × 1080
Frame rate30 fps
Frames240
This is a free, open-source template. Copy the code and drop it into your Remotion project.
