apex-ui-kit 2.7.0 → 2.8.0

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

@@ -0,0 +1,230 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+
+/*
+ * Infinite Canvas: an endless wall of image cards you can drag, flick or
+ * scroll in any direction. It glides to a stop with momentum, cards lean
+ * with the speed of the move and settle flat again, and the wall drifts on
+ * its own while nobody touches it. Only enough cards to cover the view are
+ * rendered; they are recycled as they leave an edge, so it stays light.
+ */
+
+const IK = "https://ik.imagekit.io/ny6yinyut/apexui/assets/componentsimage";
+const shot = (n, t) => ({ image: `${IK}/${n}.png?tr=f-auto,q-75,w-520`, title: t });
+const DEFAULT_ITEMS = [
+    shot("galaxy-3d", "Galaxy 3D"),
+    shot("warp-tunnel", "Warp Tunnel"),
+    shot("liquid-blob-3d", "Liquid Blob 3D"),
+    shot("particle-text", "Particle Text"),
+    shot("retro-grid-3d", "Retro Grid 3D"),
+    shot("marquee-3d", "Marquee 3D"),
+    shot("sunrise-background", "Sunrise Background"),
+    shot("circular-carousel", "Circular Carousel"),
+    shot("wireframe-knot-3d", "Wireframe Knot 3D"),
+    shot("arc-gallery", "Arc Gallery"),
+    shot("particle-morph", "Particle Morph"),
+    shot("scroll-stack", "Scroll Stack"),
+];
+
+const InfiniteCanvas = ({ items = DEFAULT_ITEMS, cardWidth = 14, aspectRatio = 0.8, gap = 1.25, drift = 18, tilt = 1, friction = 0.93, showTitles = true, height = "34rem", onItemClick, className = "" }) => {
+    const wrap = useRef(null);
+    const tiles = useRef([]);
+    const [pool, setPool] = useState(0);
+    const live = useRef({});
+    live.current = { drift, tilt, friction, showTitles, onItemClick };
+    const list = items.length ? items : DEFAULT_ITEMS;
+    const listRef = useRef(list);
+    listRef.current = list;
+    const geo = useRef({ cw: 1, ch: 1, cols: 0, rows: 0 });
+
+    // Size the pool to cover the view (plus a ring of spares) whenever it resizes.
+    useLayoutEffect(() => {
+        const el = wrap.current;
+        const fit = () => {
+            const { width, height: hh } = el.getBoundingClientRect();
+            const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+            // Cards shrink a little on small screens so a few always fit.
+            const w = Math.min(cardWidth * rem, Math.max(width * 0.42, 120));
+            const cw = w + gap * rem;
+            const ch = w / aspectRatio + gap * rem;
+            const cols = Math.ceil(width / cw) + 2;
+            const rows = Math.ceil(hh / ch) + 3;
+            geo.current = { cw, ch, w, h: w / aspectRatio, cols, rows };
+            setPool(cols * rows);
+        };
+        fit();
+        const ro = new ResizeObserver(fit);
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [cardWidth, aspectRatio, gap]);
+
+    useEffect(() => {
+        const el = wrap.current;
+        if (!pool) return undefined;
+        const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+        const s = { ox: 0, oy: 0, vx: 0, vy: 0, lean: { x: 0, y: 0 }, drag: null, hover: false };
+        const slots = tiles.current.slice(0, pool).map(() => ({ key: "" }));
+        let raf = 0;
+        let last = 0;
+        let visible = true;
+
+        const paint = () => {
+            const { cw, ch, cols } = geo.current;
+            const items = listRef.current;
+            const n = items.length;
+            const c0 = Math.floor(-s.ox / cw) - 1;
+            const r0 = Math.floor(-s.oy / ch) - 2;
+            const rx = Math.max(-10, Math.min(10, -s.lean.y * 0.012 * live.current.tilt));
+            const ry = Math.max(-10, Math.min(10, s.lean.x * 0.012 * live.current.tilt));
+            const sc = 1 - Math.min(0.06, Math.hypot(s.lean.x, s.lean.y) / 30000);
+            for (let k = 0; k < slots.length; k++) {
+                const el = tiles.current[k];
+                if (!el) continue;
+                const i = c0 + (k % cols);
+                const j = r0 + Math.floor(k / cols);
+                // Odd columns sit half a card lower, like a masonry wall.
+                const x = i * cw + s.ox;
+                const y = j * ch + s.oy + (((i % 2) + 2) % 2) * ch * 0.5;
+                el.style.transform = `translate3d(${x.toFixed(2)}px, ${y.toFixed(2)}px, 0) rotateX(${rx.toFixed(2)}deg) rotateY(${ry.toFixed(2)}deg) scale(${sc.toFixed(4)})`;
+                const key = `${i},${j}`;
+                if (slots[k].key !== key) {
+                    slots[k].key = key;
+                    const idx = ((((i * 5 + j * 3) % n) + n) % n);
+                    el.dataset.index = String(idx);
+                    const img = el.querySelector("img");
+                    if (img && img.getAttribute("src") !== items[idx].image) img.setAttribute("src", items[idx].image);
+                    const label = el.querySelector("[data-title]");
+                    if (label) label.textContent = items[idx].title ?? "";
+                }
+            }
+        };
+
+        const frame = (now) => {
+            raf = 0;
+            const o = live.current;
+            const dt = last ? Math.min(0.05, (now - last) / 1000) : 1 / 60;
+            last = now;
+            if (!s.drag) {
+                const k = Math.pow(o.friction, dt * 60);
+                s.vx *= k;
+                s.vy *= k;
+                // Ease back into the idle drift once the throw has died down.
+                if (!s.hover && !reduced && o.drift) {
+                    s.vx += (-o.drift * 0.6 - s.vx) * (1 - Math.exp(-dt / 1.6)) * (Math.abs(s.vx) < 120 ? 1 : 0);
+                    s.vy += (-o.drift - s.vy) * (1 - Math.exp(-dt / 1.6)) * (Math.abs(s.vy) < 120 ? 1 : 0);
+                }
+                s.ox += s.vx * dt;
+                s.oy += s.vy * dt;
+            }
+            const lx = s.drag ? s.drag.vx : s.vx;
+            const ly = s.drag ? s.drag.vy : s.vy;
+            s.lean.x += (lx - s.lean.x) * (1 - Math.exp(-dt / 0.12));
+            s.lean.y += (ly - s.lean.y) * (1 - Math.exp(-dt / 0.12));
+            paint();
+            const moving = s.drag || Math.abs(s.vx) + Math.abs(s.vy) > 1 || Math.abs(s.lean.x) + Math.abs(s.lean.y) > 1;
+            if (visible && (moving || (o.drift && !s.hover && !reduced))) raf = requestAnimationFrame(frame);
+            else last = 0;
+        };
+        const start = () => {
+            if (!raf && visible) raf = requestAnimationFrame(frame);
+        };
+
+        const onDown = (e) => {
+            if (e.button !== 0) return;
+            e.preventDefault();
+            s.drag = { x: e.clientX, y: e.clientY, ox: s.ox, oy: s.oy, t: performance.now(), vx: 0, vy: 0, moved: false, target: e.target.closest("[data-index]") };
+            el.setPointerCapture(e.pointerId);
+            s.vx = s.vy = 0;
+            start();
+        };
+        const onMove = (e) => {
+            const g = s.drag;
+            if (!g) return;
+            const now = performance.now();
+            const dx = e.clientX - g.x;
+            const dy = e.clientY - g.y;
+            if (Math.hypot(dx, dy) > 5) g.moved = true;
+            const nx = g.ox + dx;
+            const ny = g.oy + dy;
+            const span = Math.max(8, now - g.t) / 1000;
+            g.vx += ((nx - s.ox) / span - g.vx) * 0.4;
+            g.vy += ((ny - s.oy) / span - g.vy) * 0.4;
+            g.t = now;
+            s.ox = nx;
+            s.oy = ny;
+            start();
+        };
+        const onUp = (e) => {
+            const g = s.drag;
+            if (!g) return;
+            s.drag = null;
+            if (g.moved) {
+                // Fling: keep the release speed (capped) and let friction take it.
+                s.vx = Math.max(-3000, Math.min(3000, g.vx));
+                s.vy = Math.max(-3000, Math.min(3000, g.vy));
+            } else if (g.target && e.type === "pointerup") {
+                const idx = Number(g.target.dataset.index);
+                live.current.onItemClick?.(listRef.current[idx], idx);
+            }
+            start();
+        };
+        const onWheel = (e) => {
+            e.preventDefault();
+            s.vx = -e.deltaX * 6;
+            s.vy = -e.deltaY * 6;
+            start();
+        };
+        const onEnter = () => {
+            s.hover = true;
+        };
+        const onLeave = () => {
+            s.hover = false;
+            start();
+        };
+        el.addEventListener("pointerdown", onDown);
+        el.addEventListener("pointermove", onMove);
+        el.addEventListener("pointerup", onUp);
+        el.addEventListener("pointercancel", onUp);
+        el.addEventListener("pointerenter", onEnter);
+        el.addEventListener("pointerleave", onLeave);
+        el.addEventListener("wheel", onWheel, { passive: false });
+        const io = new IntersectionObserver(([entry]) => {
+            visible = entry.isIntersecting;
+            if (visible) start();
+        });
+        io.observe(el);
+        paint();
+        start();
+
+        return () => {
+            cancelAnimationFrame(raf);
+            io.disconnect();
+            el.removeEventListener("pointerdown", onDown);
+            el.removeEventListener("pointermove", onMove);
+            el.removeEventListener("pointerup", onUp);
+            el.removeEventListener("pointercancel", onUp);
+            el.removeEventListener("pointerenter", onEnter);
+            el.removeEventListener("pointerleave", onLeave);
+            el.removeEventListener("wheel", onWheel);
+        };
+    }, [pool]);
+
+    const { w, h } = geo.current;
+    return (
+        <div
+            ref={wrap}
+            className={`relative w-full cursor-grab touch-none select-none overflow-hidden active:cursor-grabbing ${className}`}
+            style={{ height, perspective: "1200px", maskImage: "radial-gradient(ellipse 75% 75% at 50% 50%, #000 55%, transparent 100%)", WebkitMaskImage: "radial-gradient(ellipse 75% 75% at 50% 50%, #000 55%, transparent 100%)" }}
+        >
+            {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">
+                        <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" />}
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default InfiniteCanvas;

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

@@ -0,0 +1,169 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Cloud, Code2, Cpu, Database, Figma, Github, Globe, Layers, Lock, Palette, Rocket, Sparkles, Zap } from "lucide-react";
+
+/*
+ * Orbit Icons: icons circling a center on a few rings, each ring at its own
+ * speed and direction. Tip the orbits back for depth: icons on the far side
+ * shrink, dim and pass behind the near ones. Hovering eases the motion to a
+ * stop (and shows labels); the orbits lean a little toward the pointer. It
+ * scales to its container, so it fits phones.
+ */
+
+const DEFAULT_RINGS = [
+    { speed: 22, items: [{ icon: Code2, label: "Code" }, { icon: Zap, label: "Fast" }, { icon: Palette, label: "Design" }] },
+    { speed: -14, items: [{ icon: Github, label: "GitHub" }, { icon: Figma, label: "Figma" }, { icon: Sparkles, label: "AI" }, { icon: Cpu, label: "Compute" }] },
+    { speed: 9, items: [{ icon: Globe, label: "Web" }, { icon: Database, label: "Data" }, { icon: Cloud, label: "Cloud" }, { icon: Lock, label: "Auth" }, { icon: Rocket, label: "Deploy" }, { icon: Layers, label: "Stack" }] },
+];
+
+const OrbitIcons = ({ rings = DEFAULT_RINGS, size = 28, tilt = 0.55, speed = 1, pauseOnHover = true, showRings = true, accentColor = "#a3e635", center, className = "" }) => {
+    const box = useRef(null);
+    const nodes = useRef([]);
+    const ringEls = useRef([]);
+    const [hover, setHover] = useState(false);
+    const live = useRef({});
+    live.current = { tilt, speed, pauseOnHover, rings };
+    const flat = rings.flatMap((r, ri) => r.items.map((it, k) => ({ ...it, ri, k, n: r.items.length })));
+
+    useEffect(() => {
+        const el = box.current;
+        const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+        const s = { angles: live.current.rings.map((_, i) => i * 0.7), rate: 1, half: 100, lean: 0, leanX: 0, tx: 0, ty: 0, hover: false };
+        let raf = 0;
+        let last = 0;
+        let visible = true;
+
+        const fit = () => {
+            s.half = el.getBoundingClientRect().width / 2;
+            el.style.setProperty("--orbit-item", `${Math.max(30, Math.min(52, s.half * 0.21)).toFixed(1)}px`);
+        };
+        const frame = (now) => {
+            raf = 0;
+            const o = live.current;
+            const dt = last ? Math.min(0.05, (now - last) / 1000) : 1 / 60;
+            last = now;
+            // Ease the spin down on hover rather than stopping dead.
+            const goal = (o.pauseOnHover && s.hover) || reduced ? 0 : 1;
+            s.rate += (goal - s.rate) * (1 - Math.exp(-dt / 0.35));
+            s.lean += (s.ty - s.lean) * (1 - Math.exp(-dt / 0.4));
+            s.leanX += (s.tx - s.leanX) * (1 - Math.exp(-dt / 0.4));
+            const tiltA = Math.max(0, Math.min(1.2, o.tilt * 1.15 + s.lean * 0.18));
+            const squash = Math.cos(tiltA);
+            const depthAmt = Math.sin(tiltA);
+            o.rings.forEach((ring, ri) => {
+                s.angles[ri] = (s.angles[ri] ?? 0) + ((ring.speed * Math.PI) / 180) * o.speed * s.rate * dt;
+            });
+            const radii = o.rings.map((_, ri) => s.half * (0.34 + (0.6 * (ri + 1)) / o.rings.length) * 0.94);
+            ringEls.current.forEach((e, ri) => {
+                if (!e) return;
+                const r = radii[ri];
+                e.style.width = `${r * 2}px`;
+                e.style.height = `${r * 2 * squash}px`;
+                e.style.transform = `translate(-50%, -50%) rotate(${(s.leanX * 6).toFixed(2)}deg)`;
+            });
+            nodes.current.forEach((e, idx) => {
+                const it = flat[idx];
+                if (!e || !it) return;
+                const r = radii[it.ri];
+                const a = s.angles[it.ri] + (it.k / it.n) * Math.PI * 2;
+                const z = Math.sin(a); // +1 is the near side (bottom)
+                const lean = (s.leanX * 6 * Math.PI) / 180;
+                let x = Math.cos(a) * r;
+                let y = Math.sin(a) * r * squash;
+                [x, y] = [x * Math.cos(lean) - y * Math.sin(lean), x * Math.sin(lean) + y * Math.cos(lean)];
+                const sc = 1 + z * 0.16 * depthAmt;
+                e.style.transform = `translate(-50%, -50%) translate3d(${x.toFixed(2)}px, ${y.toFixed(2)}px, 0) scale(${sc.toFixed(3)})`;
+                e.style.zIndex = String(Math.round(50 + z * 40));
+                e.style.opacity = String((1 - (1 - z) * 0.22 * depthAmt).toFixed(3));
+            });
+            const busy = s.rate > 0.001 || Math.abs(s.ty - s.lean) > 0.001 || Math.abs(s.tx - s.leanX) > 0.001;
+            if (visible && busy) raf = requestAnimationFrame(frame);
+            else last = 0;
+        };
+        const start = () => {
+            if (!raf && visible) raf = requestAnimationFrame(frame);
+        };
+        const onMove = (e) => {
+            const r = el.getBoundingClientRect();
+            s.tx = ((e.clientX - r.left) / r.width) * 2 - 1;
+            s.ty = ((e.clientY - r.top) / r.height) * 2 - 1;
+            start();
+        };
+        const onEnter = (e) => {
+            if (e.pointerType === "mouse") {
+                s.hover = true;
+                setHover(true);
+            }
+            start();
+        };
+        const onLeave = () => {
+            s.hover = false;
+            s.tx = 0;
+            s.ty = 0;
+            setHover(false);
+            start();
+        };
+        el.addEventListener("pointermove", onMove);
+        el.addEventListener("pointerenter", onEnter);
+        el.addEventListener("pointerleave", onLeave);
+        const ro = new ResizeObserver(() => {
+            fit();
+            start();
+        });
+        ro.observe(el);
+        const io = new IntersectionObserver(([en]) => {
+            visible = en.isIntersecting;
+            if (visible) start();
+        });
+        io.observe(el);
+        fit();
+        start();
+        return () => {
+            cancelAnimationFrame(raf);
+            ro.disconnect();
+            io.disconnect();
+            el.removeEventListener("pointermove", onMove);
+            el.removeEventListener("pointerenter", onEnter);
+            el.removeEventListener("pointerleave", onLeave);
+        };
+        // flat is derived from rings; the loop reads both through refs and live.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [flat.length]);
+
+    return (
+        <div ref={box} className={`relative aspect-square w-full select-none ${className}`} style={{ maxWidth: `${size}rem`, "--orbit-accent": accentColor }}>
+            {showRings &&
+                rings.map((_, ri) => (
+                    <span
+                        key={ri}
+                        ref={(e) => (ringEls.current[ri] = e)}
+                        aria-hidden="true"
+                        className="pointer-events-none absolute left-1/2 top-1/2 rounded-[50%] border border-dashed border-current opacity-15"
+                    />
+                ))}
+            <div className="absolute left-1/2 top-1/2 z-[50] grid aspect-square w-[22%] -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full border border-white/10 bg-neutral-950 text-white shadow-[0_0_60px_-10px_var(--orbit-accent)]">
+                {center ?? <span className="text-base font-black tracking-tight sm:text-xl" style={{ color: accentColor }}>Apex</span>}
+            </div>
+            {flat.map((it, idx) => {
+                const Icon = it.icon;
+                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)]"
+                            style={{ width: "var(--orbit-item, 2.75rem)", aspectRatio: "1" }}
+                            title={it.label}
+                        >
+                            {typeof Icon === "function" || (Icon && typeof Icon === "object" && Icon.$$typeof) ? <Icon className="h-[46%] w-[46%]" style={{ color: it.color }} /> : Icon}
+                        </div>
+                        {it.label && (
+                            <span className="pointer-events-none absolute left-1/2 top-full mt-1.5 -translate-x-1/2 whitespace-nowrap rounded-full bg-black/70 px-2 py-0.5 text-[0.65rem] font-semibold text-white transition-opacity duration-300" style={{ opacity: hover ? 1 : 0 }}>
+                                {it.label}
+                            </span>
+                        )}
+                    </div>
+                );
+            })}
+        </div>
+    );
+};
+
+export default OrbitIcons;

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

@@ -6,7 +6,8 @@ import { Camera, Heart, Home, MessageCircle, Plus, Settings, Share2, User } from
  * Radial Menu: a round button that fans its actions out in a circle (or an
  * arc). Items spring out one after another and tuck back in on close.
  * Keyboard friendly: arrows move between items, Escape closes, and clicking
- * outside closes too.
+ * outside closes too. The ring shrinks to fit narrow containers, and the
+ * fade-in is a CSS animation so no item blinks when its spring settles.
  */
 
 const DEFAULT_ITEMS = [
@@ -25,11 +26,24 @@ const RadialMenu = ({ items = DEFAULT_ITEMS, radius = 6.5, arc = 360, startAngle
     const [picked, setPicked] = useState(null);
     const root = useRef(null);
     const btns = useRef([]);
+    const [fitR, setFitR] = useState(null);
     const dark = theme !== "light";
     const n = items.length;
     // Full circle spreads evenly; a partial arc includes both ends.
     const step = arc >= 360 ? 360 / n : arc / Math.max(1, n - 1);
 
+    // Keep the ring inside the box on small screens (item half size + a little room).
+    useEffect(() => {
+        const el = root.current;
+        const ro = new ResizeObserver(([entry]) => {
+            const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+            const room = entry.contentRect.width / 2 - 30;
+            setFitR(Math.max(48, Math.min(radius * rem, room)));
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [radius]);
+
     useEffect(() => {
         if (!open) return undefined;
         const down = (e) => !root.current?.contains(e.target) && setOpen(false);
@@ -56,11 +70,13 @@ const RadialMenu = ({ items = DEFAULT_ITEMS, radius = 6.5, arc = 360, startAngle
 
     return (
         <div ref={root} className={`relative inline-grid place-items-center ${className}`} style={{ width: `${radius * 2 + 4}rem`, height: `${radius * 2 + 4}rem`, maxWidth: "100%" }}>
+            <style>{"@keyframes apex-radial-in{from{opacity:0}to{opacity:1}}"}</style>
             <AnimatePresence>
                 {open &&
                     items.map((item, i) => {
                         const a = ((startAngle + i * step) * Math.PI) / 180;
                         const Icon = item.icon;
+                        const r = fitR ?? radius * 16;
                         return (
                             <motion.button
                                 key={`${id}-${i}`}
@@ -71,10 +87,10 @@ const RadialMenu = ({ items = DEFAULT_ITEMS, radius = 6.5, arc = 360, startAngle
                                 onClick={() => choose(item, i)}
                                 onKeyDown={(e) => onItemKey(e, i)}
                                 className={`group absolute grid h-12 w-12 place-items-center rounded-full shadow-lg outline-none ring-1 focus-visible:ring-2 ${dark ? "bg-neutral-900 text-white ring-white/10 hover:bg-neutral-800 focus-visible:ring-white/50" : "bg-white text-neutral-800 ring-black/10 hover:bg-neutral-50 focus-visible:ring-black/40"}`}
-                                initial={{ x: 0, y: 0, scale: 0.3, opacity: 0 }}
-                                animate={{ x: `${Math.cos(a) * radius}rem`, y: `${Math.sin(a) * radius}rem`, scale: 1, opacity: 1, transition: { type: "spring", stiffness: 420, damping: 24, delay: i * 0.03 } }}
+                                initial={{ x: 0, y: 0, scale: 0.3 }}
+                                animate={{ x: Math.cos(a) * r, y: Math.sin(a) * r, scale: 1, transition: { type: "spring", stiffness: 380, damping: 26, delay: i * 0.03 } }}
                                 exit={{ x: 0, y: 0, scale: 0.3, opacity: 0, transition: { duration: 0.18, delay: (n - 1 - i) * 0.015 } }}
-                                style={picked === i ? { color: accentColor } : undefined}
+                                style={{ animation: `apex-radial-in 220ms ease-out ${i * 30}ms backwards`, ...(picked === i ? { color: accentColor } : null) }}
                             >
                                 {Icon ? <Icon className="h-5 w-5" /> : item.label[0]}
                                 <span className={`pointer-events-none absolute top-full mt-1.5 whitespace-nowrap rounded-md px-1.5 py-0.5 text-[0.65rem] font-medium opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100 ${dark ? "bg-white text-black" : "bg-neutral-900 text-white"}`}>{item.label}</span>

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

@@ -1,15 +1,18 @@
-import React, { useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import { useAnimationFrame, useReducedMotion } from "framer-motion";
 
 /*
  * 3D Text Ring: letters stand on a ring in real 3D space and the ring
  * turns, so text sweeps around the back and comes forward again. Letters
- * fade and soften as they pass behind. Drag to spin it yourself.
+ * fade and soften as they pass behind. Drag to spin it yourself. On narrow
+ * screens the whole ring scales down to fit its container.
  */
 
 const TextRing3D = ({ text = "APEX UI · 3D TYPE · ", radius = 9, speed = 30, tilt = -14, fontSize = 2, color = "currentColor", accentColor = "#a3e635", className = "" }) => {
     const reduced = useReducedMotion();
+    const box = useRef(null);
     const ring = useRef(null);
+    const fit = useRef(1);
     const letters = useRef([]);
     const angle = useRef(0);
     const vel = useRef(0);
@@ -17,13 +20,24 @@ const TextRing3D = ({ text = "APEX UI · 3D TYPE · ", radius = 9, speed = 30, t
     const chars = Array.from(text);
     const step = 360 / chars.length;
 
+    useEffect(() => {
+        const el = box.current;
+        const ro = new ResizeObserver(() => {
+            const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+            const want = radius * 2.4 * rem;
+            fit.current = Math.min(1, el.getBoundingClientRect().width / want);
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [radius]);
+
     useAnimationFrame((_, delta) => {
         const dt = Math.min(0.05, delta / 1000);
         if (!drag.current) {
             vel.current *= 0.95;
             angle.current += (reduced ? 0 : speed) * dt + vel.current * dt;
         }
-        if (ring.current) ring.current.style.transform = `rotateX(${tilt}deg) rotateY(${-angle.current}deg)`;
+        if (ring.current) ring.current.style.transform = `scale(${fit.current}) rotateX(${tilt}deg) rotateY(${-angle.current}deg)`;
         letters.current.forEach((el, i) => {
             if (!el) return;
             // How much this letter faces the viewer (1 front, -1 back).
@@ -35,6 +49,7 @@ const TextRing3D = ({ text = "APEX UI · 3D TYPE · ", radius = 9, speed = 30, t
 
     return (
         <div
+            ref={box}
             className={`grid cursor-grab touch-none select-none place-items-center active:cursor-grabbing [perspective:900px] ${className}`}
             style={{ width: `${radius * 2.4}rem`, maxWidth: "100%", height: `${fontSize * 3.2 + 4}rem`, color }}
             onPointerDown={(e) => {