Render with Remotion CLI
npx remotion render remotion/index.tsx QuoteStory output.mp4
Composition code
import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from "remotion";
const QUOTE = "Code is poetry. Motion is music. Together, they tell stories that data alone never could.";
export const QuoteStory: React.FC = () => {
const frame = useCurrentFrame();
const words = QUOTE.split(" ");
const wordReveal = Math.floor(interpolate(frame, [25, 180], [0, words.length], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.cubic) }));
const authorOpacity = interpolate(frame, [185, 215], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
return (
<AbsoluteFill style={{ background: "linear-gradient(180deg, #06060c, #0e0b1e, #070612)", fontFamily: "Inter, sans-serif", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "80px 64px" }}>Quote Story
Vertical format animated quote with word-by-word reveal, left accent bar, and elegant author byline.
Duration8s
Resolution1080 × 1920
Frame rate30 fps
Frames240
Copy the code snippet into your Remotion project and run the render command to generate this template locally.
