Render with Remotion CLI
npx remotion render remotion/index.tsx EventPromo output.mp4
Composition code
import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from "remotion";
export const EventPromo: React.FC = () => {
const frame = useCurrentFrame();
const titleScale = interpolate(frame, [10, 45], [0.8, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.back(1.2)) });
const titleOpacity = interpolate(frame, [10, 35], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
const detailsOpacity = interpolate(frame, [120, 150], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
return (
<AbsoluteFill style={{ background: "linear-gradient(160deg, #0a0800, #1a1200, #0a0600)", fontFamily: "Inter, sans-serif", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
<div style={{ transform: `scale(${titleScale})`, opacity: titleOpacity, textAlign: "center" }}>
<div style={{ fontSize: 130, fontWeight: 900, background: "linear-gradient(135deg, #fbbf24, #f59e0b, #d97706)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>BuildConf</div>Event Promo
Gold-themed event announcement with flipping countdown digits, particle dots, and venue details.
Duration8s
Resolution1920 × 1080
Frame rate30 fps
Frames240
Copy the code snippet into your Remotion project and run the render command to generate this template locally.
