import { loadFont } from '@remotion/google-fonts/Anton'; import { loadFont as loadInter } from '@remotion/google-fonts/Inter'; import React from 'react'; import { AbsoluteFill, Img, useCurrentFrame, interpolate, Easing } from 'remotion'; const { fontFamily: antonFamily } = loadFont(); const { fontFamily: interFamily } = loadInter('normal', { weights: ['400', '700'], subsets: ['latin'], }); const Background = () => { return ; }; const Scribbles = () => { const frame = useCurrentFrame(); const strokeDashoffset = interpolate(frame, [0, 30], [1000, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.ease), }); return ( ); }; const ImageContainer = ({ imageSrc }: { imageSrc: string }) => { const frame = useCurrentFrame(); const scale = interpolate(frame, [0, 120], [1.1, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const innerTranslateY = interpolate(frame, [0, 120], [-20, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const containerTranslateY = interpolate(frame, [5, 35], [1920, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.back(0.8)), }); return (

); }; const Logo = () => { const frame = useCurrentFrame(); const opacity = interpolate(frame, [20, 40], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const scale = interpolate(frame, [20, 40], [0.8, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.back(1.5)), }); return (

INGOUDE
COMPANY

); }; const TextContainer = () => { const frame = useCurrentFrame(); const containerTranslateY = interpolate(frame, [25, 50], [1000, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.back(0.8)), }); const renderStaggeredText = (text: string, startFrame: number) => { const opacity = interpolate(frame, [startFrame, startFrame + 10], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const translateY = interpolate(frame, [startFrame, startFrame + 10], [50, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.back(1)), }); return (

{text}

); }; const buttonOpacity = interpolate(frame, [50, 65], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); return (

{renderStaggeredText('STYLE', 35)} {renderStaggeredText('REDEFINED', 40)}

acme.com

); }; export function ReerollVideo() { const imageSrc = 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/gi/WDpUQU0R2M-pv1Fu1xZYxdbrXw61TFZZr9CQGgMkY.jpeg'; return ( ); }

New Style Product Promo Video

More like this

Travel Website Promo Video

iOS Whatsapp Conversation Video

Reeroll AI: Business Video Marketing Promo

Growth Video Template

Acme Whitelabel Video Template

AI Product Promo Video for Reddit Post

Spiral.app Software Dev Promoa

Trixpanel template

Mewlingo Language Learning App Ad Template

Startups Demo with Product Video

Github Video

Reeroll Launch Video