/** * 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 { interpolate, useCurrentFrame } from "remotion"; export default function ComparisonChart() { const frame = useCurrentFrame(); const maxBarHeight = 280; // Before value animation const beforeValue = Math.round( interpolate(frame, [10, 40], [0, 34], { extrapolateRight: "clamp", extrapolateLeft: "clamp", }) ); const beforeBarHeight = interpolate(frame, [10, 40], [0, (34 / 100) * maxBarHeight], { extrapolateRight: "clamp", extrapolateLeft: "clamp", }); // After value animation (starts slightly later) const afterValue = Math.round( interpolate(frame, [20, 50], [0, 89], { extrapolateRight: "clamp", extrapolateLeft: "clamp", }) ); const afterBarHeight = interpolate(frame, [20, 50], [0, (89 / 100) * maxBarHeight], { extrapolateRight: "clamp", extrapolateLeft: "clamp", }); // Divider line animation const dividerOpacity = interpolate(frame, [0, 15], [0, 1], { extrapolateRight: "clamp", }); const dividerHeight = interpolate(frame, [0, 20], [0, 350], { extrapolateRight: "clamp", }); return (

{/* Title */}

Performance Comparison

{/* Comparison container */}

{/* Before side */}

{/* Value */}

{beforeValue}%

{/* Bar */}

{/* Label */}

Before

{/* Divider */}

{/* After side */}

{/* Value */}

{afterValue}%

{/* Bar */}

{/* Label */}

After

); }

Comparison Chart

Install