import {loadFont} from '@remotion/google-fonts/Inter'; import React from 'react'; import { Easing, Interactive, interpolate, useCurrentFrame, type InteractiveTransformProps, } from 'remotion'; const {fontFamily} = loadFont('normal', { subsets: ['latin'], weights: ['700', '800'], }); const data = [ {highlighted: false, label: 'Jonny', value: 34}, {highlighted: false, label: 'Igor', value: 89}, {highlighted: true, label: 'Mehmet', value: 163}, ]; const maxValue = Math.max(...data.map(({value}) => value)); const growthEasing = Easing.spring({ damping: 14.5, mass: 0.8, overshootClamping: false, stiffness: 100, }); const Bar: React.FC<{ readonly animationDelay: number; readonly highlighted: boolean; readonly label: string; readonly value: number; }> = ({animationDelay, highlighted, label, value}) => { const frame = useCurrentFrame(); const barAnimationStart = 22 + animationDelay; const barAnimationEnd = barAnimationStart + 16 + Math.round((value / maxValue) * 8); const growthProgress = frame >= barAnimationEnd ? 1 : interpolate(frame, [barAnimationStart, barAnimationEnd], [0, 1], { easing: [growthEasing], extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const valueAnimationStart = barAnimationEnd - 8; const valueAnimationEnd = barAnimationEnd + 2; const valueProgress = interpolate( frame, [valueAnimationStart, valueAnimationEnd], [0, 1], { easing: growthEasing, extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }, ); return (

{value}

{label}

); }; const VerticalBarChartInner: React.FC = ({ style, }) => { return (

{data.map(({highlighted, label, value}, index) => (

))}

); }; export const VerticalBarChart = Interactive.create({ Component: VerticalBarChartInner, componentName: '', });