Render with Remotion CLI

npx remotion render remotion/index.tsx CodeReveal output.mp4

Composition code

import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";

const CODE = `import { AbsoluteFill, useCurrentFrame } from 'remotion';

export const MyVideo = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1]);
  return (
    <AbsoluteFill style={{ opacity }}>
      <h1>Hello, Remotion!</h1>
    </AbsoluteFill>
  );

Code Reveal

Developer-focused animated code editor window with character-by-character typewriter and syntax highlighting.

Developer Motion

Duration10s

Resolution1920 × 1080

Frame rate30 fps

Frames300

Browse all templates

Copy the code snippet into your Remotion project and run the render command to generate this template locally.

Related templates

View

Code Reveal

Related templates

Glitch Title

Split Reveal

Gradient Reveal