Render with Remotion CLI
npx remotion render remotion/index.tsx GradientReveal output.mp4
Composition code
import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from "remotion";
const BLOBS = [
{ x: 20, y: 30, color: "#6366f1", size: 700 },
{ x: 75, y: 20, color: "#ec4899", size: 600 },
{ x: 85, y: 75, color: "#f59e0b", size: 550 },
{ x: 10, y: 80, color: "#22c55e", size: 500 },
];
export const GradientReveal: React.FC = () => {
const frame = useCurrentFrame();
const drift = interpolate(frame, [0, 180], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });Gradient Reveal
Colorful animated mesh gradient background with frosted glass card, headline reveal, and pill tags.
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.
