import React, { useState, useEffect, useMemo, useRef } from 'react'; import { motion, useAnimation, useSpring, useTransform, useMotionValue } from 'framer-motion'; // ----------------------------------------------------------------------------- // Constants & Utils // ----------------------------------------------------------------------------- const WIDTH = 1200; const HEIGHT = 700; const CARD_W = 320; const CARD_H = 480; // 3:4 ratio approx (scaled for visual balance) // Generate random particles for the stardust effect const generateParticles = (count) => { return Array.from({ length: count }).map((_, i) => ({ id: i, x: Math.random() * WIDTH, y: Math.random() * HEIGHT, size: Math.random() * 3 + 1, duration: Math.random() * 2 + 1, delay: Math.random() * 2, })); }; // ----------------------------------------------------------------------------- // Sub-components (SVG Shapes) // ----------------------------------------------------------------------------- // The Ancient Map Texture Background const MapBackground = () => ( ); // Card Back: Dragon Skin & Emblem const CardBack = () => (

{/* Texture Layer */} {/* Emblem */}

); // Card Front: Character & Stats const CardFront = () => (

{/* Background: Stormy Sea */}

{/* Character Illustration (Vector) */}

{/* UI Overlay */}

{/* Top Text */}

{/* Bottom Stars */}

{[...Array(5)].map((_, i) => ( ))}

{/* Frame Sheen Effect */}

); // ----------------------------------------------------------------------------- // Main Component // ----------------------------------------------------------------------------- export const PirateSummon = () => { const [phase, setPhase] = useState('init'); // init -> rush -> flip -> reveal const particles = useMemo(() => generateParticles(40), []); const cardControls = useAnimation(); const flashControls = useAnimation(); // Animation Sequence Orchestrator useEffect(() => { const sequence = async () => { // 1. Init (Wait a bit) setPhase('init'); await cardControls.start({ scale: 0.1, rotateY: 0, y: 0, transition: { duration: 0 } }); // Wait for user to "absorb" the atmosphere await new Promise(r => setTimeout(r, 800)); // 2. Rush (Zoom in fast) setPhase('rush'); // Adding a slight shake/wobble during rush cardControls.start({ rotate: [0, -2, 2, 0], transition: { duration: 0.5, ease: "linear" } }); await cardControls.start({ scale: 1.1, transition: { duration: 1.2, ease: [0.34, 1.56, 0.64, 1] } // Elastic overshoot }); // 3. Flip & Flash setPhase('flip'); // Start the flash exactly halfway through rotation flashControls.start({ opacity: [0, 1, 0], scale: [0.5, 3, 3], transition: { duration: 0.6, times: [0, 0.5, 1], ease: "easeOut", delay: 0.2 } }); await cardControls.start({ rotateY: 180, scale: 1.0, transition: { duration: 0.8, ease: "easeInOut" } }); setPhase('reveal'); }; sequence(); }, [cardControls, flashControls]); return (

{/* 1. Background Layer */} {/* 2. Particles (Stardust) */} {/* 3. Card Container (3D Space) */}

{/* Card Back Face */}

{/* Card Front Face */}

{/* 4. The Lens Flare / Flash Overlay */} {/* Horizontal Flare */}

{/* Vertical Flare */}

{/* Central Core */}

{/* 5. Vignette Overlay for cinematic feel */}

); }; export default PirateSummon;