import { AbsoluteFill, Easing, interpolate, useCurrentFrame, } from 'remotion'; import { loadFont } from '@remotion/google-fonts/PlayfairDisplay'; import { ImageComponent } from './ImageComponent'; import { Word } from './Word'; const { fontFamily } = loadFont('normal', { weights: ['400', '700'], subsets: ['latin'], }); const images = [ 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/rjvgVTwYmq-clEFNRMSF1x1rPostQhEIumoB7x9Uy.jpeg', 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/-fG-VGrrhA-YNBT4Urn6qSDtj6x9glYxcwmDXlLPZ.jpeg', 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/9owT5sTdSY-5eHpkVUpH1QjhA1Lo2VVqTRJl4uam4.jpeg', 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/ufhJBE9fYS-C1FSLRyggsl5wLjPRL11VjKfZs5cM9.jpeg', ]; const sceneDuration = 30; const transitionDuration = 15; const timings = [ { sceneEnd: 30 }, { sceneEnd: 30 + sceneDuration + transitionDuration }, { sceneEnd: 30 + 2 * sceneDuration + 2 * transitionDuration }, { sceneEnd: 30 + 2 * sceneDuration + 2 * transitionDuration + 40 }, ]; const newText = "Experience True Comfort."; const words = newText.split(' '); export function ReerollVideo() { const frame = useCurrentFrame(); const mainTextOpacity = interpolate(frame, [0, 130, 140], [1, 1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const ctaOpacity = interpolate(frame, [135, 145], [0, 1], { easing: Easing.in(Easing.ease), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const textStyle: React.CSSProperties = { fontFamily, color: 'white', fontSize: '112px', textAlign: 'center', lineHeight: 1.2, textShadow: '0 2px 10px rgba(0,0,0,0.3)', }; const getClipPath = (index: number) => { if (index === 0) return 'inset(0% 0 0 0)'; const transitionStart = timings[index - 1].sceneEnd; const transitionEnd = transitionStart + transitionDuration; const reveal = interpolate(frame, [transitionStart, transitionEnd], [100, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.bezier(0.25, 1, 0.5, 1), }); return `inset(${reveal}% 0 0 0)`; }; return ( {images.slice(1).map((src, i) => ( ))}

{words.map((word, i) => ( {word} ))}

Shop now

acme.com

); }

Social Media Ad Video

More like this

High-Fashion Coming Soon Promo Video

Healthy Food Menu Promo Video

Soda Product Showcase

Airbnb App Demo Tutorial

High-Fashion Coming Soon Promo Video

Healthy Food Menu Promo Video

Soda Product Showcase

Airbnb App Demo Tutorial