"use client"; import React, { useRef } from "react"; import { motion, useMotionValue, useSpring, useTransform, HTMLMotionProps, Variants } from "framer-motion"; import { Orbit, Box } from "lucide-react"; export interface ZeroGravityFloatCardProps extends Omit, "ref"> { /** Internal content */ children?: React.ReactNode; /** Toggles the continuous ambient floating animation */ isFloating?: boolean; /** React 19 native ref support */ ref?: React.Ref; } /** * Zero-Gravity Float Card (v3.0 Infinity) * A premium diorama-style card featuring continuous levitation physics, * extreme Z-axis depth, and independent element parallax. * 100% Bimodal adaptive and strictly fluid (h-fit). */ export const ZeroGravityFloatCard = ({ children, isFloating = true, className, ref: externalRef, ...props }: ZeroGravityFloatCardProps) => { const internalRef = useRef(null); const activeRef = (externalRef as React.RefObject) || internalRef; // --- PHYSICS & KINEMATICS --- // Track normalized mouse coordinates (-0.5 to 0.5) const mouseX = useMotionValue(0); const mouseY = useMotionValue(0); // High mass, low stiffness springs for a "weightless / space" feel const springConfig = { damping: 40, stiffness: 100, mass: 2 }; const smoothX = useSpring(mouseX, springConfig); const smoothY = useSpring(mouseY, springConfig); // Map mouse movement to 3D rotation const rotateX = useTransform(smoothY, [-0.5, 0.5], [20, -20]); const rotateY = useTransform(smoothX, [-0.5, 0.5], [-20, 20]); // Glare effect movement const glareX = useTransform(smoothX, [-0.5, 0.5], ["-100%", "200%"]); const glareY = useTransform(smoothY, [-0.5, 0.5], ["-100%", "200%"]); const handleMouseMove = (e: React.MouseEvent) => { if (!activeRef.current) return; const rect = activeRef.current.getBoundingClientRect(); const x = (e.clientX - rect.left) / rect.width - 0.5; const y = (e.clientY - rect.top) / rect.height - 0.5; mouseX.set(x); mouseY.set(y); }; const handleMouseLeave = () => { mouseX.set(0); mouseY.set(0); }; // --- AMBIENT FLOATING ANIMATION --- const floatAnimation: Variants = { initial: { y: 0 }, floating: { y: [-6, 6, -6], transition: { duration: 8, repeat: Infinity, ease: "easeInOut" } } }; return (

{/* Outer wrapper handles the continuous ambient floating (Z-axis unaffected) */} {/* Inner container handles the 3D mouse tracking perspective */} {/* BACKGROUND LAYER (Pushed deep into the Z-axis) */}

{/* DYNAMIC GLARE LAYER (Moves across the surface) */} {/* CONTENT LAYER (Standard Z-index, children can use transformZ locally) */}

{children}

); }; // ============================================================= // DEMO IMPLEMENTATION FOR VAULT REGISTRY // ============================================================= export default function ZeroGravityFloatCardDemo() { return (

{/* 1. Singular Masterpiece Variant (Clean Space Diorama) */} {/* Floating Badge (Pushed extremely forward: +60px) */} Orbit 01 {/* Floating Core Object (Mid-depth: +30px) */}

{/* Decorative ring slightly behind core */}

{/* Floating Text (Slight depth: +20px) */}

Lunar Module

Atmospheric control nominal. Stabilizing micro-gravity containment fields.

); }