import React from 'react'; import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate, Easing } from 'remotion'; import { loadFont } from '@remotion/google-fonts/Lora'; import { loadFont as loadPlayfairDisplay } from '@remotion/google-fonts/PlayfairDisplay'; // Changed from DancingScript import { loadFont as loadInter } from '@remotion/google-fonts/Inter'; import { StyledImage } from './components/StyledImage'; const { fontFamily: loraFontFamily } = loadFont("normal", { weights: ['700'], subsets: ['latin'] }); const { fontFamily: playfairDisplayFontFamily } = loadPlayfairDisplay("normal", { weights: ['400', '500', '700'], subsets: ['latin'] }); // New font for Zuman Jewelry const { fontFamily: interFontFamily } = loadInter("normal", { weights: ['400'], subsets: ['latin'] }); const imageUrls = [ "https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/2d85fbcd-f0c2-4baf-929a-d993dc8f53d0/Ad-ZfulchM", "https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/2d85fbcd-f0c2-4baf-929a-d993dc8f53d0/GANiS31ZSY", "https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/2d85fbcd-f0c2-4baf-929a-d993dc8f53d0/05Lv8o2aQt", "https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/2d85fbcd-f0c2-4baf-929a-d993dc8f53d0/qWgKQlGC0c" ]; export function ReerollVideo() { const frame = useCurrentFrame(); const { durationInFrames } = useVideoConfig(); const imageAppearDelays = [0, 18, 36, 54]; const zoomOutStartFrame = durationInFrames - 90; const zoomOutEndFrame = durationInFrames - 15; const mainContentScale = interpolate( frame, [zoomOutStartFrame, zoomOutEndFrame], [1, 0.95], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.inOut(Easing.ease) } ); return (

{/* Top Text Section */}

NEW

COLLECTION

Acme Jewelry

{/* Image Grid Section */}

{imageUrls.map((src, index) => ( ))}

{/* Bottom Text Section */}

Handcrafted 925 Sterling Silver Jewlery

); }

Acme Jewelry Collection Video