import React from 'react'; import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate, spring, Easing, } from 'remotion'; import { loadFont } from '@remotion/google-fonts/PlayfairDisplay'; import { loadFont as loadDancingScript } from '@remotion/google-fonts/DancingScript'; import { loadFont as loadInter } from '@remotion/google-fonts/Inter'; import { PolaroidFrame } from './components/PolaroidFrame'; import { IMAGE_URLS, COLORS, GRID_POSITIONS, POLAROID_GRID_SCALE_FACTOR, POLAROID_FOCUSED_SCALE_FACTOR, TEXT_ANIM_DURATION, GRID_INTRO_DURATION, TOTAL_CYCLE_DURATION_PER_IMAGE, ANIM_TO_CENTER_DURATION, HOLD_CENTER_DURATION, ANIM_BACK_TO_GRID_DURATION, FOCUS_ORDER, SPRING_CONFIG, SPRING_CONFIG_TIGHT, } from './constants'; const { fontFamily: playfairFontFamily } = loadFont('normal', { weights: ['700'], subsets: ['latin'] }); const { fontFamily: dancingScriptFontFamily } = loadDancingScript('normal', { weights: ['400'], subsets: ['latin'] }); const { fontFamily: interFontFamily } = loadInter('normal', { weights: ['700'], subsets: ['latin'] }); export function ReerollVideo() { const frame = useCurrentFrame(); const { fps, width: compositionWidth, height: compositionHeight } = useVideoConfig(); // Text Animations: Fade in and stay const textOverallOpacity = interpolate( frame, [0, TEXT_ANIM_DURATION], [0, 1], { extrapolateRight: 'clamp', easing: Easing.inOut(Easing.ease) } ); const textEntranceYOffset = interpolate(frame, [0, TEXT_ANIM_DURATION], [30, 0], { extrapolateRight: 'clamp', easing: Easing.out(Easing.cubic), }); const getPolaroidStyles = (idx: number): React.CSSProperties => { const gridPos = GRID_POSITIONS[idx]; let currentX = gridPos.x; let currentY = gridPos.y; let currentScaleFactor = POLAROID_GRID_SCALE_FACTOR; let currentRotation = gridPos.rot; let currentOpacity = 0; let zIndex = 1; // Default zIndex for non-focused items // --- Phase 0: Grid Intro (0 to GRID_INTRO_DURATION - 1) --- const introProgress = spring({ frame, fps, config: SPRING_CONFIG, durationInFrames: GRID_INTRO_DURATION, }); if (frame < GRID_INTRO_DURATION) { currentOpacity = interpolate(introProgress, [0, 1], [0, 1], {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'}); const initialScaleFactor = 0.3 * POLAROID_GRID_SCALE_FACTOR; currentScaleFactor = interpolate(introProgress, [0, 1], [initialScaleFactor, POLAROID_GRID_SCALE_FACTOR]); currentX = interpolate(introProgress, [0, 1], [gridPos.x * 0.5, gridPos.x]); currentY = interpolate(introProgress, [0, 1], [gridPos.y * 0.5, gridPos.y]); currentRotation = interpolate(introProgress, [0, 1], [0, gridPos.rot]); } else { // --- Phase 1+: Grid is static, individual images animate --- currentOpacity = 1; // All polaroids are visible after intro const timeIntoFocusSequence = frame - GRID_INTRO_DURATION; const currentFocusOrderIndex = Math.floor(timeIntoFocusSequence / TOTAL_CYCLE_DURATION_PER_IMAGE); if (currentFocusOrderIndex < FOCUS_ORDER.length) { const imageIndexInFocusOrder = FOCUS_ORDER[currentFocusOrderIndex]; if (idx === imageIndexInFocusOrder) { // This polaroid is the one to animate zIndex = 30; // Focused image on top of text const frameWithinCurrentCycle = timeIntoFocusSequence % TOTAL_CYCLE_DURATION_PER_IMAGE; if (frameWithinCurrentCycle < ANIM_TO_CENTER_DURATION) { // Animate TO center const progress = spring({ frame: frameWithinCurrentCycle, fps, config: SPRING_CONFIG_TIGHT, durationInFrames: ANIM_TO_CENTER_DURATION }); currentX = interpolate(progress, [0, 1], [gridPos.x, 0]); currentY = interpolate(progress, [0, 1], [gridPos.y, 0]); currentScaleFactor = interpolate(progress, [0, 1], [POLAROID_GRID_SCALE_FACTOR, POLAROID_FOCUSED_SCALE_FACTOR]); currentRotation = interpolate(progress, [0, 1], [gridPos.rot, 0]); } else if (frameWithinCurrentCycle < ANIM_TO_CENTER_DURATION + HOLD_CENTER_DURATION) { // HOLD in center currentX = 0; currentY = 0; currentScaleFactor = POLAROID_FOCUSED_SCALE_FACTOR; currentRotation = 0; } else if (frameWithinCurrentCycle < TOTAL_CYCLE_DURATION_PER_IMAGE) { // Animate BACK to grid const progress = spring({ frame: frameWithinCurrentCycle - (ANIM_TO_CENTER_DURATION + HOLD_CENTER_DURATION), fps, config: SPRING_CONFIG_TIGHT, durationInFrames: ANIM_BACK_TO_GRID_DURATION, }); currentX = interpolate(progress, [0, 1], [0, gridPos.x]); currentY = interpolate(progress, [0, 1], [0, gridPos.y]); currentScaleFactor = interpolate(progress, [0, 1], [POLAROID_FOCUSED_SCALE_FACTOR, POLAROID_GRID_SCALE_FACTOR]); currentRotation = interpolate(progress, [0, 1], [0, gridPos.rot]); } else { currentX = gridPos.x; currentY = gridPos.y; currentScaleFactor = POLAROID_GRID_SCALE_FACTOR; currentRotation = gridPos.rot; zIndex = 1; } } else { // This polaroid is not focused, stays in its grid position currentX = gridPos.x; currentY = gridPos.y; currentScaleFactor = POLAROID_GRID_SCALE_FACTOR; currentRotation = gridPos.rot; zIndex = 1; } } else { // All focus animations are done, everyone stays in grid position currentX = gridPos.x; currentY = gridPos.y; currentScaleFactor = POLAROID_GRID_SCALE_FACTOR; currentRotation = gridPos.rot; zIndex = 1; } } const actualPolaroidWidth = compositionWidth * currentScaleFactor; return { position: 'absolute', left: '50%', top: '50%', width: actualPolaroidWidth, opacity: Math.max(0, Math.min(1, currentOpacity)), zIndex, transform: `translate(-50%, -50%) translateX(${currentX}px) translateY(${currentY}px) rotate(${currentRotation}deg)`, }; }; return ( {/* Text "Summer Collection" */}

Summer

Collection

{/* Polaroid Frames */} {IMAGE_URLS.map((src, i) => { const styles = getPolaroidStyles(i); return ( ); })} {/* Text "Acme Jewelry" */}

Acme Jewelry

); }

Acme Jewelry Summer Collection