import React, { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Sparkles, Hexagon, X, Layers, RefreshCw, CheckCircle2 } from "lucide-react"; export default function GenerativeTerrainSeedOverlay() { const [isOpen, setIsOpen] = useState(false); const [phase, setPhase] = useState<"idle" | "seeding" | "calculating" | "generated">("idle"); const [seeds, setSeeds] = useState([]); useEffect(() => { if (!isOpen) { setPhase("idle"); setSeeds([]); return; } setPhase("seeding"); const calcTimer = setTimeout(() => setPhase("calculating"), 2000); const genTimer = setTimeout(() => setPhase("generated"), 5500); return () => { clearTimeout(calcTimer); clearTimeout(genTimer); }; }, [isOpen]); useEffect(() => { if (phase === "seeding") { setSeeds(Array.from({ length: 12 }).map(() => Math.random())); } }, [phase]); return (

setIsOpen(true)} className="relative z-10 flex items-center gap-2 px-8 py-4 bg-white dark:bg-[#0A0A0A] text-neutral-900 dark:text-white rounded-2xl font-bold border border-neutral-200 dark:border-neutral-800 shadow-xl" > Generate Terrain {isOpen && (

Generator

{phase === "generated" && ( )}

{seeds.map((s, i) => ( ))} {/* Procedural Mesh Overlay */}

Procedural Seed #0x7A9f2...

{phase === "seeding" && ( Spawning control points... )} {phase === "calculating" && ( Calculating topology... )} {phase === "generated" && ( Terrain generated successfully )}

)}

); }