"use client"; import React, { useState, useEffect } from "react"; import { motion, AnimatePresence, useMotionValue, useSpring } from "framer-motion"; const DATA = [ { id: "01", quote: "The V3 architecture is not just a tool; it's a new standard for how we perceive frontend performance and aesthetic integrity.", author: "Isabella Vonne", role: "Creative Director", company: "Lumina Studio", image: "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?auto=format&fit=crop&q=80&w=1200&h=1600", }, { id: "02", quote: "Precision meets fluidity. These components have allowed our team to ship production-ready interfaces in record time without compromise.", author: "Julian Vance", role: "Lead UI Architect", company: "Nexus OS", image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=1200&h=1600", }, { id: "03", quote: "An absolute masterclass in React engineering. The container-first approach is exactly what our design system was missing.", author: "Marcus Thorne", role: "Senior UX Engineer", company: "Stellar Dev", image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&q=80&w=1200&h=1600", } ]; export default function EtherealFluidPrism() { const [index, setIndex] = useState(0); const [isMounted, setIsMounted] = useState(false); // Parallax Effect const mouseX = useMotionValue(0); const mouseY = useMotionValue(0); const springX = useSpring(mouseX, { stiffness: 50, damping: 20 }); const springY = useSpring(mouseY, { stiffness: 50, damping: 20 }); useEffect(() => setIsMounted(true), []); const handleMouseMove = (e: React.MouseEvent) => { const { clientX, clientY } = e; const { innerWidth, innerHeight } = window; mouseX.set((clientX / innerWidth - 0.5) * 40); mouseY.set((clientY / innerHeight - 0.5) * 40); }; if (!isMounted) return null; return (

{/* BACKGROUND REFRACTION GRADIENT */}

{/* VIEWPORT CANVAS */}

{/* Parallax Image */} {/* Content Overlay */}

Verified Voice / {DATA[index].id}

"{DATA[index].quote}" {DATA[index].author} {DATA[index].role} / {DATA[index].company}

{/* NOISE OVERLAY */}

{/* MINIMALIST NAV ANCHORS */}

{DATA.map((item, i) => ( ))}

{/* HUD FOOTER */}

Lumina_v3_Engine

Prism_Refraction_Model

); }