import { AbsoluteFill, interpolate, useCurrentFrame, useVideoConfig, Img, Easing, } from 'remotion'; import { loadFont } from '@remotion/google-fonts/PlayfairDisplay'; import { loadFont as loadMontserrat } from '@remotion/google-fonts/Montserrat'; const { fontFamily: playfairFont } = loadFont('normal', { weights: ['400', '700'], subsets: ['latin'], }); const { fontFamily: montserratFont } = loadMontserrat('normal', { weights: ['400', '500'], subsets: ['latin'], }); const imageUrls = [ 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/jzc-GusUWJ-qe8MQrarQ7uK2lVRsCi17SkpBsBPeC.jpeg', 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/bCHfHw-ClF-faka8dDo57xJRFCMr4Z55UyN43hfSs.jpeg', 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/6YW2mcsZRa-7kmELqVAXxLOq4FfagvgVmCpfHD7dM.jpeg', 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/7lYVj_QhJ--pB3RwkMzht0wGu9uuES12YK2uEgifC.jpeg', ]; const IMAGE_WIDTH = 550; const SPACING = 250; export function ImageComponent({ src, style, }: { src: string; style: React.CSSProperties; }) { return (

); } export function ReerollVideo() { const frame = useCurrentFrame(); const { width, height } = useVideoConfig(); const animationDuration = 60; const content = (

acmeinc.com

{imageUrls.map((src, i) => { const cycle = Math.floor(frame / animationDuration); const rawProgress = (frame % animationDuration) / animationDuration; const progress = Easing.inOut(Easing.ease)(rawProgress); const positionIndex = (i - cycle + imageUrls.length) % imageUrls.length; const startPos = positionIndex - progress; const scale = interpolate( startPos, [-1, 0, 1], [0.8, 1, 0.8], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.inOut(Easing.ease), } ); const translateX = interpolate( startPos, [-1, 0, 1], [-SPACING, 0, SPACING], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.inOut(Easing.ease), } ); // Improved fade-out logic const opacity = interpolate( startPos, [-1.1, -0.5, 0, 0.5, 1.1], [0, 1, 1, 1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.inOut(Easing.ease), } ); const zIndex = Math.floor( interpolate(startPos, [-1, -0.5, 0, 0.5, 1], [1, 5, 10, 5, 1]) ); return ( ); })}

NEW

COLLECTION

SHOP NOW

); return content; }

Reeroll has shut down