apex-ui-kit 2.10.0 → 2.11.0

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

@@ -1,45 +1,167 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 
 /*
- * Aurora Background: soft northern-light bands that drift and shimmer, built
- * from blurred CSS gradients only (no canvas, no WebGL). Works on light and
- * dark pages; reduced-motion visitors get the same picture without movement.
+ * Aurora Background: northern lights over a night sky, drawn in one small
+ * WebGL shader. Curtains of light hang from the top, ripple sideways and
+ * flicker in fine vertical rays; the colours run from the first (lower edge)
+ * to the last (upper fringe). Faint stars sit behind them. Reduced-motion
+ * visitors get a still frame. No library needed.
  */
 
-const AuroraBackground = ({
-    children,
-    colors = ["#22d3ee", "#a3e635", "#a78bfa", "#38bdf8"],
-    theme = "dark",
-    speed = 1,
-    intensity = 1,
-    className = "",
-    containerClassName = "",
-}) => {
+const VERT = `attribute vec2 p; void main(){ gl_Position = vec4(p, 0.0, 1.0); }`;
+
+const FRAG = `
+precision highp float;
+uniform vec2 uRes; uniform float uTime; uniform float uIntensity; uniform float uLight;
+uniform vec3 uC0; uniform vec3 uC1; uniform vec3 uC2; uniform vec3 uC3; uniform vec3 uSky;
+
+float h(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
+float n(vec2 p){
+  vec2 i = floor(p); vec2 f = fract(p); f = f * f * (3.0 - 2.0 * f);
+  return mix(mix(h(i), h(i + vec2(1, 0)), f.x), mix(h(i + vec2(0, 1)), h(i + vec2(1, 1)), f.x), f.y);
+}
+float fbm(vec2 p){ float v = 0.0; float a = 0.5; for (int i = 0; i < 4; i++) { v += a * n(p); p *= 2.1; a *= 0.5; } return v; }
+
+vec3 ramp(float t){
+  t = clamp(t, 0.0, 1.0) * 3.0;
+  return t < 1.0 ? mix(uC0, uC1, t) : t < 2.0 ? mix(uC1, uC2, t - 1.0) : mix(uC2, uC3, t - 2.0);
+}
+
+// One curtain: a wavy band whose lower edge is bright and which fades upward.
+vec3 curtain(vec2 uv, float t, float seed, float base, float amp){
+  float x = uv.x * 1.6 + seed;
+  float wave = (fbm(vec2(x * 0.9, t * 0.12 + seed)) - 0.5) * amp + sin(x * 1.7 + t * 0.35 + seed) * amp * 0.35;
+  float edge = base + wave;                      // lower edge of the curtain
+  float d = uv.y - edge;                         // height above the edge
+  if (d < -0.05) return vec3(0.0);
+  float rays = 0.55 + 0.45 * n(vec2(x * 38.0, t * 0.6 + seed));   // fine vertical rays
+  float body = exp(-max(d, 0.0) * 3.2) * smoothstep(-0.05, 0.015, d);
+  float glow = exp(-abs(d) * 26.0) * 0.9;        // bright lower rim
+  float shimmer = 0.75 + 0.25 * sin(t * 1.3 + x * 6.0 + seed * 3.0);
+  return ramp(clamp(d * 1.9, 0.0, 1.0)) * (body * rays + glow) * shimmer;
+}
+
+void main(){
+  vec2 uv = gl_FragCoord.xy / uRes;
+  uv.x *= uRes.x / uRes.y;
+  float t = uTime;
+  vec3 col = uSky * (0.55 + 0.45 * (1.0 - gl_FragCoord.y / uRes.y));
+  // Stars (dark sky only).
+  vec2 cell = floor(gl_FragCoord.xy / 2.0);
+  col += step(0.9975, h(cell)) * (0.5 + 0.5 * sin(t * 2.0 + h(cell) * 40.0)) * (1.0 - uLight) * 0.8;
+  vec3 a = curtain(uv, t, 0.0, 0.42, 0.22) + curtain(uv, t * 0.8, 4.7, 0.52, 0.18) * 0.75 + curtain(uv, t * 1.15, 9.3, 0.33, 0.26) * 0.55;
+  a *= uIntensity;
+  col = uLight > 0.5 ? mix(col, col * (1.0 - min(a, 0.85)) + a * 0.55, 1.0) : col + a;
+  col += (h(gl_FragCoord.xy + t) - 0.5) / 255.0;
+  gl_FragColor = vec4(col, 1.0);
+}`;
+
+const toRgb = (hex) => {
+    const m = /^#?([\da-f]{2})([\da-f]{2})([\da-f]{2})$/i.exec(String(hex).trim());
+    return m ? [parseInt(m[1], 16) / 255, parseInt(m[2], 16) / 255, parseInt(m[3], 16) / 255] : [0.4, 0.9, 0.6];
+};
+
+const AuroraBackground = ({ children, colors = ["#22c55e", "#2dd4bf", "#38bdf8", "#c084fc"], theme = "dark", speed = 1, intensity = 1, className = "", containerClassName = "" }) => {
+    const box = useRef(null);
+    const live = useRef({});
+    live.current = { colors, theme, speed, intensity };
     const dark = theme !== "light";
-    const stops = colors.map((c, i) => `${c} ${Math.round((i / colors.length) * 100)}%`).join(", ");
-    const duration = `${60 / Math.max(0.1, speed)}s`;
+
+    useEffect(() => {
+        const el = box.current;
+        const cv = document.createElement("canvas");
+        Object.assign(cv.style, { position: "absolute", inset: "0", width: "100%", height: "100%", display: "block" });
+        el.prepend(cv);
+        const gl = cv.getContext("webgl", { antialias: false, alpha: false, premultipliedAlpha: false });
+        if (!gl) {
+            cv.remove();
+            return undefined;
+        }
+        const shader = (type, src) => {
+            const s = gl.createShader(type);
+            gl.shaderSource(s, src);
+            gl.compileShader(s);
+            return s;
+        };
+        const prog = gl.createProgram();
+        gl.attachShader(prog, shader(gl.VERTEX_SHADER, VERT));
+        gl.attachShader(prog, shader(gl.FRAGMENT_SHADER, FRAG));
+        gl.linkProgram(prog);
+        gl.useProgram(prog);
+        const buf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+        const loc = gl.getAttribLocation(prog, "p");
+        gl.enableVertexAttribArray(loc);
+        gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
+        const U = (name) => gl.getUniformLocation(prog, name);
+        const u = { res: U("uRes"), time: U("uTime"), int: U("uIntensity"), light: U("uLight"), sky: U("uSky"), c: [U("uC0"), U("uC1"), U("uC2"), U("uC3")] };
+
+        const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+        let raf = 0;
+        let last = 0;
+        let time = 8;
+        let visible = true;
+        const scale = 0.75; // render a little under full size: the light is soft anyway
+
+        const fit = () => {
+            const r = el.getBoundingClientRect();
+            const dpr = Math.min(window.devicePixelRatio || 1, 1.5) * scale;
+            cv.width = Math.max(1, Math.round(r.width * dpr));
+            cv.height = Math.max(1, Math.round(r.height * dpr));
+            gl.viewport(0, 0, cv.width, cv.height);
+        };
+        const draw = (now) => {
+            const o = live.current;
+            const dt = last ? Math.min(0.05, (now - last) / 1000) : 0;
+            last = now;
+            time += dt * o.speed;
+            const cs = [0, 1, 2, 3].map((i) => toRgb(o.colors[Math.min(i, o.colors.length - 1)] ?? "#22c55e"));
+            const light = o.theme === "light";
+            gl.uniform2f(u.res, cv.width, cv.height);
+            gl.uniform1f(u.time, time);
+            gl.uniform1f(u.int, o.intensity);
+            gl.uniform1f(u.light, light ? 1 : 0);
+            gl.uniform3fv(u.sky, light ? [0.95, 0.97, 0.99] : [0.02, 0.03, 0.07]);
+            cs.forEach((c, i) => gl.uniform3fv(u.c[i], c));
+            gl.drawArrays(gl.TRIANGLES, 0, 3);
+        };
+        const loop = (now) => {
+            raf = 0;
+            draw(now);
+            if (visible && !reduced) raf = requestAnimationFrame(loop);
+        };
+        const start = () => {
+            if (!raf && visible) {
+                last = 0;
+                raf = requestAnimationFrame(loop);
+            }
+        };
+        const ro = new ResizeObserver(() => {
+            fit();
+            start();
+        });
+        ro.observe(el);
+        const io = new IntersectionObserver(([entry]) => {
+            visible = entry.isIntersecting;
+            if (visible) start();
+        });
+        io.observe(el);
+        fit();
+        start();
+        return () => {
+            cancelAnimationFrame(raf);
+            ro.disconnect();
+            io.disconnect();
+            gl.deleteBuffer(buf);
+            gl.deleteProgram(prog);
+            gl.getExtension("WEBGL_lose_context")?.loseContext();
+            cv.remove();
+        };
+    }, []);
 
     return (
-        <div className={`relative h-screen w-full overflow-hidden ${dark ? "bg-[#05060a]" : "bg-[#f8fafc]"} ${containerClassName}`}>
-            <style>{`
-                @keyframes apex-aurora { from { background-position: 50% 50%, 50% 50%; } to { background-position: 350% 50%, 350% 50%; } }
-                @media (prefers-reduced-motion: reduce) { .apex-aurora, .apex-aurora::after { animation: none !important; } }
-            `}</style>
-            <div
-                aria-hidden="true"
-                className="apex-aurora pointer-events-none absolute -inset-[10px] will-change-transform after:absolute after:inset-0 after:content-['']"
-                style={{
-                    opacity: Math.min(1, (dark ? 0.9 : 0.75) * intensity),
-                    filter: `blur(${dark ? 12 : 10}px) ${dark ? "" : "invert(0)"}`,
-                    backgroundImage: `repeating-linear-gradient(100deg, ${dark ? "#000" : "#fff"} 0%, ${dark ? "#000" : "#fff"} 7%, transparent 10%, transparent 12%, ${dark ? "#000" : "#fff"} 16%), repeating-linear-gradient(100deg, ${stops}, ${colors[0]} 100%)`,
-                    backgroundSize: "300%, 200%",
-                    backgroundPosition: "50% 50%, 50% 50%",
-                    maskImage: "radial-gradient(ellipse 120% 95% at 70% 0%, black 25%, transparent 78%)",
-                    WebkitMaskImage: "radial-gradient(ellipse 120% 95% at 70% 0%, black 25%, transparent 78%)",
-                    animation: `apex-aurora ${duration} linear infinite`,
-                    mixBlendMode: dark ? "normal" : "multiply",
-                }}
-            />
+        <div ref={box} className={`relative h-screen w-full overflow-hidden ${dark ? "bg-[#05070f]" : "bg-[#f1f5f9]"} ${containerClassName}`}>
             {children && <div className={`relative z-10 h-full w-full ${className}`}>{children}</div>}
         </div>
     );

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

@@ -1,145 +1,134 @@
-import React, { useRef, useEffect, useState } from "react";
-import { gsap } from "gsap";
-
-function BluePrintBackground({ color = '#9ae600', borderColor = 'rgb(98, 116, 142, 0.1)', bgColor, circleColor = 'rgb(154, 230, 0, 0.2)'}) {
-    const gridRef = useRef(null);
-    const [grid, setGrid] = useState({ cols: 0, rows: 0 });
-    const boxSize = 40;
-    const lastHighlighted = useRef(null);
-    const colorRef = useRef(color);
-
-    // Effect 1: calculate grid size and keep it updated on resize
-    useEffect(() => {
-        const calculateGrid = () => {
-            const cols = Math.ceil(window.innerWidth / boxSize);
-            const rows = Math.ceil(window.innerHeight / boxSize) * 2; // double rows for infinite scroll
-            // kill any child tweens before we replace children to avoid visual flicker
-            const el = gridRef.current;
-            if (el) {
-                try { gsap.killTweensOf(el); } catch { /* ignore */ }
-                Array.from(el.children).forEach((c) => { try { gsap.killTweensOf(c); } catch { /* ignore */ } });
-                lastHighlighted.current = null;
-            }
-            setGrid({ cols, rows });
-        };
-
-        calculateGrid();
-        window.addEventListener("resize", calculateGrid);
-        return () => window.removeEventListener("resize", calculateGrid);
-    }, []);
-
-    // keep colorRef up-to-date without forcing effect re-run
-    useEffect(() => { colorRef.current = color; }, [color]);
-
-    // Effect 2: initialize GSAP infinite scroll and mouse handlers once (do not recreate on grid changes)
-    useEffect(() => {
-        const el = gridRef.current;
-        let scrollTween = null;
-
-        if (el) {
-            // make sure we start from current transform so GSAP doesn't jump
-            // create a looping tween on the container only once
-            scrollTween = gsap.to(el, {
-                y: "-50%",
-                duration: 15,
-                repeat: -1,
-                ease: "linear",
-                overwrite: false,
-            });
-        }
-
-        const handleMouseMove = (e) => {
-            const el2 = gridRef.current;
-            if (!el2) return;
-
-            const target = document.elementFromPoint(e.clientX, e.clientY);
-            if (!target || !el2.contains(target)) {
-                if (lastHighlighted.current !== null) {
-                    const prev = el2.children[lastHighlighted.current];
-                    if (prev) gsap.to(prev, { backgroundColor: "transparent", boxShadow: "none", duration: 0.18 });
-                    lastHighlighted.current = null;
-                }
-                return;
-            }
-
-            const child = target.closest("div");
-            const index = Array.prototype.indexOf.call(el2.children, child);
-            if (index === -1) return;
-
-            if (lastHighlighted.current !== index) {
-                if (lastHighlighted.current !== null) {
-                    const prevBox = el2.children[lastHighlighted.current];
-                    if (prevBox) gsap.to(prevBox, { backgroundColor: "transparent", boxShadow: "none", duration: 0.18 });
-                }
-
-                const newBox = el2.children[index];
-                if (newBox) {
-                    const c = colorRef.current || "#a3e635";
-                    gsap.to(newBox, { backgroundColor: c, boxShadow: `0 0 12px ${c}`, duration: 0.12 });
-                }
-
-                lastHighlighted.current = index;
-            }
-        };
-
-        // Hit-test at most once per frame instead of on every mousemove event.
-        let moveFrame = 0;
-        let lastMove = null;
-        const onMouseMove = (e) => {
-            lastMove = e;
-            if (moveFrame) return;
-            moveFrame = requestAnimationFrame(() => {
-                moveFrame = 0;
-                handleMouseMove(lastMove);
-            });
-        };
-        window.addEventListener("mousemove", onMouseMove, { passive: true });
-
-        return () => {
-            window.removeEventListener("mousemove", onMouseMove);
-            cancelAnimationFrame(moveFrame);
-            if (scrollTween && typeof scrollTween.kill === "function") {
-                try { scrollTween.kill(); } catch { /* ignore */ }
-            }
-            if (el) {
-                try { gsap.killTweensOf(el); } catch { /* ignore */ }
-                Array.from(el.children).forEach((c) => { try { gsap.killTweensOf(c); } catch { /* ignore */ } });
-            }
-            lastHighlighted.current = null;
-        };
-    }, []);
-
-    const total = grid.cols * grid.rows;
-
-    return (
-        <div className="absolute inset-0 z-0 w-full h-full overflow-hidden bg-slate-800" style={{ backgroundColor: `${bgColor}` }}>
-            <div
-                ref={gridRef}
-                className="grid"
-                style={{
-                    gridTemplateColumns: `repeat(${grid.cols}, ${boxSize}px)`,
-                    gridTemplateRows: `repeat(${grid.rows}, ${boxSize}px)`,
-                }}
-            >
-                {Array.from({ length: total }).map((_, i) => (
-                    <div
-                        key={i}
-                        className={`border bg-transparent w-10 h-10`}
-                        style={{
-                            borderColor: borderColor
-                        }}
-                    />
-                ))}
-            </div>
-            {/* Spotlight overlay - positioned after grid to not interfere with scroll */}
-            <div
-                className="absolute inset-0 z-10 pointer-events-none blur-3xl"
-                style={{
-                    background: `radial-gradient(circle, ${circleColor} 0%, rgba(0, 0, 255, 0.1) 100%)`
-                }}
-            />
-        </div >
-    );
-}
-
-export default BluePrintBackground;
+import React, { useEffect, useRef } from "react";
+
+/*
+ * Blueprint Background: a drafting grid that drifts upward, with the cell
+ * under the pointer lighting up and fading out behind it like a trail. Drawn
+ * on one canvas (no per-cell elements), so it stays smooth on phones. Fills
+ * its nearest positioned parent; put content on top as children.
+ */
+
+const BluePrintBackground = ({ color = "#9ae600", borderColor = "rgba(98, 116, 142, 0.22)", bgColor = "#1e293b", circleColor = "rgba(154, 230, 0, 0.2)", cellSize = 40, speed = 1, children, className = "" }) => {
+    const wrap = useRef(null);
+    const canvas = useRef(null);
+    const live = useRef({});
+    live.current = { color, borderColor, cellSize, speed };
+
+    useEffect(() => {
+        const el = wrap.current;
+        const cv = canvas.current;
+        const ctx = cv.getContext("2d");
+        const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+        const lit = new Map(); // "col,row" -> glow 0..1
+        const pointer = { x: -1, y: -1, in: false };
+        let w = 0;
+        let h = 0;
+        let dpr = 1;
+        let total = 0; // how far the grid has scrolled, in px
+        let raf = 0;
+        let last = 0;
+        let visible = true;
+
+        const fit = () => {
+            const r = el.getBoundingClientRect();
+            dpr = Math.min(window.devicePixelRatio || 1, 2);
+            w = r.width;
+            h = r.height;
+            cv.width = Math.round(w * dpr);
+            cv.height = Math.round(h * dpr);
+        };
+
+        const frame = (now) => {
+            raf = 0;
+            const o = live.current;
+            const size = Math.max(12, o.cellSize);
+            const dt = last ? Math.min(0.05, (now - last) / 1000) : 1 / 60;
+            last = now;
+            if (!reduced) total += dt * 24 * o.speed;
+            const offset = total % size;
+
+            // Light the cell under the pointer (in grid space, so it scrolls with the grid).
+            if (pointer.in) {
+                lit.set(`${Math.floor(pointer.x / size)},${Math.floor((pointer.y + total) / size)}`, 1);
+            }
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+            ctx.clearRect(0, 0, w, h);
+
+            // Glowing cells, fading out.
+            ctx.shadowColor = o.color;
+            for (const [key, a] of lit) {
+                const [c, row] = key.split(",").map(Number);
+                const y = row * size - total;
+                if (a <= 0.02 || y < -size || y > h + size) {
+                    lit.delete(key);
+                    continue;
+                }
+                ctx.globalAlpha = a;
+                ctx.shadowBlur = 14 * a;
+                ctx.fillStyle = o.color;
+                ctx.fillRect(c * size + 1, y + 1, size - 2, size - 2);
+                lit.set(key, a - dt * 1.6);
+            }
+            ctx.globalAlpha = 1;
+            ctx.shadowBlur = 0;
+
+            // Grid lines.
+            ctx.strokeStyle = o.borderColor;
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            for (let x = 0; x <= w; x += size) {
+                ctx.moveTo(Math.round(x) + 0.5, 0);
+                ctx.lineTo(Math.round(x) + 0.5, h);
+            }
+            for (let y = -offset; y <= h; y += size) {
+                ctx.moveTo(0, Math.round(y) + 0.5);
+                ctx.lineTo(w, Math.round(y) + 0.5);
+            }
+            ctx.stroke();
+
+            if (visible && (!reduced || lit.size)) raf = requestAnimationFrame(frame);
+            else last = 0;
+        };
+        const start = () => {
+            if (!raf && visible) raf = requestAnimationFrame(frame);
+        };
+
+        // Listen on the window so content placed on top doesn't block the effect.
+        const onMove = (e) => {
+            const r = el.getBoundingClientRect();
+            pointer.x = e.clientX - r.left;
+            pointer.y = e.clientY - r.top;
+            pointer.in = pointer.x >= 0 && pointer.y >= 0 && pointer.x <= r.width && pointer.y <= r.height;
+            if (pointer.in) start();
+        };
+        window.addEventListener("pointermove", onMove, { passive: true });
+        const ro = new ResizeObserver(() => {
+            fit();
+            start();
+        });
+        ro.observe(el);
+        const io = new IntersectionObserver(([entry]) => {
+            visible = entry.isIntersecting;
+            if (visible) start();
+        });
+        io.observe(el);
+        fit();
+        start();
+        return () => {
+            cancelAnimationFrame(raf);
+            ro.disconnect();
+            io.disconnect();
+            window.removeEventListener("pointermove", onMove);
+        };
+    }, []);
+
+    return (
+        <div ref={wrap} className={`absolute inset-0 z-0 h-full w-full overflow-hidden ${className}`} style={{ backgroundColor: bgColor }}>
+            <canvas ref={canvas} aria-hidden="true" className="absolute inset-0 h-full w-full" />
+            {/* Soft spotlight in the middle. */}
+            <div aria-hidden="true" className="pointer-events-none absolute inset-0 blur-3xl" style={{ background: `radial-gradient(circle, ${circleColor} 0%, transparent 70%)` }} />
+            {children && <div className="relative z-10 h-full w-full">{children}</div>}
+        </div>
+    );
+};
+
+export default BluePrintBackground;

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

@@ -1,11 +1,12 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { motion } from "framer-motion";
 import { Code2, Layers, Sparkles, Zap } from "lucide-react";
 
 /*
- * Card Swap 3D: cards stacked diagonally into the distance in 3D. On a
- * timer the front card drops away and slides to the back of the stack
- * while the rest step forward. Pauses while hovered; click to swap now.
+ * Card Swap 3D: cards stacked in real 3D, turned toward the viewer and
+ * receding into the distance. On a timer the front card drops away and
+ * returns to the back while the rest step forward. Pauses while hovered;
+ * click to swap now. The whole stack scales down to fit narrow containers.
  */
 
 const DEFAULT_CARDS = [
@@ -15,12 +16,19 @@ const DEFAULT_CARDS = [
     { icon: Zap, title: "Fast", body: "Transforms and opacity only, 60fps on phones." },
 ];
 
-const CardSwap3D = ({ cards = DEFAULT_CARDS, delay = 3200, distanceX = 3.6, distanceY = 3.2, skew = 5, pauseOnHover = true, accentColor = "#a3e635", theme = "dark", width = 18, className = "" }) => {
+const CardSwap3D = ({ cards = DEFAULT_CARDS, delay = 3200, distanceX = 3.6, distanceY = 3.2, depth = 70, tilt = 18, skew = 0, pauseOnHover = true, accentColor = "#a3e635", theme = "dark", width = 18, className = "" }) => {
     // order[0] is the card in front.
     const [order, setOrder] = useState(() => cards.map((_, i) => i));
     const [dropping, setDropping] = useState(null);
     const [paused, setPaused] = useState(false);
+    const [fit, setFit] = useState(1);
+    const outer = useRef(null);
     const dark = theme !== "light";
+    const n = cards.length;
+    // Footprint of the whole stack in rem (card plus the steps behind it).
+    // (+5: the 3D turn makes the cards project a little wider than they are.)
+    const footW = width + distanceX * (n - 1) + 5;
+    const footH = width * 0.68 + distanceY * (n - 1) + 2;
 
     const swap = () => {
         if (dropping !== null) return;
@@ -37,42 +45,58 @@ const CardSwap3D = ({ cards = DEFAULT_CARDS, delay = 3200, distanceX = 3.6, dist
         return () => clearInterval(id);
     });
 
+    // Scale the stack down when its container is narrower than its footprint.
+    useLayoutEffect(() => {
+        const el = outer.current?.parentElement;
+        if (!el) return undefined;
+        const ro = new ResizeObserver(() => {
+            const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+            setFit(Math.min(1, el.clientWidth / (footW * rem)));
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [footW]);
+
     return (
-        <div
-            className={`relative [perspective:1000px] ${className}`}
-            style={{ width: `min(${width}rem, 70vw)`, height: `${width * 0.68}rem`, marginTop: `${distanceY * (cards.length - 1)}rem`, marginRight: `${distanceX * (cards.length - 1)}rem` }}
-            onPointerEnter={() => pauseOnHover && setPaused(true)}
-            onPointerLeave={() => setPaused(false)}
-            onClick={swap}
-        >
-            {cards.map((card, i) => {
-                const slot = order.indexOf(i);
-                const isDropping = dropping === i;
-                const Icon = card.icon ?? Sparkles;
-                return (
-                    <motion.div
-                        key={i}
-                        className={`absolute inset-0 cursor-pointer overflow-hidden rounded-2xl border p-6 [backface-visibility:hidden] ${dark ? "border-white/10 bg-neutral-950 text-white" : "border-black/10 bg-white text-neutral-900"}`}
-                        style={{ zIndex: isDropping ? 60 : cards.length - slot, transformStyle: "preserve-3d", boxShadow: "0 25px 50px -25px rgba(0,0,0,0.6)" }}
-                        initial={false}
-                        animate={
-                            isDropping
-                                ? { x: "0rem", y: "14rem", z: 0, skewY: skew, opacity: 0.0 }
-                                : { x: `${slot * distanceX}rem`, y: `${-slot * distanceY}rem`, z: -slot * 60, skewY: skew, opacity: slot > 4 ? 0 : 1 }
-                        }
-                        transition={isDropping ? { duration: 0.5, ease: [0.55, 0, 0.8, 0.2] } : { type: "spring", stiffness: 140, damping: 20 }}
-                    >
-                        <div className="flex items-center gap-2.5">
-                            <span className="grid h-9 w-9 place-items-center rounded-xl text-black" style={{ background: accentColor }}>
-                                <Icon className="h-4.5 w-4.5" />
-                            </span>
-                            <p className="text-lg font-semibold">{card.title}</p>
-                        </div>
-                        <p className={`mt-3 text-[0.92rem] leading-relaxed ${dark ? "text-white/60" : "text-neutral-500"}`}>{card.body}</p>
-                        <div className="pointer-events-none absolute -bottom-10 -right-10 h-32 w-32 rounded-full opacity-20 blur-2xl" style={{ background: accentColor }} />
-                    </motion.div>
-                );
-            })}
+        <div ref={outer} className={`relative mx-auto ${className}`} style={{ width: `${footW * fit}rem`, height: `${footH * fit}rem` }}>
+            <div
+                className="absolute left-0 top-0 origin-top-left [perspective:1200px]"
+                style={{ width: `${footW}rem`, height: `${footH}rem`, transform: `scale(${fit})` }}
+                onPointerEnter={() => pauseOnHover && setPaused(true)}
+                onPointerLeave={() => setPaused(false)}
+                onClick={swap}
+            >
+                <div className="absolute [transform-style:preserve-3d]" style={{ left: "2.5rem", bottom: "1rem", width: `${width}rem`, height: `${width * 0.68}rem`, transform: `rotateY(${-tilt}deg) rotateX(${tilt * 0.35}deg)` }}>
+                    {cards.map((card, i) => {
+                        const slot = order.indexOf(i);
+                        const isDropping = dropping === i;
+                        const Icon = card.icon ?? Sparkles;
+                        return (
+                            <motion.div
+                                key={i}
+                                className={`absolute inset-0 cursor-pointer overflow-hidden rounded-2xl border p-6 ${dark ? "border-white/10 bg-neutral-950 text-white" : "border-black/10 bg-white text-neutral-900"}`}
+                                style={{ zIndex: isDropping ? 60 : n - slot, boxShadow: "0 30px 60px -28px rgba(0,0,0,0.65)" }}
+                                initial={false}
+                                animate={
+                                    isDropping
+                                        ? { x: "-2rem", y: "16rem", z: 120, rotateZ: -8, skewY: skew, opacity: 0 }
+                                        : { x: `${slot * distanceX}rem`, y: `${-slot * distanceY}rem`, z: -slot * depth, rotateZ: 0, skewY: skew, opacity: slot > 4 ? 0 : 1 - slot * 0.12 }
+                                }
+                                transition={isDropping ? { duration: 0.5, ease: [0.55, 0, 0.8, 0.2] } : { type: "spring", stiffness: 150, damping: 21 }}
+                            >
+                                <div className="flex items-center gap-2.5">
+                                    <span className="grid h-9 w-9 place-items-center rounded-xl text-black" style={{ background: accentColor }}>
+                                        <Icon className="h-[18px] w-[18px]" />
+                                    </span>
+                                    <p className="text-lg font-semibold">{card.title}</p>
+                                </div>
+                                <p className={`mt-3 text-[0.92rem] leading-relaxed ${dark ? "text-white/60" : "text-neutral-500"}`}>{card.body}</p>
+                                <div className="pointer-events-none absolute -bottom-10 -right-10 h-32 w-32 rounded-full opacity-20 blur-2xl" style={{ background: accentColor }} />
+                            </motion.div>
+                        );
+                    })}
+                </div>
+            </div>
         </div>
     );
 };