import { loadFont } from '@remotion/google-fonts/Anton'; import { loadFont as loadInterFont } from '@remotion/google-fonts/Inter'; import React from 'react'; import { AbsoluteFill, useCurrentFrame, interpolate, Easing, Img, } from 'remotion'; import { ScheduleItem } from './ScheduleItem'; import { Squiggle } from './Squiggle'; import { MusicNote } from './MusicNote'; import { Star } from './Star'; const { fontFamily: antonFamily } = loadFont('normal', { weights: ['400'], subsets: ['latin'], }); const { fontFamily: interFamily } = loadInterFont('normal', { weights: ['400', '700'], subsets: ['latin'], }); const artistData = [ { day: '15', monthYear: 'June, 2027', artist: 'Luna Wave', time: '07:00 PM - 08:00 PM', color: '#FF6B6B', }, { day: '21', monthYear: 'July, 2027', artist: 'Solar Flare', time: '08:30 PM - 09:30 PM', color: '#FFD166', }, { day: '05', monthYear: 'August, 2027', artist: 'Cosmic Drift', time: '10:00 PM - 11:00 PM', color: '#06D6A0', }, { day: '19', monthYear: 'September, 2027', artist: 'Neon Echo', time: '11:30 PM - 12:30 AM', color: '#118AB2', }, ]; const AnimatedTitle = ({ children, delay, }: { children: React.ReactNode; delay: number; }) => { const frame = useCurrentFrame(); const titleStyles: React.CSSProperties = { fontFamily: antonFamily, fontSize: 170, color: 'white', textAlign: 'center', fontWeight: 'bold', lineHeight: 1, textShadow: '12px 12px 0px rgba(0,0,0,0.2)', }; const scale = interpolate(frame, [delay, delay + 20], [0.5, 1], { easing: Easing.out(Easing.back(1.5)), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const opacity = interpolate(frame, [delay, delay + 10], [0, 1]); return (

{children}

); }; export function ReerollVideo() { const frame = useCurrentFrame(); const scheduleBoxScale = interpolate(frame, [20, 40], [0, 1], { easing: Easing.out(Easing.back(1.5)), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); return ( {[ { top: 40, left: -60, transform: 'rotate(-15deg) scale(1.1)', color: '#FFD166', delay: 5, }, { bottom: -90, right: -110, transform: 'rotate(15deg) scale(1.1)', color: '#06D6A0', delay: 10, }, ].map((squiggle, i) => { const scale = interpolate( frame, [squiggle.delay, squiggle.delay + 20], [0, 1], { easing: Easing.out(Easing.back(1.5)), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', } ); return (

); })}

{[ { top: 380, right: 120, opacity: 0.8, delay: 15 }, { top: 1000, right: 200, transform: 'scale(0.8) rotate(15deg)', opacity: 0.6, delay: 20, }, { top: 1200, left: 400, transform: 'scale(0.6) rotate(-10deg)', opacity: 0.7, delay: 25, }, ].map((note, i) => { const scale = interpolate(frame, [note.delay, note.delay + 20], [0, 1], { easing: Easing.out(Easing.back(1.5)), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); return ( ); })} {[ { top: 520, left: 150, delay: 18 }, { top: 400, right: 250, delay: 22 }, { top: 1100, right: 100, delay: 26 }, ].map((star, i) => { const scale = interpolate(frame, [star.delay, star.delay + 20], [0, 1], { easing: Easing.out(Easing.back(1.5)), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); return ( ); })}

SUMMER FESTIVAL

LINEUP

{artistData.map((artist, index) => { const delay = 40 + index * 8; const translateX = interpolate( frame, [delay, delay + 25], [1200, 0], { easing: Easing.out(Easing.back(1.2)), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', } ); const opacity = interpolate(frame, [delay, delay + 10], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); return (

); })}

); }

Summer Festival Event Schedule 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

New Arrival Video

Winter Collection Promo Video

Social Media Ad Video

Fashion Promo Video with Dynamic Slide Animations

Recreate Denim Fashion Promo Video

Luxury Jewelry Sale Ad

Fashion Collection Promo Video with Carousel

Fashion Promo

Fashion Collection Promo Video