Render with Remotion CLI
npx remotion render remotion/index.tsx BrandReveal output.mp4
Composition code
import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from "remotion";
const BRAND_NAME = "BRAND";
export const BrandReveal: React.FC = () => {
const frame = useCurrentFrame();
const logoScale = interpolate(frame, [5, 40], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.back(1.5)) });
const logoRotation = interpolate(frame, [5, 45], [45, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.cubic) });
const charReveal = Math.floor(interpolate(frame, [35, 75], [0, BRAND_NAME.length], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }));
const lineWidth = interpolate(frame, [70, 115], [0, 640], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.cubic) });
const tagOpacity = interpolate(frame, [82, 115], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });Brand Reveal
Cinematic logo and brand name reveal with scan line sweep, corner markers, and character-by-character reveal.
Duration6s
Resolution1920 × 1080
Frame rate30 fps
Frames180
Copy the code snippet into your Remotion project and run the render command to generate this template locally.
