Render CLI

npx remotion render remotion/index.tsx GradientReveal output.mp4 --codec=h264

Composition code

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

const DEFAULT_GRADIENT_STOPS = [
  "#007AFF 33%",
  "#5856D6 43%",
  "#AF52DE 53%",
  "#FF2D55 60%",
  "rgba(0,0,0,0.05) 75%",
  "rgba(0,0,0,0) 100%",
];

interface GradientRevealTemplateProps {

Gradient Reveal

Smooth gradient mesh reveal with layered color transitions and animated composition.

Branding Motion

Duration6s

Resolution1920 × 1080

Frame rate30 fps

Frames180

Browse all templates

This is a free, open-source template. Copy the code and drop it into your Remotion project.

Related templates

View

Gradient Reveal

Related templates

Product Launch

Lower Third

Brand Reveal