import { Sequence, useCurrentFrame, useVideoConfig, Img, interpolate, Easing, Audio, } from 'remotion'; import React from 'react'; import { loadFont } from '@remotion/google-fonts/Inter'; const { fontFamily } = loadFont('normal', { weights: ['400', '500', '700'], subsets: ['latin'], }); const shutterSound = 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/f/y/g/fyg-Z872j-1689235817.mp3'; const images = [ 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/2HcfUOzj-N-CYIoiJcGea8Q9tLfL2MKN5jdEwpCgZ.jpeg', 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/P_r3n0ceGq-E6MrdQVioc4qNUCr0JFDuX4nxFe2jF.jpeg', 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/eLWtI8eToF-sCXCGCEq7xGOyAa54hkE279VURQzCi.jpeg', 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/2qLSZMR7ZQ-1crvvkryId3HaNd4x0KQtJxrIzfhhv.jpeg', 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/3acJrRzJmU-QfsvUhzekCb8XMYqcQAboQihyTxXzi.jpeg', 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/d3BsdQjIWY-S05uSKJTRXPsyqfL3Ey1LNYt0OELsb.jpeg', 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/Ym3lTnnSUT-mn48qJUTn0dXpHitwISbR7DrrwuwPc.jpeg', 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/2Idtvvkjjl-YXMIJtwfmunqxTTtS9pA0KkUas3x5K.jpeg', 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/V5hobldzu_-vXzajbKmi70EE8gVWyekgFp6ooBMac.jpeg', ]; const photoReelImages = [ 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/2Idtvvkjjl-YXMIJtwfmunqxTTtS9pA0KkUas3x5K.jpeg', 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/V5hobldzu_-vXzajbKmi70EE8gVWyekgFp6ooBMac.jpeg', 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/Ym3lTnnSUT-mn48qJUTn0dXpHitwISbR7DrrwuwPc.jpeg', ]; const PhotoGrid = () => { const { height } = useVideoConfig(); const frame = useCurrentFrame(); const speed = 2; const cardHeight = height / 2.5; const gap = 40; const column1Images = images.filter((_, i) => i % 2 === 0); const column2Images = images.filter((_, i) => i % 2 !== 0); const totalHeight1 = (cardHeight + gap) * column1Images.length; const totalHeight2 = (cardHeight + gap) * column2Images.length; const y1 = (frame * speed) % totalHeight1; const y2 = (frame * speed) % totalHeight2; const createColumn = (imgs: string[], y: number, initialOffset: number) => (

{[...imgs, ...imgs].map((src, i) => (

))}

); return (

{createColumn(column1Images, y1, 0)} {createColumn(column2Images, y2, -(cardHeight / 2))}

); }; const Notification = () => { const frame = useCurrentFrame(); const scale = spring({ frame, fps: 30, from: 0, to: 1, config: { stiffness: 100, }, }); const opacity = interpolate(frame, [0, 20], [0, 1]); return (

NOTIFICATION

Hurry to see our new arrival – it's simply amazing!

SEE NOW

); }; const GridScene = () => { const { height } = useVideoConfig(); return (

); }; const CameraUI = () => { const frame = useCurrentFrame(); const { width, height } = useVideoConfig(); const photoIndex = Math.floor(frame / 10) % photoReelImages.length; const currentImage = photoReelImages[photoIndex]; const flashOpacity = spring({ frame: frame % 10, fps: 30, from: 1, to: 0, config: { stiffness: 200, damping: 200 }, }); return (

0.5X 1X 3X

PORTRAIT PHOTO VIDEO MORE

); }; import { spring } from 'remotion'; export function ReerollVideo() { return (

); }

Reeroll has shut down