import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate, Easing } from 'remotion'; import { ThreeCanvas } from '@remotion/three'; import { RoundedBox, Plane, useTexture } from '@react-three/drei'; import { loadFont } from '@remotion/google-fonts/BricolageGrotesque'; import * as THREE from 'three'; const { fontFamily } = loadFont('normal', { weights: ['400', '700'], subsets: ['latin', 'latin-ext'], }); function Screen() { const texture = useTexture('https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/f/9s1Muwqo8KRbXb2Aajyde'); texture.encoding = THREE.sRGBEncoding; texture.wrapS = THREE.ClampToEdgeWrapping; texture.wrapT = THREE.ClampToEdgeWrapping; return ( ); } export function ReerollVideo() { const { width, height } = useVideoConfig(); const frame = useCurrentFrame(); const rotationY = interpolate(frame, [0, 90], [-Math.PI / 2, 0], { easing: Easing.out(Easing.ease), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const floatY = interpolate(frame, [0, 90], [-10, 0], { easing: Easing.out(Easing.ease), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); // Staggered animation for lines of text const line1Start = 90; const line2Start = 98; const animDuration = 25; const createLineAnimation = (startFrame: number) => { const opacity = interpolate(frame, [startFrame, startFrame + animDuration], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }); const blur = interpolate(frame, [startFrame, startFrame + animDuration], [20, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }); const translateY = interpolate(frame, [startFrame, startFrame + animDuration], [15, 0], { easing: Easing.out(Easing.ease), extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }); return { opacity, filter: `blur(${blur}px)`, transform: `translateY(${translateY}px)` }; }; const line1Style = createLineAnimation(line1Start); const line2Style = createLineAnimation(line2Start); return (

The AI Video Editor

); }

Reeroll has shut down