import React from 'react'; import { AbsoluteFill, interpolate, useCurrentFrame, Img, Easing, } from 'remotion'; import { Constants } from '../main'; import { Diamond } from './Diamond'; // Timings for staggered animations const NEW_ARRIVAL_ANIM_START = 0; const NEW_ARRIVAL_ANIM_DURATION = 20; const CONTENT_BOX_ANIM_START = 10; // Starts while "New Arrival" is animating const CONTENT_BOX_ANIM_DURATION = 25; const ELEGANT_JEWELRY_TITLE_ANIM_START = CONTENT_BOX_ANIM_START + 5; // e.g., 15 const ELEGANT_JEWELRY_TITLE_ANIM_DURATION = 20; const SUBTITLE_ANIM_START = ELEGANT_JEWELRY_TITLE_ANIM_START + 10; // e.g., 25 const SUBTITLE_ANIM_DURATION = 20; const IMAGE_1_BUTTON_ANIM_START = SUBTITLE_ANIM_START + 10; // e.g., 35 const IMAGE_1_BUTTON_ANIM_DURATION = 20; const IMAGE_2_ANIM_START = IMAGE_1_BUTTON_ANIM_START + 5; // e.g., 40 const IMAGE_2_ANIM_DURATION = 20; const IMAGE_3_ANIM_START = IMAGE_2_ANIM_START + 5; // e.g., 45 const IMAGE_3_ANIM_DURATION = 20; const IMAGE_4_ANIM_START = IMAGE_3_ANIM_START + 5; // e.g., 50 const IMAGE_4_ANIM_DURATION = 20; const BORDER_THICKNESS_VALUE = 2; // in px const GALLERY_ROW_HEIGHT = '380px'; const NEW_BUTTON_HEIGHT = 80; const IMAGE_PLUS_BUTTON_GAP = 20; interface AnimatedSceneProps { imageSrc1: string; imageSrc2: string; imageSrc3: string; imageSrc4: string; } export const AnimatedScene: React.FC = ({ imageSrc1, imageSrc2, imageSrc3, imageSrc4, }) => { const frame = useCurrentFrame(); // "New Arrival" Text Animation const newArrivalOpacity = interpolate( frame, [NEW_ARRIVAL_ANIM_START, NEW_ARRIVAL_ANIM_START + NEW_ARRIVAL_ANIM_DURATION], [0, 1], { extrapolateRight: 'clamp', easing: Easing.out(Easing.ease) } ); const newArrivalY = interpolate( frame, [NEW_ARRIVAL_ANIM_START, NEW_ARRIVAL_ANIM_START + NEW_ARRIVAL_ANIM_DURATION], [20, 0], { extrapolateRight: 'clamp', easing: Easing.out(Easing.ease) } ); // Main Content Box Animation const contentBoxOpacity = interpolate( frame, [CONTENT_BOX_ANIM_START, CONTENT_BOX_ANIM_START + CONTENT_BOX_ANIM_DURATION], [0, 1], { extrapolateRight: 'clamp', easing: Easing.out(Easing.ease) } ); // "Acme Jewelry" Title Animation const elegantJewelryOpacity = interpolate( frame, [ELEGANT_JEWELRY_TITLE_ANIM_START, ELEGANT_JEWELRY_TITLE_ANIM_START + ELEGANT_JEWELRY_TITLE_ANIM_DURATION], [0, 1], { extrapolateRight: 'clamp', easing: Easing.out(Easing.ease) } ); const elegantJewelryY = interpolate( frame, [ELEGANT_JEWELRY_TITLE_ANIM_START, ELEGANT_JEWELRY_TITLE_ANIM_START + ELEGANT_JEWELRY_TITLE_ANIM_DURATION], [20, 0], // Slide up { extrapolateRight: 'clamp', easing: Easing.out(Easing.ease) } ); // Subtitle Text Animation const subtitleOpacity = interpolate( frame, [SUBTITLE_ANIM_START, SUBTITLE_ANIM_START + SUBTITLE_ANIM_DURATION], [0, 1], { extrapolateRight: 'clamp', easing: Easing.out(Easing.ease) } ); const subtitleY = interpolate( frame, [SUBTITLE_ANIM_START, SUBTITLE_ANIM_START + SUBTITLE_ANIM_DURATION], [15, 0], // Slide up { extrapolateRight: 'clamp', easing: Easing.out(Easing.ease) } ); // Image 1 & Button Animation const image1Opacity = interpolate( frame, [IMAGE_1_BUTTON_ANIM_START, IMAGE_1_BUTTON_ANIM_START + IMAGE_1_BUTTON_ANIM_DURATION], [0, 1], { extrapolateRight: 'clamp', easing: Easing.out(Easing.ease) } ); const image1X = interpolate( frame, [IMAGE_1_BUTTON_ANIM_START, IMAGE_1_BUTTON_ANIM_START + IMAGE_1_BUTTON_ANIM_DURATION], [-30, 0], // Slide in from left { extrapolateRight: 'clamp', easing: Easing.out(Easing.ease) } ); // Image 2 Animation const image2Opacity = interpolate( frame, [IMAGE_2_ANIM_START, IMAGE_2_ANIM_START + IMAGE_2_ANIM_DURATION], [0, 1], { extrapolateRight: 'clamp', easing: Easing.out(Easing.ease) } ); const image2X = interpolate( frame, [IMAGE_2_ANIM_START, IMAGE_2_ANIM_START + IMAGE_2_ANIM_DURATION], [30, 0], // Slide in from right { extrapolateRight: 'clamp', easing: Easing.out(Easing.ease) } ); // Image 3 Animation const image3Opacity = interpolate( frame, [IMAGE_3_ANIM_START, IMAGE_3_ANIM_START + IMAGE_3_ANIM_DURATION], [0, 1], { extrapolateRight: 'clamp', easing: Easing.out(Easing.ease) } ); const image3X = interpolate( frame, [IMAGE_3_ANIM_START, IMAGE_3_ANIM_START + IMAGE_3_ANIM_DURATION], [-30, 0], // Slide in from left { extrapolateRight: 'clamp', easing: Easing.out(Easing.ease) } ); // Image 4 Animation const image4Opacity = interpolate( frame, [IMAGE_4_ANIM_START, IMAGE_4_ANIM_START + IMAGE_4_ANIM_DURATION], [0, 1], { extrapolateRight: 'clamp', easing: Easing.out(Easing.ease) } ); const image4X = interpolate( frame, [IMAGE_4_ANIM_START, IMAGE_4_ANIM_START + IMAGE_4_ANIM_DURATION], [30, 0], // Slide in from right { extrapolateRight: 'clamp', easing: Easing.out(Easing.ease) } ); const firstImageContainerHeight = `calc(${GALLERY_ROW_HEIGHT} - ${NEW_BUTTON_HEIGHT}px - ${IMAGE_PLUS_BUTTON_GAP}px)`; return ( {/* Headline Text */}

Handcraft 925 Sterling Silver Jewelry

{/* Main Content Box */}

{/* Diamonds */} {/* Acme Jewelry Text */}

ACME
JEWELRY

{/* Subtitle Text */}

Crafting timeless pieces for your
unforgettable moments.

{/* Image Gallery Section */}

{/* Row 1 */}

{/* Row 2 */}

); };

ACMEJEWELRY

ACME
JEWELRY

Jewelry promo video clone