apex-ui-kit 2.10.0 → 2.12.0

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>
     );
 };

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/FlipClock/FlipClock.jsx

@@ -94,7 +94,7 @@ const FlipClock = ({ mode = "seconds", target, seconds = 3 * 86400 + 4 * 3600 +
         // The clock is sized in em; on narrow screens the font shrinks with the
         // container (cqw) so every unit fits instead of being cut off. The min
         // width keeps it from collapsing inside a shrink-to-fit parent.
-        <div className="flex w-full justify-center" style={{ containerType: "inline-size", minWidth: `min(${(size * parts.length * 2.55).toFixed(2)}rem, 92vw)` }}>
+        <div className="flex w-full justify-center" style={{ containerType: "inline-size", minWidth: `min(${(size * parts.length * 2.55).toFixed(2)}rem, 100%)` }}>
         <div role="timer" aria-live="off" aria-label={parts.map(([l, v]) => `${v} ${l}`).join(", ")} className={`inline-flex items-start gap-[0.35em] font-mono font-bold ${className}`} style={{ fontSize: `min(${size}rem, ${(100 / (parts.length * 2.55)).toFixed(2)}cqw)` }}>
             {parts.map(([label, value], i) => (
                 <React.Fragment key={label}>

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/GooeyNav/GooeyNav.jsx

@@ -123,6 +123,20 @@ const GooeyNav = ({ items = DEFAULT_ITEMS, initialActive = 0, onChange, accentCo
     const gooRef = useRef(goo);
     const glowRef = useRef(theme === "light" ? 0 : 0.22);
     const dark = theme !== "light";
+    // Sized from the space it sits in (not the screen), so it fits narrow columns too.
+    const [size, setSize] = useState("lg");
+
+    useLayoutEffect(() => {
+        const el = bar.current?.parentElement?.parentElement;
+        if (!el) return undefined;
+        const ro = new ResizeObserver(() => {
+            const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+            const w = el.clientWidth / rem;
+            setSize(w < 22 ? "xs" : w < 34 ? "sm" : "lg");
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
 
     useEffect(() => {
         color.current = hexToRgb(accentColor);
@@ -289,7 +303,7 @@ const GooeyNav = ({ items = DEFAULT_ITEMS, initialActive = 0, onChange, accentCo
 
     return (
         <nav className={`relative inline-flex max-w-full ${className}`} aria-label="Main">
-            <div ref={bar} className={`relative flex items-center gap-0 rounded-full p-1 sm:gap-0.5 sm:p-1.5 ${dark ? "bg-neutral-950 ring-1 ring-white/10" : "bg-white shadow-sm ring-1 ring-black/10"}`}>
+            <div ref={bar} className={`relative flex items-center gap-0 rounded-full ${size === "lg" ? "gap-0.5 p-1.5" : "p-1"} ${dark ? "bg-neutral-950 ring-1 ring-white/10" : "bg-white shadow-sm ring-1 ring-black/10"}`}>
                 <canvas ref={canvas} aria-hidden="true" className="pointer-events-none absolute" style={{ left: -PAD, top: -PAD, display: fallback ? "none" : "block" }} />
                 {fallback && <span ref={fallbackPill} aria-hidden="true" className="pointer-events-none absolute rounded-full" style={{ background: accentColor }} />}
                 {items.map((item, i) => (
@@ -299,7 +313,7 @@ const GooeyNav = ({ items = DEFAULT_ITEMS, initialActive = 0, onChange, accentCo
                         href={item.href}
                         onClick={(e) => select(i, e)}
                         aria-current={i === active ? "page" : undefined}
-                        className={`relative z-[1] shrink-0 rounded-full px-2.5 py-2 text-[0.82rem] font-medium max-[380px]:px-2 max-[380px]:text-[0.76rem] sm:py-2.5 sm:text-[0.95rem] outline-none transition-colors duration-300 focus-visible:ring-2 focus-visible:ring-current/30 sm:px-5 ${i === active ? "text-neutral-950" : dark ? "text-white/65 hover:text-white" : "text-neutral-500 hover:text-neutral-900"}`}
+                        className={`relative z-[1] shrink-0 whitespace-nowrap rounded-full font-medium outline-none transition-colors duration-300 focus-visible:ring-2 focus-visible:ring-current/30 ${{ lg: "px-5 py-2.5 text-[0.95rem]", sm: "px-2.5 py-2 text-[0.82rem]", xs: "px-2 py-2 text-[0.76rem]" }[size]} ${i === active ? "text-neutral-950" : dark ? "text-white/65 hover:text-white" : "text-neutral-500 hover:text-neutral-900"}`}
                     >
                         {item.label}
                     </a>

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

@@ -24,6 +24,7 @@ const ImageAccordion = ({ items = DEFAULT_ITEMS, defaultActive = 0, autoPlay = 0
     const list = items.length ? items : DEFAULT_ITEMS;
     const [active, setActive] = useState(Math.min(defaultActive, list.length - 1));
     const [vertical, setVertical] = useState(false);
+    const [panelW, setPanelW] = useState(416);
     const root = useRef(null);
     const hovering = useRef(false);
 
@@ -34,13 +35,20 @@ const ImageAccordion = ({ items = DEFAULT_ITEMS, defaultActive = 0, autoPlay = 0
         });
     };
 
-    // Stack vertically when the box is narrow (a container check, not the viewport).
+    // Stack vertically when the box is narrow (a container check, not the viewport),
+    // and work out how wide the open panel ends up so its text never overflows it.
     useEffect(() => {
         const el = root.current;
-        const ro = new ResizeObserver(([entry]) => setVertical(entry.contentRect.width < 520));
+        const ro = new ResizeObserver(([entry]) => {
+            const w = entry.contentRect.width;
+            const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+            const stacked = w < 520;
+            setVertical(stacked);
+            setPanelW(stacked ? w : ((w - gap * rem * (list.length - 1)) * openRatio) / (openRatio + list.length - 1));
+        });
         ro.observe(el);
         return () => ro.disconnect();
-    }, []);
+    }, [gap, openRatio, list.length]);
 
     useEffect(() => {
         if (!autoPlay) return undefined;
@@ -80,14 +88,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 +107,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)]"
-                            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` }}
+                            className="absolute bottom-0 left-0 block p-[clamp(1rem,3cqw,1.75rem)] [backface-visibility:hidden]"
+                            style={{ width: `min(26rem, ${Math.round(panelW)}px)`, 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>