import React from 'react'; import { AbsoluteFill, useCurrentFrame, interpolate, spring, Easing } from 'remotion'; import { interFontFamily, playfairDisplayFontFamily } from '../main'; export function JewelryScene() { const frame = useCurrentFrame(); const imageScale = interpolate(frame, [0, 150], [1, 1.03], { easing: Easing.inOut(Easing.ease), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const titleOpacity = interpolate(frame, [15, 45], [0, 1], { easing: Easing.inOut(Easing.ease), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const titleScale = spring({ frame: frame - 15, fps: 30, config: { damping: 12, stiffness: 100, mass: 0.5 }, }); const subtitleOpacity = interpolate(frame, [45, 75], [0, 1], { easing: Easing.inOut(Easing.ease), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const subtitleScale = spring({ frame: frame - 45, fps: 30, config: { damping: 12, stiffness: 100, mass: 0.5 }, }); const websiteOpacity = interpolate(frame, [75, 105], [0, 1], { easing: Easing.inOut(Easing.ease), extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); const websiteScale = spring({ frame: frame - 75, fps: 30, config: { damping: 12, stiffness: 100, mass: 0.5 }, }); return ( {/* Background Image with Zoom */} Handcrafted 925 Sterling Silver Jewelry

{/* Decorative Arcs */}

{/* Title and Subtitle Container */}

Acme Jewelry

Handcrafted 925 Sterling Silver

{/* Website URL Container */}

acmejewelry.com

); }

Acme Jewelry Video