"use client"; import { useCurrentFrame, interpolate, spring, useVideoConfig } from "remotion"; export default function CountdownIntro() { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const totalCountdownFrames = fps * 3; const secondFrames = fps; const currentSecond = Math.max(3 - Math.floor(frame / secondFrames), 0); const isCountdownDone = frame >= totalCountdownFrames; const frameInSecond = frame % secondFrames; const ringProgress = frameInSecond / secondFrames; const circumference = 2 * Math.PI * 70; const dashOffset = isCountdownDone ? circumference : circumference * ringProgress; const numberOpacity = isCountdownDone ? 0 : 1; const goScale = spring({ frame: Math.max(frame - totalCountdownFrames, 0), fps, config: { damping: 8, stiffness: 100 }, }); const goOpacity = interpolate( frame, [totalCountdownFrames, totalCountdownFrames + 5], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" } ); return (

{!isCountdownDone && ( {currentSecond} )} {isCountdownDone && ( GO! )}

); }

Countdown Intro

Install