import { AbsoluteFill, Easing, Img, interpolate, random, useCurrentFrame, } from 'remotion'; import {loadFont} from '@remotion/google-fonts/Inter'; const {fontFamily} = loadFont(); type CardProps = { image: string; text: string; index: number; activeIndex: number; durationPerCard: number; }; export function Card({ image, text, index, activeIndex, durationPerCard, }: CardProps) { const frame = useCurrentFrame(); if (index < activeIndex) { return null; } const localFrame = frame - activeIndex * durationPerCard; const stackPosition = index - activeIndex; if (stackPosition > 3) { return null; } const progress = interpolate(localFrame, [0, durationPerCard], [0, 1], { easing: Easing.out(Easing.back(1.2)), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); // Card is exiting if (stackPosition === 0) { const randomX = random('x-' + index) * 60 - 30; const randomY = random('y-' + index) * 60 - 30; const randomRotate = random('rotate-' + index) * 40 - 20; const exitY = interpolate(progress, [0, 1], [0, -150 + randomY]); const exitX = interpolate(progress, [0, 1], [0, randomX]); const exitRotate = interpolate(progress, [0, 1], [0, 20 + randomRotate]); const exitOpacity = interpolate(progress, [0.4, 1], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const exitScale = interpolate(progress, [0, 1], [1, 1.1]); const exitBlur = interpolate(progress, [0.3, 1], [0, 15], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); return (

); } // Cards in the stack const fromY = stackPosition * 20; const toY = (stackPosition - 1) * 20; const y = interpolate(progress, [0, 1], [fromY, toY]); const fromScale = 0.9 ** stackPosition; const toScale = 0.9 ** (stackPosition - 1); const scale = interpolate(progress, [0, 1], [fromScale, toScale]); const fromRotate = -stackPosition * 5; const toRotate = -(stackPosition - 1) * 5; const rotate = interpolate(progress, [0, 1], [fromRotate, toRotate]); const fromBlur = stackPosition * 2; const toBlur = (stackPosition - 1) * 2; const blur = interpolate(progress, [0, 1], [fromBlur, toBlur]); return (

); } function CardContent({image, text}: {image: string; text: string}) { return (

{text}

Explore

); }

Travel Website 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

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