import { AbsoluteFill, interpolate, useCurrentFrame, useVideoConfig, Easing, interpolateColors, Img, } from "remotion"; import { Logo } from "./Logo"; import { loadFont } from "@remotion/google-fonts/Geist"; import React from "react"; const { fontFamily } = loadFont("normal", { weights: ["500"], }); const words = [ "Social Media Ads", "Product Demos", "Explainer Videos", "Event Promos", "Tutorials", "Testimonials", "Brand Stories", "Listicles", "Announcements", "Memes & Reels", "Podcast Clips", "Educational", ]; const loopedWords = [...words, ...words, ...words]; export function ReerollVideo() { const frame = useCurrentFrame(); const { height } = useVideoConfig(); const lineHeight = 90; const cycleDuration = words.length * 30; const currentFrameInCycle = frame % cycleDuration; const scrollY = interpolate( currentFrameInCycle, [0, cycleDuration], [0, words.length * lineHeight], { easing: Easing.linear, } ); return (

{loopedWords.map((word, i) => { const itemPos = i * lineHeight; const distFromCenter = Math.abs(scrollY - itemPos); const highlight = interpolate( distFromCenter, [0, lineHeight / 1.5], [1, 0], { extrapolateRight: "clamp", extrapolateLeft: "clamp", } ); const color = interpolateColors( highlight, [0, 1], ["#888888", "#FFFFFF"] ); const opacity = interpolate( distFromCenter, [0, height / 4], [1, 0], { extrapolateRight: "clamp", extrapolateLeft: "clamp", } ); return (

{word}

); })}

); }

Features list

More like this

High-Fashion Coming Soon Promo Video

Black Friday Sale

High-Fashion Coming Soon Promo Video

Black Friday Sale