import React from 'react'; import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from 'remotion'; import { interFontFamily, playfairDisplayFontFamily, COLORS } from './Constants'; interface TitleSceneProps { backgroundImage: string; } export const TitleScene: React.FC = ({ backgroundImage }) => { const frame = useCurrentFrame(); const duration = 60; // frames for this scene // Background image animation (subtle zoom) const backgroundScale = interpolate(frame, [0, duration], [1, 1.05], { easing: Easing.inOut(Easing.ease), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); // Text fade in and slight move up for "Acme Jewelry" const companyNameOpacity = interpolate(frame, [10, 20], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const companyNameTranslateY = interpolate(frame, [10, 20], [20, 0], { easing: Easing.out(Easing.back()), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); // Text fade in and slight move up for "Hand Crafted 925 Sterling Silver Jewelry" const headlineOpacity = interpolate(frame, [20, 35], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const headlineTranslateY = interpolate(frame, [20, 35], [20, 0], { easing: Easing.out(Easing.back()), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); // Text fade in and slight move up for bottom elements const bottomTextOpacity = interpolate(frame, [40, 50], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const bottomTextTranslateY = interpolate(frame, [40, 50], [20, 0], { easing: Easing.out(Easing.back()), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); return ( {/* Background Image */} Jewellery background

{/* Content Overlay */} {/* Acme Jewelry */}

Acme Jewelry

{/* Hand Crafted 925 Sterling Silver Jewelry */}

Hand crafted
925 Sterling
Silver Jewelry

{/* Arrow Down */}

{/* NOW AVAILABLE ONLINE */}

NOW AVAILABLE ONLINE

{/* acmejewelry.com */}

acmejewelry.com

); };

Acme Jewelry Ad