/** Free Remotion Template Component * --------------------------------- * This template is free to use in your projects! * Credit appreciated but not required. * * Created by the team at https://www.reactvideoeditor.com * * Happy coding and building amazing videos! 🎉 */ "use client"; import { useCurrentFrame, interpolate, spring, useVideoConfig } from "remotion"; export default function ProgressSteps() { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const steps = ["Research", "Design", "Build", "Launch"]; const framesPerStep = Math.floor(fps * 0.8); return (

Project Timeline

{steps.map((label, i) => { const stepStart = i * framesPerStep; const fillProgress = interpolate( frame, [stepStart, stepStart + framesPerStep * 0.6], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" } ); const isActive = frame >= stepStart && frame < stepStart + framesPerStep; const isComplete = frame >= stepStart + framesPerStep * 0.6; const pulse = isActive ? spring({ frame: frame - stepStart, fps, config: { damping: 8, stiffness: 150, mass: 0.4 }, }) : 1; const circleScale = isActive ? 0.9 + pulse * 0.2 : isComplete ? 1.1 : 1; const lineProgress = i < steps.length - 1 ? interpolate( frame, [stepStart + framesPerStep * 0.5, stepStart + framesPerStep], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" } ) : 0; return (

0 ? "#3b82f6" : "#4b5563"}`, background: fillProgress > 0 ? `linear-gradient(135deg, #3b82f6, #7209b7)` : "transparent", display: "flex", justifyContent: "center", alignItems: "center", transform: `scale(${circleScale})`, transition: "border-color 0.1s", }} > 0 ? "white" : "#6b7280", fontSize: "1rem", fontWeight: "bold", }} > {i + 1}

0 ? "#93c5fd" : "#6b7280", fontSize: "0.8rem", fontWeight: "500", marginTop: "10px", whiteSpace: "nowrap", }} > {label}

{i < steps.length - 1 && (

)}

); })}

); }

Progress Steps

Install