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; }

Fashion Collection Promo Video with Carousel

More like this

Team Introduction Video

Meet our Expert Team Video

Animated Team Showcase Video

Finance App UI Animation

Services List Animation

Travel Website Promo Video

iOS Whatsapp Conversation Video

Hiring Video

Animated Logo & Typeface Reveal

Logo animation

iOS Notification

Reeroll Logo animation

Images showcase

Text Message Conversation Animation Video

Reeroll AI: Business Video Marketing Promo

Growth Video Template

Acme Whitelabel Video Template

AI Product Promo Video for Reddit Post

Spiral.app Software Dev Promoa

Trixpanel template