apex-ui-kit 2.10.0 → 2.11.0

package/dist/ApexUI-Kit/templates/DotGlobe/DotGlobe.jsx

@@ -49,6 +49,8 @@ const DEFAULT_ARCS = [
 
 const rad = (d) => (d * Math.PI) / 180;
 const toVec = (lat, lon) => [Math.cos(rad(lat)) * Math.sin(rad(lon)), Math.sin(rad(lat)), Math.cos(rad(lat)) * Math.cos(rad(lon))];
+// Land dot directions never change, so work them out once instead of every frame.
+const landVecs = landDots.map(([lat, lon]) => toVec(lat, lon));
 
 // Spherical interpolation between two unit vectors.
 const slerp = (a, b, t) => {
@@ -141,9 +143,10 @@ const DotGlobe = ({
             // Land dots: front bright, back faint.
             const dr = Math.max(0.8, R / 190);
             ctx.fillStyle = o.dotColor;
-            for (let i = 0; i < landDots.length; i++) {
-                const [lat, lon] = landDots[i];
-                const [x, y, z] = project(toVec(lat, lon), R, c);
+            for (let i = 0; i < landVecs.length; i++) {
+                const [x, y, z] = project(landVecs[i], R, c);
+                // Dots well behind the globe are nearly invisible; skip them.
+                if (z < -0.25) continue;
                 ctx.globalAlpha = z > 0 ? 0.35 + 0.65 * z : 0.06;
                 ctx.fillRect(x - dr, y - dr, dr * 2, dr * 2);
             }

package/dist/ApexUI-Kit/templates/Folder/Folder.jsx

@@ -1,10 +1,11 @@
-import React, { useState } from "react";
-import { motion } from "framer-motion";
+import React, { useLayoutEffect, useRef, useState } from "react";
+import { motion, useMotionValue, useSpring } from "framer-motion";
 
 /*
  * Folder: a little folder that opens on click — the front flap tilts down
  * and up to three papers fan out of it. While open, each paper leans toward
- * the pointer a little. Click again to tuck everything back in.
+ * the pointer a little. Click again to tuck everything back in. It shrinks
+ * to fit narrow containers so the open fan never gets cut off.
  */
 
 const DEFAULT_ITEMS = [
@@ -32,23 +33,66 @@ const SPOTS = [
     { x: 0, y: -4.2, r: 3 },
     { x: 3.9, y: -3.3, r: 15 },
 ];
+// Width of the open fan in em (papers plus their spread), used to fit the container.
+const FAN_WIDTH = 15.5;
+
+// One paper. Its lean follows the pointer through motion values, so moving the
+// mouse never re-renders the folder.
+function Paper({ children, spot, index, open }) {
+    const lx = useMotionValue(0);
+    const ly = useMotionValue(0);
+    const x = useSpring(lx, { stiffness: 260, damping: 20 });
+    const y = useSpring(ly, { stiffness: 260, damping: 20 });
+    return (
+        <motion.span
+            className="absolute bottom-[10%] left-[10%] h-[80%] w-[80%]"
+            initial={false}
+            animate={open ? { x: `${spot.x}em`, y: `${spot.y}em`, rotate: spot.r, scale: 1 } : { x: "0em", y: `${-0.3 - index * 0.2}em`, rotate: 0, scale: 0.92 - (2 - index) * 0.03 }}
+            transition={{ type: "spring", stiffness: 300, damping: 22, delay: open ? index * 0.04 : 0 }}
+            onPointerMove={(e) => {
+                if (!open) return;
+                const r = e.currentTarget.getBoundingClientRect();
+                lx.set(((e.clientX - (r.left + r.width / 2)) / r.width) * 10);
+                ly.set(((e.clientY - (r.top + r.height / 2)) / r.height) * 10);
+            }}
+            onPointerLeave={() => {
+                lx.set(0);
+                ly.set(0);
+            }}
+        >
+            <motion.span className="block h-full w-full overflow-hidden rounded-[0.4em] bg-white text-left shadow-md" style={{ x, y }}>
+                {children}
+            </motion.span>
+        </motion.span>
+    );
+}
 
 const Folder = ({ color = "#a3e635", size = 1, items = DEFAULT_ITEMS, label = "Projects", className = "" }) => {
     const [open, setOpen] = useState(false);
-    const [lean, setLean] = useState([]);
+    const [fit, setFit] = useState(size);
+    const root = useRef(null);
     const papers = items.slice(0, 3);
     const back = `color-mix(in srgb, ${color} 75%, #000)`;
 
+    // Shrink when the container can't hold the open fan.
+    useLayoutEffect(() => {
+        const el = root.current?.parentElement;
+        if (!el) return undefined;
+        const ro = new ResizeObserver(() => {
+            const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+            setFit(Math.min(size, el.clientWidth / (FAN_WIDTH * rem)));
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [size]);
+
     return (
-        <div className={`flex flex-col items-center gap-4 ${className}`} style={{ fontSize: `${size}rem` }}>
+        <div ref={root} className={`flex flex-col items-center gap-4 pt-[4.5em] ${className}`} style={{ fontSize: `${fit}rem` }}>
             <button
                 type="button"
                 aria-expanded={open}
                 aria-label={`${label} folder`}
-                onClick={() => {
-                    setOpen((o) => !o);
-                    setLean([]);
-                }}
+                onClick={() => setOpen((o) => !o)}
                 className="group relative h-[5.5em] w-[7em] outline-none transition-transform duration-200 hover:-translate-y-1"
                 style={{ perspective: "600px" }}
             >
@@ -56,33 +100,11 @@ const Folder = ({ color = "#a3e635", size = 1, items = DEFAULT_ITEMS, label = "P
                 <span className="absolute inset-0 rounded-[0.6em] rounded-tl-none" style={{ background: back }} />
                 <span className="absolute -top-[0.7em] left-0 h-[0.9em] w-[2.6em] rounded-t-[0.45em]" style={{ background: back }} />
 
-                {papers.map((p, i) => {
-                    const spot = SPOTS[papers.length === 1 ? 1 : papers.length === 2 ? i * 2 : i];
-                    const l = lean[i] ?? { x: 0, y: 0 };
-                    return (
-                        <motion.span
-                            key={i}
-                            className="absolute bottom-[10%] left-[10%] h-[80%] w-[80%] overflow-hidden rounded-[0.4em] bg-white text-left shadow-md"
-                            initial={false}
-                            animate={open ? { x: `${spot.x + l.x}em`, y: `${spot.y + l.y}em`, rotate: spot.r, scale: 1 } : { x: "0em", y: `${-0.3 - i * 0.2}em`, rotate: 0, scale: 0.92 - (2 - i) * 0.03 }}
-                            transition={{ type: "spring", stiffness: 300, damping: 22, delay: open ? i * 0.04 : 0 }}
-                            onPointerMove={(e) => {
-                                if (!open) return;
-                                const r = e.currentTarget.getBoundingClientRect();
-                                const next = [...lean];
-                                next[i] = { x: ((e.clientX - (r.left + r.width / 2)) / r.width) * 0.8, y: ((e.clientY - (r.top + r.height / 2)) / r.height) * 0.8 };
-                                setLean(next);
-                            }}
-                            onPointerLeave={() => {
-                                const next = [...lean];
-                                next[i] = { x: 0, y: 0 };
-                                setLean(next);
-                            }}
-                        >
-                            {p}
-                        </motion.span>
-                    );
-                })}
+                {papers.map((p, i) => (
+                    <Paper key={i} index={i} open={open} spot={SPOTS[papers.length === 1 ? 1 : papers.length === 2 ? i * 2 : i]}>
+                        {p}
+                    </Paper>
+                ))}
 
                 {/* Front flap */}
                 <motion.span

package/dist/ApexUI-Kit/templates/ImageAccordion/ImageAccordion.jsx

@@ -80,14 +80,16 @@ const ImageAccordion = ({ items = DEFAULT_ITEMS, defaultActive = 0, autoPlay = 0
                             alt=""
                             draggable={false}
                             className="absolute inset-0 h-full w-full object-cover"
-                            style={{ transform: on ? "scale(1)" : "scale(1.12)", filter: on ? "none" : "saturate(0.6) brightness(0.75)", transition: `transform ${duration * 1.4}ms ${EASE}, filter ${duration}ms ${EASE}` }}
+                            style={{ transform: on ? "scale(1)" : "scale(1.12)", transition: `transform ${duration * 1.4}ms ${EASE}`, willChange: "transform" }}
                         />
+                        {/* Dim folded panels with an overlay (cheap) instead of a filter on the image (repaints every frame). */}
+                        <span aria-hidden="true" className="absolute inset-0 bg-black" style={{ opacity: on ? 0 : 0.32, transition: `opacity ${duration}ms ${EASE}` }} />
                         <span aria-hidden="true" className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
 
                         {/* Folded: the title runs along the strip. */}
                         <span
                             aria-hidden="true"
-                            className="absolute whitespace-nowrap text-sm font-semibold tracking-wide"
+                            className="absolute whitespace-nowrap text-sm font-semibold tracking-wide [backface-visibility:hidden]"
                             style={{
                                 ...(vertical ? { left: "1rem", top: "50%", transform: "translateY(-50%)" } : { left: "50%", bottom: "1.25rem", transform: "translateX(-50%) rotate(-90deg)", transformOrigin: "center", translate: "0 -2.5rem" }),
                                 opacity: on ? 0 : 0.9,
@@ -97,14 +99,14 @@ const ImageAccordion = ({ items = DEFAULT_ITEMS, defaultActive = 0, autoPlay = 0
                             {item.title}
                         </span>
 
-                        {/* Open: title and text rise in once the panel has room. */}
+                        {/* Open: title and text rise in once the panel has room. A fixed width keeps them from re-wrapping as it grows. */}
                         <span
-                            className="absolute inset-x-0 bottom-0 block p-[clamp(1rem,3cqw,1.75rem)]"
+                            className="absolute bottom-0 left-0 block w-[min(26rem,85vw)] p-[clamp(1rem,3cqw,1.75rem)] [backface-visibility:hidden]"
                             style={{ opacity: on ? 1 : 0, transform: on ? "none" : "translateY(0.75rem)", transition: `opacity ${duration * 0.6}ms ${EASE} ${on ? duration * 0.35 : 0}ms, transform ${duration * 0.8}ms ${EASE} ${on ? duration * 0.3 : 0}ms` }}
                         >
                             <span className="block font-mono text-[0.7rem] tracking-[0.2em] text-white/60">{String(i + 1).padStart(2, "0")}</span>
-                            <span className="mt-1 block text-[clamp(1.2rem,2.4vw,1.9rem)] font-bold leading-tight">{item.title}</span>
-                            {item.description && <span className="mt-1 block max-w-sm text-sm text-white/75">{item.description}</span>}
+                            <span className="mt-1 block truncate text-[1.6rem] font-bold leading-tight">{item.title}</span>
+                            {item.description && <span className="mt-1 block max-w-[20rem] text-sm text-white/75">{item.description}</span>}
                         </span>
                     </button>
                 );

package/dist/ApexUI-Kit/templates/InfiniteCanvas/InfiniteCanvas.jsx

@@ -217,7 +217,7 @@ const InfiniteCanvas = ({ items = DEFAULT_ITEMS, cardWidth = 14, aspectRatio = 0
         >
             {Array.from({ length: pool }, (_, k) => (
                 <div key={k} ref={(e) => (tiles.current[k] = e)} className="group absolute left-0 top-0 will-change-transform" style={{ width: w, height: h }}>
-                    <div className="h-full w-full overflow-hidden rounded-2xl bg-white/5 shadow-[0_18px_40px_-22px_rgba(0,0,0,0.7)] ring-1 ring-white/10">
+                    <div className="h-full w-full overflow-hidden rounded-2xl bg-white/5 ring-1 ring-white/10">
                         <img alt="" draggable={false} loading="lazy" decoding="async" className="h-full w-full object-cover transition-transform duration-500 ease-out group-hover:scale-[1.06]" />
                     </div>
                     {showTitles && <p data-title="" className="pointer-events-none absolute inset-x-3 bottom-3 truncate rounded-full bg-black/45 px-3 py-1 text-xs font-semibold text-white opacity-0 backdrop-blur transition-opacity duration-300 group-hover:opacity-100" />}

package/dist/ApexUI-Kit/templates/IsoStack/IsoStack.jsx

@@ -1,11 +1,12 @@
-import React, { useState } from "react";
+import React, { useLayoutEffect, useRef, useState } from "react";
 import { motion } from "framer-motion";
 import { Cloud, Database, Layout, Server, Shield } from "lucide-react";
 
 /*
  * Iso Stack: layers drawn in isometric 3D, stacked like a sandwich. Hover
  * (or tap) and the stack fans open so each layer's label shows; hover one
- * layer to lift it out. Great for architecture or feature diagrams.
+ * layer to lift it out. Great for architecture or feature diagrams. The stack
+ * scales to fit narrow containers, and labels move below it on phones.
  */
 
 const DEFAULT_LAYERS = [
@@ -19,13 +20,30 @@ const DEFAULT_LAYERS = [
 const IsoStack = ({ layers = DEFAULT_LAYERS, size = 13, gap = 1.6, theme = "dark", className = "" }) => {
     const [open, setOpen] = useState(false);
     const [hover, setHover] = useState(-1);
+    const [fit, setFit] = useState(1);
+    const [narrow, setNarrow] = useState(false);
+    const root = useRef(null);
     const dark = theme !== "light";
     const n = layers.length;
 
+    // The rotated stack is about 1.45x its size wide; scale it down to fit.
+    useLayoutEffect(() => {
+        const el = root.current;
+        const ro = new ResizeObserver(() => {
+            const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+            const w = el.clientWidth;
+            setNarrow(w < 560);
+            setFit(Math.min(1, (w - (w < 560 ? 16 : 200)) / (size * 1.45 * rem)));
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [size]);
+
     return (
         <div
-            className={`relative flex items-center justify-center ${className}`}
-            style={{ height: `${size * 0.6 + n * gap * 1.6 + 6}rem`, width: "100%" }}
+            ref={root}
+            className={`relative flex flex-col items-center justify-center ${className}`}
+            style={{ minHeight: `${(size * 0.6 + n * gap * 1.6 + 6) * fit}rem`, width: "100%" }}
             onPointerEnter={(e) => e.pointerType === "mouse" && setOpen(true)}
             onPointerLeave={() => {
                 setOpen(false);
@@ -34,7 +52,7 @@ const IsoStack = ({ layers = DEFAULT_LAYERS, size = 13, gap = 1.6, theme = "dark
             onClick={() => setOpen((o) => !o)}
         >
             {/* Shifted down so the fully opened stack stays inside the frame. */}
-            <div className="relative" style={{ width: `${size}rem`, height: `${size}rem`, marginTop: `${n * gap * 0.9}rem`, transform: "rotateX(58deg) rotateZ(-45deg)", transformStyle: "preserve-3d" }}>
+            <div className="relative" style={{ width: `${size}rem`, height: `${size}rem`, marginTop: `${n * gap * 0.9 * fit}rem`, marginBottom: `${-size * (1 - fit) * 0.6}rem`, transform: `scale(${fit}) rotateX(58deg) rotateZ(-45deg)`, transformStyle: "preserve-3d" }}>
                 {layers.map((layer, i) => {
                     const Icon = layer.icon;
                     const fromTop = i;
@@ -42,12 +60,12 @@ const IsoStack = ({ layers = DEFAULT_LAYERS, size = 13, gap = 1.6, theme = "dark
                     return (
                         <motion.div
                             key={layer.label}
-                            className="absolute inset-0 rounded-2xl border"
+                            className="absolute inset-0 rounded-2xl border will-change-transform"
                             style={{
                                 zIndex: n - fromTop,
                                 background: dark ? `linear-gradient(135deg, color-mix(in srgb, ${layer.color} 22%, #0a0a0a), #0a0a0a)` : `linear-gradient(135deg, color-mix(in srgb, ${layer.color} 30%, #fff), #fff)`,
                                 borderColor: `color-mix(in srgb, ${layer.color} 60%, transparent)`,
-                                boxShadow: `0 0 0 1px ${layer.color}22, -18px 18px 30px -12px rgba(0,0,0,${dark ? 0.6 : 0.25})`,
+                                boxShadow: `0 0 0 1px ${layer.color}22, -10px 10px 16px -8px rgba(0,0,0,${dark ? 0.55 : 0.2})`,
                             }}
                             animate={{ z: `${lift}rem` }}
                             transition={{ type: "spring", stiffness: 200, damping: 22, delay: open ? (n - fromTop) * 0.03 : 0 }}
@@ -64,12 +82,12 @@ const IsoStack = ({ layers = DEFAULT_LAYERS, size = 13, gap = 1.6, theme = "dark
             </div>
 
             {/* Labels sit outside the 3D plane so they stay readable. */}
-            <div className="pointer-events-none absolute right-2 top-1/2 flex -translate-y-1/2 flex-col gap-2 sm:right-6">
+            <div className={`pointer-events-none flex gap-2 ${narrow ? "mt-4 flex-wrap justify-center px-2" : "absolute right-6 top-1/2 -translate-y-1/2 flex-col"}`}>
                 {layers.map((layer, i) => (
                     <motion.div
                         key={layer.label}
-                        className={`rounded-lg border px-2.5 py-1.5 text-right backdrop-blur ${dark ? "border-white/10 bg-black/50 text-white" : "border-black/10 bg-white/80 text-neutral-900"}`}
-                        animate={{ opacity: open ? 1 : 0, x: open ? 0 : 12, scale: hover === i ? 1.05 : 1 }}
+                        className={`rounded-lg border px-2.5 py-1.5 ${narrow ? "text-center" : "text-right"} ${dark ? "border-white/10 bg-neutral-950/85 text-white" : "border-black/10 bg-white/90 text-neutral-900"}`}
+                        animate={{ opacity: open || narrow ? 1 : 0, x: open || narrow ? 0 : 12, scale: hover === i ? 1.05 : 1 }}
                         transition={{ delay: open ? i * 0.05 : 0 }}
                     >
                         <p className="text-[0.78rem] font-semibold" style={{ color: hover === i ? layer.color : undefined }}>

package/dist/ApexUI-Kit/templates/LuminousParticleOcean/LuminousParticleOcean.jsx

@@ -39,11 +39,12 @@ function FlowingSpheres({ count, sep, color, pushStrength }) {
         const mouseZWorld = -mouse.y * (count * sep / 4);
 
         // Animate each sphere's y-position and update its matrix
-        particles.forEach((particle, i) => {
-            const { x, z } = particle;
+        const timeFactor = Math.sin(elapsedTime * 0.5);
+        const mesh = instancedMeshRef.current;
+        for (let i = 0; i < particles.length; i++) {
+            const { x, z } = particles[i];
 
             // --- 1. Wave Animation ---
-            const timeFactor = Math.sin(elapsedTime * 0.5);
             const wave1 = Math.sin(x * 0.15 + timeFactor * Math.PI);
             const wave2 = Math.sin(z * 1 + timeFactor * Math.PI);
             let y = (wave1 + wave2) * 7;
@@ -63,8 +64,8 @@ function FlowingSpheres({ count, sep, color, pushStrength }) {
             dummy.position.set(x, y, z);
             dummy.updateMatrix();
 
-            instancedMeshRef.current.setMatrixAt(i, dummy.matrix);
-        });
+            mesh.setMatrixAt(i, dummy.matrix);
+        }
 
         instancedMeshRef.current.instanceMatrix.needsUpdate = true;
     });
@@ -75,7 +76,8 @@ function FlowingSpheres({ count, sep, color, pushStrength }) {
                 ref={instancedMeshRef}
                 args={[null, null, count * count]}
             >
-                <sphereGeometry args={[0.2, 19, 19]} />
+                {/* 8x6 segments look the same as 19x19 at this size, with ~7x fewer triangles. */}
+                <sphereGeometry args={[0.2, 8, 6]} />
                 <meshStandardMaterial
                     color={color}
                     emissive={color}

package/dist/ApexUI-Kit/templates/MeteorCard/MeteorCard.jsx

@@ -37,12 +37,12 @@ const Particles = ({ number = 50, color = '#ffffff', speed = 1 }) => {
 };
 
 // Main MeteorCard Component
-// A fixed-size card (image on top, content below) so it looks the same on every screen.
+// Cards share a responsive grid: up to 20rem wide, shrinking to fit narrow screens.
 const MeteorCard = ({ data, particleNumber, particleColor, particleSpeed }) => {
     return (
-        <div className="flex flex-wrap justify-center gap-6">
+        <div className="grid w-full justify-center gap-6" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 16rem), 20rem))" }}>
             {data.map((item, index) => (
-                <div key={index} className="relative w-[20rem] max-w-full bg-slate-800/80 p-0.5 rounded-2xl moving-border-card">
+                <div key={index} className="relative w-full min-w-0 bg-slate-800/80 p-0.5 rounded-2xl moving-border-card">
                     {/* Card ka content container */}
                     <div className="relative bg-slate-900 rounded-[calc(1rem-2px)] p-3 flex flex-col overflow-hidden">
                         {/* Background Effects */}
@@ -59,13 +59,13 @@ const MeteorCard = ({ data, particleNumber, particleColor, particleSpeed }) => {
                         <div className="absolute -top-1/4 -left-1/4 w-3/4 h-1/2 bg-blue-400/60 rounded-full blur-[90px] pointer-events-none z-0"></div>
 
                         {/* Image */}
-                        <div className="relative h-[13.75rem] w-full rounded-xl overflow-hidden z-10 ring-1 ring-white/10">
+                        <div className="relative aspect-[4/3] w-full rounded-xl overflow-hidden z-10 ring-1 ring-white/10">
                             <img src={item.imageUrl} alt={item.title} className="w-full h-full object-cover object-[center_25%]" />
                         </div>
 
                         {/* Content */}
                         <div className="relative z-10 px-2 pt-4 pb-2 text-center">
-                            <h3 className="text-2xl font-bold mb-2 text-white tracking-tight">{item.title}</h3>
+                            <h3 className="text-xl font-bold sm:text-2xl mb-2 text-white tracking-tight">{item.title}</h3>
                             <p className="text-sm leading-relaxed text-gray-400 mb-5">{item.description}</p>
                             <button className="group relative inline-flex w-full items-center justify-center whitespace-nowrap px-6 py-2.5 bg-lime-600 text-white font-semibold rounded-lg overflow-hidden transition-all duration-300 hover:bg-lime-700">
                                 <span>{item.buttonText}</span>

package/dist/ApexUI-Kit/templates/OrbitIcons/OrbitIcons.jsx

@@ -148,7 +148,7 @@ const OrbitIcons = ({ rings = DEFAULT_RINGS, size = 28, tilt = 0.55, speed = 1,
                 return (
                     <div key={idx} ref={(e) => (nodes.current[idx] = e)} className="group absolute left-1/2 top-1/2 will-change-transform">
                         <div
-                            className="grid place-items-center rounded-2xl border border-white/10 bg-neutral-900/90 text-white shadow-[0_10px_30px_-12px_rgba(0,0,0,0.7)] backdrop-blur transition-colors duration-300 group-hover:border-[var(--orbit-accent)]"
+                            className="grid place-items-center rounded-2xl border border-white/10 bg-neutral-900/90 text-white transition-colors duration-300 group-hover:border-[var(--orbit-accent)]"
                             style={{ width: "var(--orbit-item, 2.75rem)", aspectRatio: "1" }}
                             title={it.label}
                         >

package/dist/ApexUI-Kit/templates/ParallaxCard/ParallaxCard.jsx

@@ -25,53 +25,54 @@ const ParallaxCard = ({ cardData = [], tiltEnable, glareEnable, scale, perspecti
 
             if (!cardElement) return;
 
+            // quickTo builds each tween once and just retargets it, instead of
+            // creating six new tweens on every mouse move.
+            const to = (el, prop, duration) => (el ? gsap.quickTo(el, prop, { duration, ease: "power3.out" }) : () => {});
+            const card = { rx: to(cardElement, "rotationX", 0.8), ry: to(cardElement, "rotationY", 0.8), s: to(cardElement, "scale", 0.8) };
+            const layers = [
+                [titleElement, 0.8, 0.6],
+                [imageElement, 1.5, 0.7],
+                [descElement, 1.2, 0.8],
+                [buttonElement, 1.1, 0.9],
+                [linkElement, 1.1, 0.9],
+            ]
+                .filter(([el]) => el)
+                .map(([el, k, d]) => ({ k, x: to(el, "x", d), y: to(el, "y", d) }));
+            let rect = null;
+
+            const handleMouseEnter = () => {
+                rect = cardElement.getBoundingClientRect();
+            };
             const handleMouseMove = (e) => {
                 if (!tiltEnable) return;
-                const { left, top, width, height } = cardElement.getBoundingClientRect();
-                const x = e.clientX - left;
-                const y = e.clientY - top;
-                const rotateX = (y / height - 0.5) * -30;
-                const rotateY = (x / width - 0.5) * 30;
-
-                gsap.to(cardElement, {
-                    duration: 1,
-                    rotationX: rotateX,
-                    rotationY: rotateY,
-                    scale: scale,
-                    ease: "power3.out",
+                const r = rect ?? (rect = cardElement.getBoundingClientRect());
+                const rotateX = ((e.clientY - r.top) / r.height - 0.5) * -30;
+                const rotateY = ((e.clientX - r.left) / r.width - 0.5) * 30;
+                card.rx(rotateX);
+                card.ry(rotateY);
+                card.s(scale);
+                layers.forEach((l) => {
+                    l.x(rotateY * l.k);
+                    l.y(-rotateX * l.k);
                 });
-
-                if (titleElement) gsap.to(titleElement, { duration: 0.7, x: rotateY * 0.8, y: -rotateX * 0.8 });
-                if (imageElement) gsap.to(imageElement, { duration: 0.8, x: rotateY * 1.5, y: -rotateX * 1.5 });
-                if (descElement) gsap.to(descElement, { duration: 0.9, x: rotateY * 1.2, y: -rotateX * 1.2 });
-                if (buttonElement) gsap.to(buttonElement, { duration: 1, x: rotateY * 1.1, y: -rotateX * 1.1 });
-                if (linkElement) gsap.to(linkElement, { duration: 1, x: rotateY * 1.1, y: -rotateX * 1.1 });
             };
 
             const handleMouseLeave = () => {
-                if (tiltEnable) {
-                    gsap.to(cardElement, {
-                        duration: 1.2,
-                        rotationX: 0,
-                        rotationY: 0,
-                        scale: 1,
-                        ease: "elastic.out(1, 0.5)",
-                    });
-                    gsap.to([titleElement, imageElement, descElement, buttonElement, linkElement].filter(Boolean), {
-                        duration: 1.2,
-                        x: 0,
-                        y: 0,
-                        ease: "elastic.out(1, 0.5)",
-                    });
-                }
+                rect = null;
+                if (!tiltEnable) return;
+                gsap.to(cardElement, { duration: 1.2, rotationX: 0, rotationY: 0, scale: 1, ease: "elastic.out(1, 0.5)", overwrite: "auto" });
+                gsap.to([titleElement, imageElement, descElement, buttonElement, linkElement].filter(Boolean), { duration: 1.2, x: 0, y: 0, ease: "elastic.out(1, 0.5)", overwrite: "auto" });
             };
 
+            cardElement.addEventListener("mouseenter", handleMouseEnter);
             cardElement.addEventListener("mousemove", handleMouseMove, { passive: true });
             cardElement.addEventListener("mouseleave", handleMouseLeave);
 
             cleanups.push(() => {
+                cardElement.removeEventListener("mouseenter", handleMouseEnter);
                 cardElement.removeEventListener("mousemove", handleMouseMove);
                 cardElement.removeEventListener("mouseleave", handleMouseLeave);
+                gsap.killTweensOf([cardElement, titleElement, imageElement, descElement, buttonElement, linkElement].filter(Boolean));
             });
         });
         return () => cleanups.forEach((fn) => fn());