import { loadFont } from '@remotion/google-fonts/Montserrat'; import { loadFont as loadInstrumentSerifFont } from '@remotion/google-fonts/InstrumentSerif'; import React from 'react'; import { AbsoluteFill, Img, interpolate, spring, useCurrentFrame, useVideoConfig, } from 'remotion'; const { fontFamily: montserrat } = loadFont('normal', { weights: ['600', '700'], subsets: ['latin'], }); const { fontFamily: instrumentSerif } = loadInstrumentSerifFont('normal', { weights: ['400'], subsets: ['latin'], }); const teachers = [ { name: 'Dr. Elena Rossi', image: 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/4NVBUgsr-p-iR2e3oSYWI1JrnzcCeFgJil7Af1Dcd.jpeg', style: { top: 450, left: 20, }, startFrame: 0, }, { name: 'Prof. David Lee', image: 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/sEvMcm8bzH-DtCMlhJhM1I1m3ecXRvHFMdTX0Jiw8.jpeg', style: { top: 700, right: 20, }, startFrame: 15, }, { name: 'Dr. Sarah Khan', image: 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/3hdquzShxk-o93FAPS9jhtMBxlCRNciJZUirrxx77.jpeg', style: { bottom: 280, left: '35%', transform: 'translateX(-50%)', }, startFrame: 30, }, ]; const WavyLine = ({ d, delay }) => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const opacity = spring({ frame: frame - delay, fps, from: 0, to: 0.2, durationInFrames: 60, }); return ( ); }; const Teacher = ({ teacher, startFrame }) => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const scale = spring({ frame: frame - startFrame, fps, from: 0, to: 1, config: { damping: 15, stiffness: 100, }, }); const opacity = interpolate(frame, [startFrame, startFrame + 15], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); return (

{teacher.name}

); }; export function ReerollVideo() { const frame = useCurrentFrame(); const { durationInFrames } = useVideoConfig(); const sceneOpacity = interpolate( frame, [durationInFrames - 20, durationInFrames], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', } ); const textOpacity = interpolate(frame, [0, 30], [0, 1]); const circle1Scale = interpolate(frame, [0, 120], [0, 1.2], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const circle1TranslateX = interpolate(frame, [0, 120], [-100, 50]); const circle1TranslateY = interpolate(frame, [0, 120], [-100, 50]); const circle2Scale = interpolate(frame, [0, 120], [0, 1.2], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const circle2TranslateX = interpolate(frame, [0, 120], [100, -50]); const circle2TranslateY = interpolate(frame, [0, 120], [100, -50]); return (

Innovation Hub

Our Expert Team

{teachers.map((teacher) => ( ))}

www.innovationhub.org

); }

Meet our Expert Team 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