import { AbsoluteFill, interpolate, useCurrentFrame, useVideoConfig, Easing, } from 'remotion'; import { loadFont } from '@remotion/google-fonts/BebasNeue'; import { loadFont as loadCaveat } from '@remotion/google-fonts/Caveat'; import { loadFont as loadInter } from '@remotion/google-fonts/Inter'; import { Polaroid } from './Polaroid'; const { fontFamily: bebasNeue } = 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/CLcQ_TJyQS-RgbVfsfs0KlnZpdXqpeUsKP6uEacNE.jpeg', 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/HN6vQ36ObN-X6gsiFdg59Oq38dj6jVsv91i4nDR3t.jpeg', 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/6Qcv70t6ta-Y1d3el3mWT3LNRcJ208OhqjgwWyhX3.jpeg', 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/cu0AcgSt7V-6tWKUpIJdh642pZK84pkt416Wtotds.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.back()), 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.back()), 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.back()), 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.back()), 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.back()), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); return (

RADIANT SKIN

GLOW

unlocked

at glowup.com

); }

Skincare & Beauty 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

Jewelry Brand Promo Video

Fashion Collection Promo Video with Carousel

Fashion Promo

Fashion Sale Promo Video

Fashion Sale Video