import { AbsoluteFill, interpolate, useCurrentFrame, useVideoConfig, Easing, } from 'remotion'; import { loadFont } from '@remotion/google-fonts/Anton'; import { loadFont as loadCaveat } from '@remotion/google-fonts/Caveat'; import { loadFont as loadInter } from '@remotion/google-fonts/Inter'; import { Polaroid } from './Polaroid'; const { fontFamily: anton } = loadFont(); const { fontFamily: caveat } = loadCaveat('normal', { weights: ['700'], }); const { fontFamily: inter } = loadInter(); export function ReerollVideo() { const frame = useCurrentFrame(); const { width, height } = useVideoConfig(); const imageUrls = [ 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/wilMcMTk2L-TWt5WWOHUhAFC26Ai0Co6Wq9NefTZh.jpeg', 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/SbQp8oMXQW-3HsPjESxUpxUgjgIQyfHTfxsJTZeN3.jpeg', 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/01Ele7Xo0e-s3Y23ExUrKe6OWaAfccimhQ7RaKP4I.jpeg', 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/msXG4v98eL-vuMvOpKeP2ZUEhxdpKIv3BHLJEgI3p.jpeg', ]; const container = { display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', gap: 20, } as React.CSSProperties; const imageAnimation = (startFrame: number) => { const opacity = interpolate(frame, [startFrame, startFrame + 20], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const scale = interpolate( frame, [startFrame, startFrame + 20], [0.8, 1], { easing: Easing.out(Easing.cubic), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', } ); return { opacity, scale }; }; const p1 = imageAnimation(0); const p2 = imageAnimation(5); const p3 = imageAnimation(10); const p4 = imageAnimation(15); const newCollectionOpacity = interpolate(frame, [20, 40], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const newCollectionScale = interpolate(frame, [20, 40], [0.8, 1], { easing: Easing.out(Easing.cubic), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const nowTextOpacity = interpolate(frame, [25, 45], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const nowTextScale = interpolate(frame, [25, 45], [0.8, 1], { easing: Easing.out(Easing.cubic), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const availableOpacity = interpolate(frame, [35, 55], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const availableScale = interpolate(frame, [35, 55], [0.8, 1], { easing: Easing.out(Easing.cubic), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const websiteOpacity = interpolate(frame, [45, 65], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const websiteScale = interpolate(frame, [45, 65], [0.8, 1], { easing: Easing.out(Easing.cubic), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); return (

THE

LUNAR

Collection

Discover now at gemvista.com

); }

Jewelry Brand Promo Video

More like this

Cyber Monday Sale Ad Video

15% Off Promotion Video

High-Fashion Coming Soon Promo Video

What's in My Bag Video Reveal

Healthy Food Menu Promo Video

Soda Product Showcase

Clean Animated Orange Product Video

New Arrival Video

Winter Collection Promo Video

Social Media Ad Video

Fashion Promo Video with Dynamic Slide Animations

Recreate Denim Fashion Promo Video

Image Carousel Video

Summer Sale 16:9 Video Ad

Luxury Jewelry Sale Ad