Render with Remotion CLI
npx remotion render remotion/index.tsx SplitReveal output.mp4
Composition code
import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from "remotion";
export const SplitReveal: React.FC = () => {
const frame = useCurrentFrame();
const leftX = interpolate(frame, [10, 55], [0, -960], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.inOut(Easing.cubic) });
const rightX = interpolate(frame, [10, 55], [0, 960], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.inOut(Easing.cubic) });
const contentOpacity = interpolate(frame, [40, 75], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
const contentScale = interpolate(frame, [40, 70], [0.92, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.back(1.1)) });
return (
<AbsoluteFill style={{ background: "#f0ede8", fontFamily: "Inter, sans-serif", overflow: "hidden" }}>
<div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", opacity: contentOpacity, transform: `scale(${contentScale})` }}>Split Reveal
Two panels slide apart to reveal a centered product name — before/after dramatic split-screen effect.
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.
