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

); }

3D iPhone Device Video

More like this

Hiring Video

Animated Logo & Typeface Reveal

Logo animation

Reeroll Logo animation

Reeroll AI: Business Video Marketing Promo

Acme Whitelabel Video Template

AI Product Promo Video for Reddit Post

Spiral.app Software Dev Promoa

Trixpanel template

Creative Studio Promo Video

Mewlingo Language Learning App Ad Template

Reeroll AI Video Marketing Launch

Reeroll Video

Github Video

Reeroll Launch Video