Render with Remotion CLI
npx remotion render remotion/index.tsx TypewriterQuote output.mp4
Composition code
import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";
const QUOTE = "The best time to plant a tree was 20 years ago. The second best time is now.";
export const TypewriterQuote: React.FC = () => {
const frame = useCurrentFrame();
const charCount = Math.floor(interpolate(frame, [20, 160], [0, QUOTE.length], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }));
const cursorVisible = frame % 15 < 8;
const authorOpacity = interpolate(frame, [170, 200], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
return (Typewriter Quote
Classic black background quote that types itself character by character with a blinking cursor.
Duration8s
Resolution1920 × 1080
Frame rate30 fps
Frames240
Copy the code snippet into your Remotion project and run the render command to generate this template locally.
