import React from 'react'; import { AbsoluteFill, useCurrentFrame, interpolate, Sequence } from 'remotion'; import { ChatMessage } from './ChatMessage'; import { TypingIndicator } from './TypingIndicator'; import { WhatsappHeader } from './WhatsappHeader'; import { WhatsappFooter } from './WhatsappFooter'; import { VideoMessage } from './VideoMessage'; import { fontFamily, RECEIVER_BUBBLE_COLOR, BACKGROUND_COLOR, } from './constants'; const conversation = [ { isSender: true, text: 'Hey Reeroll, can you create a video for my business?', showAt: 60, type: 'text', }, { isSender: false, text: 'Of course! Can you share a link to your website so I can learn more about it?', showAt: 150, type: 'text', }, { isSender: true, text: "Sure, it's www.github.com", showAt: 240, type: 'text', }, { isSender: false, text: 'Great, thanks! Here is a draft of your video:', showAt: 330, type: 'text', }, { isSender: false, videoUrl: 'https://tgrn1v6iwvgijzza.public.blob.vercel-storage.com/f/414OT7T-0GtsHMAV7V1Em', showAt: 420, type: 'video', }, ]; const AnimatedItem: React.FC<{ showAt: number; children: React.ReactNode; }> = ({ children, showAt }) => { const frame = useCurrentFrame(); const opacity = interpolate(frame, [showAt, showAt + 15], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const translateY = interpolate(frame, [showAt, showAt + 15], [20, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); return (

{children}

); }; export function ReerollVideo() { const frame = useCurrentFrame(); return (

{[...conversation].reverse().map((msg, index) => { const originalIndex = conversation.length - 1 - index; const currentMessage = msg; const typingStart = currentMessage.showAt - 50 >= 0 ? currentMessage.showAt - 50 : 0; const typingEnd = currentMessage.showAt; const showTyping = frame >= typingStart && frame < typingEnd && !currentMessage.isSender; const showMessage = frame >= currentMessage.showAt; if (!showMessage && !showTyping) { return null; } return ( {showMessage && currentMessage.type === 'text' && ( )} {currentMessage.type === 'video' && currentMessage.videoUrl && ( )} {showTyping && (

)} ); })}

); }

iOS Whatsapp Conversation Video

More like this

Team Introduction Video

Meet our Expert Team Video

Animated Team Showcase Video

Finance App UI Animation

Services List Animation

Travel Website Promo Video