Render with Remotion CLI
npx remotion render remotion/index.tsx SubscribeCTA output.mp4
Composition code
import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from "remotion";
export const SubscribeCTA: React.FC = () => {
const frame = useCurrentFrame();
const avatarScale = interpolate(frame, [10, 40], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.back(1.6)) });
const buttonScale = interpolate(frame, [70, 100], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.back(1.5)) });
const bellAngle = frame > 110 && frame < 145 ? Math.sin((frame - 110) * 0.7) * 20 * Math.max(0, 1 - (frame - 110) / 35) : 0;
return (
<AbsoluteFill style={{ background: "#0f0f0f", fontFamily: "Inter, sans-serif", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
<div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 3, background: "#ff0000" }} />
<div style={{ width: 140, height: 140, borderRadius: "50%", background: "linear-gradient(135deg, #ff0000, #cc0000)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 52, fontWeight: 900, color: "white", marginBottom: 28, transform: `scale(${avatarScale})` }}>YT</div>Subscribe CTA
YouTube subscribe call-to-action with avatar spring-in, bell shake animation, and ripple pulse rings.
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.
