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 (

); })}

); }

Reeroll has shut down