Render with Remotion CLI
npx remotion render remotion/index.tsx NewsBreaking output.mp4
Composition code
import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";
export const NewsBreaking: React.FC = () => {
const frame = useCurrentFrame();
const headlineY = interpolate(frame, [25, 55], [-100, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
const tickerX = interpolate(frame, [40, 280], [1920, -3000], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
const tickerOpacity = interpolate(frame, [40, 60], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
const livePulse = Math.sin(frame * 0.25) > 0;
return (
<AbsoluteFill style={{ background: "#0a0a0a", fontFamily: "Arial, sans-serif" }}>
<div style={{ position: "absolute", top: 32, left: 40, display: "flex", gap: 12 }}>News Breaking
TV-style breaking news template with sweeping red bar, scrolling ticker, LIVE badge, and headline drop.
Duration10s
Resolution1920 × 1080
Frame rate30 fps
Frames300
Copy the code snippet into your Remotion project and run the render command to generate this template locally.
