import React from 'react'; import { AbsoluteFill, Sequence, useCurrentFrame, interpolate, Easing, Audio, // Import Audio component } from 'remotion'; import { loadFont } from '@remotion/google-fonts/Inter'; import { loadFont as loadMonoFont } from '@remotion/google-fonts/RobotoMono'; export const { fontFamily: interFontFamily } = loadFont("normal", { weights: ['400', '600'], subsets: ['latin'] }); export const { fontFamily: monoFontFamily } = loadMonoFont("normal", { weights: ['400'], subsets: ['latin'] }); export function ReerollVideo() { const frame = useCurrentFrame(); const logoOpacity = interpolate(frame, [0, 40], [0, 1], { easing: Easing.inOut(Easing.back()), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const logoBlur = interpolate(frame, [0, 40], [20, 0], { easing: Easing.inOut(Easing.back()), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const logoScale = interpolate(frame, [0, 40], [0.8, 1], { easing: Easing.inOut(Easing.back()), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const headlineOpacity = interpolate(frame, [30, 70], [0, 1], { easing: Easing.inOut(Easing.back()), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const headlineBlur = interpolate(frame, [30, 70], [15, 0], { easing: Easing.inOut(Easing.back()), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const headlineY = interpolate(frame, [30, 70], [20, 0], { easing: Easing.inOut(Easing.back()), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const urlOpacity = interpolate(frame, [60, 100], [0, 1], { easing: Easing.inOut(Easing.back()), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const urlBlur = interpolate(frame, [60, 100], [10, 0], { easing: Easing.inOut(Easing.back()), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const urlY = interpolate(frame, [60, 100], [15, 0], { easing: Easing.inOut(Easing.back()), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); return ( {/* Background Audio */}

); }

Reeroll Logo Animation