apex-ui-kit 2.2.0 → 2.3.1

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

@@ -0,0 +1,67 @@
+import React, { useEffect, useRef } from "react";
+
+/*
+ * Magnet Lines: a grid of short lines that all swing to point at the
+ * pointer, like iron filings around a magnet. Lines near the pointer glow
+ * and stretch a little. When the pointer leaves they drift back to a slow
+ * wave.
+ */
+
+const MagnetLines = ({ rows = 9, columns = 9, size = 22, lineColor = "currentColor", activeColor = "#a3e635", lineWidth = 0.22, lineHeight = 1.6, baseAngle = -10, className = "" }) => {
+    const wrap = useRef(null);
+    const lines = useRef([]);
+    const pointer = useRef(null);
+
+    useEffect(() => {
+        let raf = 0;
+        const angles = lines.current.map(() => baseAngle);
+        const tick = (now) => {
+            const p = pointer.current;
+            const t = now / 1000;
+            lines.current.forEach((el, i) => {
+                if (!el) return;
+                const r = el.getBoundingClientRect();
+                const cx = r.left + r.width / 2;
+                const cy = r.top + r.height / 2;
+                let target;
+                let near = 0;
+                if (p) {
+                    const dx = p.x - cx;
+                    const dy = p.y - cy;
+                    target = (Math.atan2(dy, dx) * 180) / Math.PI + 90;
+                    near = Math.max(0, 1 - Math.hypot(dx, dy) / 220);
+                } else {
+                    const col = i % columns;
+                    const row = Math.floor(i / columns);
+                    target = baseAngle + Math.sin(t * 1.2 + col * 0.5 + row * 0.3) * 25;
+                }
+                // Turn the short way round.
+                const diff = ((target - angles[i] + 540) % 360) - 180;
+                angles[i] += diff * 0.18;
+                el.style.transform = `rotate(${angles[i]}deg) scaleY(${1 + near * 0.35})`;
+                el.style.background = near > 0.05 ? `color-mix(in srgb, ${activeColor} ${Math.round(near * 100)}%, ${lineColor})` : lineColor;
+                el.style.opacity = String(0.35 + 0.65 * Math.max(near, p ? 0.25 : 0.4));
+            });
+            raf = requestAnimationFrame(tick);
+        };
+        raf = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(raf);
+    }, [baseAngle, columns, lineColor, activeColor]);
+
+    return (
+        <div
+            ref={wrap}
+            className={`grid touch-none place-items-center ${className}`}
+            style={{ gridTemplateColumns: `repeat(${columns}, 1fr)`, width: `min(${size}rem, 90vw)`, aspectRatio: `${columns} / ${rows}` }}
+            onPointerMove={(e) => (pointer.current = { x: e.clientX, y: e.clientY })}
+            onPointerLeave={() => (pointer.current = null)}
+            aria-hidden="true"
+        >
+            {Array.from({ length: rows * columns }, (_, i) => (
+                <span key={i} ref={(el) => (lines.current[i] = el)} className="block rounded-full will-change-transform" style={{ width: `${lineWidth}rem`, height: `${lineHeight}rem`, background: lineColor }} />
+            ))}
+        </div>
+    );
+};
+
+export default MagnetLines;

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

@@ -1,168 +1,15 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { motion, useMotionValue, useReducedMotion, useSpring } from "framer-motion";
 
 /*
  * Magnetic Cursor: a dot + ring cursor for one area of the page. The ring
  * wraps around links and buttons it hovers, grows into a labelled bubble over
  * anything with data-cursor-text, and pulls data-magnetic elements toward the
- * pointer. An optional tail follows it: comet, dots, sparkles or ghost rings.
- * Touch devices keep their normal behaviour.
+ * pointer. Touch devices keep their normal behaviour.
  */
 
 const TARGETS = "a, button, [role='button'], [data-cursor], [data-cursor-text], [data-magnetic]";
 
-const hexToRgb = (hex) => {
-    let h = String(hex).replace("#", "");
-    if (h.length === 3) h = h.split("").map((c) => c + c).join("");
-    const n = parseInt(h, 16) || 0;
-    return `${(n >> 16) & 255},${(n >> 8) & 255},${n & 255}`;
-};
-
-/*
- * The tail lives on one canvas. `feed` gets every pointer position; the loop
- * only runs while something is still visible, then sleeps.
- */
-function useTrail(canvasRef, style, color, enabled) {
-    const state = useRef({ points: [], dots: [], parts: [], rings: [], last: null, raf: 0, lastSpawn: 0 });
-
-    useEffect(() => {
-        const canvas = canvasRef.current;
-        if (!canvas || !enabled || style === "none") return undefined;
-        const ctx = canvas.getContext("2d");
-        const s = state.current;
-        const rgb = hexToRgb(color);
-        const resize = () => {
-            const r = canvas.getBoundingClientRect();
-            const dpr = Math.min(window.devicePixelRatio || 1, 2);
-            canvas.width = Math.round(r.width * dpr);
-            canvas.height = Math.round(r.height * dpr);
-            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-        };
-        const ro = new ResizeObserver(resize);
-        ro.observe(canvas);
-        resize();
-
-        const frame = () => {
-            const now = performance.now();
-            const { width, height } = canvas.getBoundingClientRect();
-            ctx.clearRect(0, 0, width, height);
-            let alive = false;
-
-            if (style === "comet") {
-                s.points = s.points.filter((p) => now - p.t < 320);
-                const n = s.points.length;
-                if (n > 1) {
-                    alive = true;
-                    ctx.lineCap = "round";
-                    ctx.shadowColor = `rgba(${rgb},0.8)`;
-                    ctx.shadowBlur = 12;
-                    for (let i = 1; i < n; i++) {
-                        const k = i / n;
-                        ctx.strokeStyle = `rgba(${rgb},${k * 0.9})`;
-                        ctx.lineWidth = 1 + k * 7;
-                        ctx.beginPath();
-                        ctx.moveTo(s.points[i - 1].x, s.points[i - 1].y);
-                        ctx.lineTo(s.points[i].x, s.points[i].y);
-                        ctx.stroke();
-                    }
-                    ctx.shadowBlur = 0;
-                }
-            }
-
-            if (style === "dots" && s.last) {
-                // Each dot eases toward the one ahead of it.
-                if (!s.dots.length) s.dots = Array.from({ length: 14 }, () => ({ x: s.last.x, y: s.last.y }));
-                let tx = s.last.x;
-                let ty = s.last.y;
-                s.dots.forEach((d, i) => {
-                    d.x += (tx - d.x) * 0.38;
-                    d.y += (ty - d.y) * 0.38;
-                    tx = d.x;
-                    ty = d.y;
-                    const k = 1 - i / s.dots.length;
-                    ctx.fillStyle = `rgba(${rgb},${k * 0.8})`;
-                    ctx.beginPath();
-                    ctx.arc(d.x, d.y, 1.5 + k * 4, 0, Math.PI * 2);
-                    ctx.fill();
-                });
-                const tail = s.dots[s.dots.length - 1];
-                alive = Math.hypot(tail.x - s.last.x, tail.y - s.last.y) > 0.5;
-            }
-
-            if (style === "sparkles") {
-                s.parts = s.parts.filter((p) => now - p.born < p.life);
-                s.parts.forEach((p) => {
-                    const k = 1 - (now - p.born) / p.life;
-                    p.x += p.vx;
-                    p.y += p.vy;
-                    p.vy += 0.05;
-                    p.vx *= 0.97;
-                    const size = p.size * k;
-                    ctx.strokeStyle = p.white ? `rgba(255,255,255,${k})` : `rgba(${rgb},${k})`;
-                    ctx.lineWidth = 1.4;
-                    ctx.beginPath();
-                    ctx.moveTo(p.x - size, p.y);
-                    ctx.lineTo(p.x + size, p.y);
-                    ctx.moveTo(p.x, p.y - size);
-                    ctx.lineTo(p.x, p.y + size);
-                    ctx.stroke();
-                });
-                alive = s.parts.length > 0;
-            }
-
-            if (style === "ghost") {
-                s.rings = s.rings.filter((r) => now - r.born < 650);
-                s.rings.forEach((r) => {
-                    const k = (now - r.born) / 650;
-                    ctx.strokeStyle = `rgba(${rgb},${(1 - k) * 0.7})`;
-                    ctx.lineWidth = 2 * (1 - k) + 0.5;
-                    ctx.beginPath();
-                    ctx.arc(r.x, r.y, 6 + k * 22, 0, Math.PI * 2);
-                    ctx.stroke();
-                });
-                alive = s.rings.length > 0;
-            }
-
-            s.raf = alive ? requestAnimationFrame(frame) : 0;
-        };
-
-        s.wake = () => {
-            if (!s.raf) s.raf = requestAnimationFrame(frame);
-        };
-        return () => {
-            cancelAnimationFrame(s.raf);
-            s.raf = 0;
-            s.wake = null;
-            ro.disconnect();
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            s.points = [];
-            s.dots = [];
-            s.parts = [];
-            s.rings = [];
-        };
-    }, [canvasRef, style, color, enabled]);
-
-    // Called on every pointer move with coordinates inside the area.
-    return (x, y) => {
-        const s = state.current;
-        const now = performance.now();
-        const prev = s.last;
-        s.last = { x, y };
-        if (style === "comet") s.points.push({ x, y, t: now });
-        if (style === "sparkles" && prev) {
-            const speed = Math.hypot(x - prev.x, y - prev.y);
-            for (let i = 0; i < Math.min(4, Math.ceil(speed / 8)); i++) {
-                s.parts.push({ x, y, vx: (Math.random() - 0.5) * 2.4, vy: (Math.random() - 0.7) * 2.4, size: 2 + Math.random() * 3, life: 500 + Math.random() * 400, born: now, white: Math.random() < 0.3 });
-            }
-        }
-        if (style === "ghost" && now - s.lastSpawn > 70) {
-            s.lastSpawn = now;
-            s.rings.push({ x, y, born: now });
-        }
-        s.wake?.();
-    };
-}
-
 const MagneticCursor = ({
     children,
     color = "#a3e635",
@@ -170,14 +17,11 @@ const MagneticCursor = ({
     padding = 6,
     magnetStrength = 0.35,
     blend = false,
-    trail = "none",
     className = "",
 }) => {
     const ref = useRef(null);
-    const trailRef = useRef(null);
     const magnet = useRef(null);
     const reduced = useReducedMotion();
-    const feedTrail = useTrail(trailRef, trail, color, !reduced);
     const [visible, setVisible] = useState(false);
     const [label, setLabel] = useState("");
     const [pressed, setPressed] = useState(false);
@@ -208,7 +52,6 @@ const MagneticCursor = ({
         dotX.set(px);
         dotY.set(py);
         setVisible(true);
-        feedTrail(px, py);
 
         const target = e.target.closest?.(TARGETS);
         const inside = target && ref.current.contains(target) && target !== ref.current;
@@ -272,7 +115,6 @@ const MagneticCursor = ({
             className={`relative ${visible ? "cursor-none [&_*]:cursor-none" : ""} ${className}`}
         >
             {children}
-            {trail !== "none" && <canvas ref={trailRef} aria-hidden="true" className="pointer-events-none absolute inset-0 z-40 h-full w-full" />}
             <motion.div
                 aria-hidden="true"
                 className="pointer-events-none absolute left-0 top-0 z-50 flex items-center justify-center border-2 text-[0.72rem] font-semibold uppercase tracking-[0.14em]"

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

@@ -0,0 +1,75 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+
+/*
+ * Pixel Transition: hover (or tap) the card and it dissolves into a grid of
+ * pixels that pop in at random, the content swaps underneath, then the
+ * pixels clear away to reveal the second side.
+ */
+
+const IK = "https://ik.imagekit.io/ny6yinyut/apexui/assets";
+
+const DefaultFirst = () => <img src={`${IK}/black-panther.png?tr=f-auto,q-80,w-600`} alt="Black Panther" draggable="false" className="h-full w-full bg-neutral-900 object-cover" />;
+const DefaultSecond = () => (
+    <div className="grid h-full w-full place-items-center bg-neutral-950 p-6 text-center text-white">
+        <div>
+            <p className="text-[0.7rem] font-semibold uppercase tracking-[0.3em] text-white/50">Wakanda</p>
+            <p className="mt-2 text-3xl font-black">Black Panther</p>
+            <p className="mt-2 text-sm text-white/60">King T&apos;Challa, protector of his people.</p>
+        </div>
+    </div>
+);
+
+const shuffle = (arr) => {
+    const a = [...arr];
+    for (let i = a.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [a[i], a[j]] = [a[j], a[i]];
+    }
+    return a;
+};
+
+const PixelTransition = ({ first = <DefaultFirst />, second = <DefaultSecond />, gridSize = 10, pixelColor = "#a3e635", duration = 0.45, aspectRatio = "4 / 5", width = 16, className = "" }) => {
+    const [showSecond, setShowSecond] = useState(false);
+    const pixels = useRef([]);
+    const timers = useRef([]);
+    const target = useRef(false);
+    const cells = useMemo(() => Array.from({ length: gridSize * gridSize }, (_, i) => i), [gridSize]);
+
+    useEffect(() => () => timers.current.forEach(clearTimeout), []);
+
+    const run = (toSecond) => {
+        if (target.current === toSecond) return;
+        target.current = toSecond;
+        timers.current.forEach(clearTimeout);
+        timers.current = [];
+        const half = (duration * 1000) / 2;
+        const order = shuffle(cells);
+        const per = half / order.length;
+        order.forEach((c, k) => timers.current.push(setTimeout(() => pixels.current[c] && (pixels.current[c].style.opacity = "1"), k * per)));
+        timers.current.push(
+            setTimeout(() => {
+                setShowSecond(toSecond);
+                shuffle(cells).forEach((c, k) => timers.current.push(setTimeout(() => pixels.current[c] && (pixels.current[c].style.opacity = "0"), k * per)));
+            }, half + 30),
+        );
+    };
+
+    return (
+        <div
+            className={`relative cursor-pointer overflow-hidden rounded-2xl ring-1 ring-white/10 ${className}`}
+            style={{ aspectRatio, width: `min(${width}rem, 80vw)` }}
+            onPointerEnter={(e) => e.pointerType === "mouse" && run(true)}
+            onPointerLeave={(e) => e.pointerType === "mouse" && run(false)}
+            onClick={() => run(!target.current)}
+        >
+            <div className="absolute inset-0">{showSecond ? second : first}</div>
+            <div className="pointer-events-none absolute inset-0 grid" style={{ gridTemplateColumns: `repeat(${gridSize}, 1fr)`, gridTemplateRows: `repeat(${gridSize}, 1fr)` }} aria-hidden="true">
+                {cells.map((c) => (
+                    <span key={c} ref={(el) => (pixels.current[c] = el)} style={{ background: pixelColor, opacity: 0 }} />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default PixelTransition;

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

@@ -132,7 +132,7 @@ const PointerFollower = ({
                         >
                             <div className="px-4 py-3 rounded-full text-[11px] overflow-hidden font-semibold shadow-[0_2px_8px_rgba(0,0,0,0.25)] border border-black/10" style={{ backgroundColor: badgeColor }}>
                                 <span className="text-[12px] font-medium tracking-wide whitespace-nowrap drop-shadow" style={{ color: badgeTextColor }}>
-                                    {person.name} — {person.job}
+                                    {person.name} none {person.job}
                                 </span>
                             </div>
                         </div>

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

@@ -0,0 +1,115 @@
+import React, { useId, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Check, Sparkles } from "lucide-react";
+
+/*
+ * Pricing Cards: plans side by side with a monthly / yearly switch. Prices
+ * slide to their new value, the featured plan glows, and every card lifts
+ * on hover. Wraps to one column on small screens.
+ */
+
+const DEFAULT_PLANS = [
+    { name: "Starter", monthly: 0, yearly: 0, description: "For side projects and trying things out.", features: ["10 components", "Community support", "MIT licence"], cta: "Start free" },
+    { name: "Pro", monthly: 19, yearly: 15, description: "For freelancers shipping client work.", features: ["All 60+ components", "Figma kit", "Priority support", "Lifetime updates"], cta: "Go Pro", featured: true },
+    { name: "Team", monthly: 49, yearly: 39, description: "For product teams that move fast.", features: ["Everything in Pro", "5 seats", "Private Slack", "Custom requests"], cta: "Contact sales" },
+];
+
+function Price({ value, currency }) {
+    return (
+        <span className="relative inline-flex h-[1.1em] overflow-hidden align-bottom tabular-nums">
+            <AnimatePresence mode="popLayout" initial={false}>
+                <motion.span
+                    key={value}
+                    initial={{ y: "100%", opacity: 0 }}
+                    animate={{ y: 0, opacity: 1 }}
+                    exit={{ y: "-100%", opacity: 0 }}
+                    transition={{ type: "spring", stiffness: 380, damping: 30 }}
+                >
+                    {currency}
+                    {value}
+                </motion.span>
+            </AnimatePresence>
+        </span>
+    );
+}
+
+const PricingCards = ({ plans = DEFAULT_PLANS, currency = "$", yearlyNote = "Save 20%", accentColor = "#a3e635", theme = "dark", onSelect, className = "" }) => {
+    const id = useId();
+    const [yearly, setYearly] = useState(false);
+    const dark = theme !== "light";
+
+    return (
+        <div className={`w-full ${dark ? "text-white" : "text-neutral-900"} ${className}`}>
+            <div className="mb-8 flex items-center justify-center gap-3 text-sm font-medium">
+                <div className={`relative flex rounded-full p-1 ${dark ? "bg-white/[0.06]" : "bg-black/[0.05]"}`} role="radiogroup" aria-label="Billing period">
+                    {[false, true].map((y) => (
+                        <button
+                            key={String(y)}
+                            type="button"
+                            role="radio"
+                            aria-checked={yearly === y}
+                            onClick={() => setYearly(y)}
+                            className={`relative rounded-full px-4 py-1.5 transition-colors ${yearly === y ? "text-neutral-950" : dark ? "text-white/60 hover:text-white" : "text-neutral-500 hover:text-neutral-900"}`}
+                        >
+                            {yearly === y && <motion.span layoutId={`${id}-period`} className="absolute inset-0 rounded-full" style={{ background: accentColor }} transition={{ type: "spring", stiffness: 480, damping: 36 }} />}
+                            <span className="relative">{y ? "Yearly" : "Monthly"}</span>
+                        </button>
+                    ))}
+                </div>
+                <span className="rounded-full px-2 py-0.5 text-[0.72rem] font-semibold" style={{ background: `color-mix(in srgb, ${accentColor} 18%, transparent)`, color: dark ? accentColor : `color-mix(in srgb, ${accentColor} 55%, #000)` }}>
+                    {yearlyNote}
+                </span>
+            </div>
+
+            <div className="grid items-stretch gap-4 [grid-template-columns:repeat(auto-fit,minmax(min(100%,12.5rem),1fr))]">
+                {plans.map((plan) => {
+                    const price = yearly ? plan.yearly : plan.monthly;
+                    return (
+                        <motion.article
+                            key={plan.name}
+                            whileHover={{ y: -6 }}
+                            transition={{ type: "spring", stiffness: 300, damping: 24 }}
+                            className={`relative flex flex-col rounded-3xl border p-6 ${dark ? "bg-neutral-950" : "bg-white"} ${plan.featured ? "" : dark ? "border-white/10" : "border-black/10"}`}
+                            style={plan.featured ? { borderColor: accentColor, boxShadow: `0 0 0 1px ${accentColor}, 0 24px 60px -24px ${accentColor}88` } : undefined}
+                        >
+                            {plan.featured && (
+                                <span className="absolute -top-3 left-6 inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-[0.7rem] font-bold text-neutral-950" style={{ background: accentColor }}>
+                                    <Sparkles className="h-3 w-3" /> Most popular
+                                </span>
+                            )}
+                            <h3 className="text-lg font-semibold">{plan.name}</h3>
+                            <p className={`mt-1 text-[0.85rem] ${dark ? "text-white/55" : "text-neutral-500"}`}>{plan.description}</p>
+                            <p className="mt-5 flex items-end gap-1.5">
+                                <span className="text-4xl font-bold tracking-tight">
+                                    <Price value={price} currency={currency} />
+                                </span>
+                                <span className={`mb-1 text-sm ${dark ? "text-white/45" : "text-neutral-400"}`}>/ month</span>
+                            </p>
+                            <p className={`h-5 text-[0.75rem] ${dark ? "text-white/40" : "text-neutral-400"}`}>{yearly && price > 0 ? `${currency}${price * 12} billed yearly` : ""}</p>
+                            <ul className="mt-5 flex-1 space-y-2.5 text-[0.88rem]">
+                                {plan.features.map((f) => (
+                                    <li key={f} className="flex items-start gap-2.5">
+                                        <span className="mt-0.5 grid h-4 w-4 shrink-0 place-items-center rounded-full" style={{ background: `color-mix(in srgb, ${accentColor} 22%, transparent)` }}>
+                                            <Check className="h-3 w-3" style={{ color: dark ? accentColor : `color-mix(in srgb, ${accentColor} 50%, #000)` }} />
+                                        </span>
+                                        <span className={dark ? "text-white/80" : "text-neutral-700"}>{f}</span>
+                                    </li>
+                                ))}
+                            </ul>
+                            <button
+                                type="button"
+                                onClick={() => onSelect?.(plan, yearly ? "yearly" : "monthly")}
+                                className={`mt-6 h-11 rounded-full text-sm font-semibold transition-[transform,filter] duration-200 hover:brightness-105 active:scale-[0.97] ${plan.featured ? "text-neutral-950" : dark ? "bg-white/[0.08] text-white hover:bg-white/[0.12]" : "bg-black/[0.05] text-neutral-900 hover:bg-black/[0.08]"}`}
+                                style={plan.featured ? { background: accentColor } : undefined}
+                            >
+                                {plan.cta}
+                            </button>
+                        </motion.article>
+                    );
+                })}
+            </div>
+        </div>
+    );
+};
+
+export default PricingCards;

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

@@ -0,0 +1,66 @@
+import React, { useEffect, useRef } from "react";
+
+/*
+ * Proximity Text: letters swell, lift and light up as the pointer gets
+ * close, falling off smoothly with distance — like a magnifier sliding
+ * over the line. Works on touch too (drag a finger across).
+ */
+
+const ProximityText = ({ text = "Hover over these letters", radius = 110, maxScale = 1.6, lift = 0.18, color = "currentColor", activeColor = "#a3e635", className = "" }) => {
+    const wrap = useRef(null);
+    const letters = useRef([]);
+    const pointer = useRef(null);
+
+    useEffect(() => {
+        let raf = 0;
+        const amounts = letters.current.map(() => 0);
+        const tick = () => {
+            const p = pointer.current;
+            letters.current.forEach((el, i) => {
+                if (!el) return;
+                let target = 0;
+                if (p) {
+                    const r = el.getBoundingClientRect();
+                    const d = Math.hypot(p.x - (r.left + r.width / 2), p.y - (r.top + r.height / 2));
+                    target = Math.max(0, 1 - d / radius);
+                    target = target * target * (3 - 2 * target); // smoothstep
+                }
+                amounts[i] += (target - amounts[i]) * 0.2;
+                const a = amounts[i];
+                el.style.transform = `translateY(${-a * lift}em) scale(${1 + a * (maxScale - 1)})`;
+                el.style.color = a > 0.02 ? `color-mix(in srgb, ${activeColor} ${Math.round(a * 100)}%, ${color})` : "";
+            });
+            raf = requestAnimationFrame(tick);
+        };
+        raf = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(raf);
+    }, [radius, maxScale, lift, color, activeColor]);
+
+    const words = text.split(" ");
+    let n = 0;
+    return (
+        <span
+            ref={wrap}
+            className={`inline-flex touch-none flex-wrap justify-center gap-x-[0.3em] font-bold ${className}`}
+            style={{ color }}
+            onPointerMove={(e) => (pointer.current = { x: e.clientX, y: e.clientY })}
+            onPointerLeave={() => (pointer.current = null)}
+            aria-label={text}
+        >
+            {words.map((w, wi) => (
+                <span key={wi} className="inline-flex" aria-hidden="true">
+                    {Array.from(w).map((c) => {
+                        const k = n++;
+                        return (
+                            <span key={k} ref={(el) => (letters.current[k] = el)} className="inline-block origin-bottom will-change-transform">
+                                {c}
+                            </span>
+                        );
+                    })}
+                </span>
+            ))}
+        </span>
+    );
+};
+
+export default ProximityText;

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

@@ -0,0 +1,50 @@
+import React, { useEffect, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+
+/*
+ * Rotating Text: a phrase whose last word swaps on a timer. Each letter of
+ * the new word springs up from below while the old one slides out, and the
+ * highlight pill resizes smoothly to fit.
+ */
+
+const RotatingText = ({ prefix = "Build", words = ["faster", "smarter", "together", "with ApexUI"], interval = 2200, stagger = 0.025, from = "first", accentColor = "#a3e635", textColor = "#0a0a0a", className = "" }) => {
+    const [i, setI] = useState(0);
+    useEffect(() => {
+        const id = setInterval(() => setI((n) => (n + 1) % words.length), interval);
+        return () => clearInterval(id);
+    }, [words.length, interval]);
+
+    const word = words[i];
+    const chars = Array.from(word);
+    const delayFor = (k) => {
+        const n = chars.length - 1;
+        const order = from === "last" ? n - k : from === "center" ? Math.abs(k - n / 2) : k;
+        return order * stagger;
+    };
+
+    return (
+        <span className={`inline-flex flex-wrap items-center gap-x-[0.3em] font-bold ${className}`}>
+            {prefix && <span>{prefix}</span>}
+            <motion.span layout transition={{ type: "spring", stiffness: 300, damping: 30 }} className="relative inline-flex overflow-hidden rounded-[0.35em] px-[0.35em] py-[0.08em]" style={{ background: accentColor, color: textColor }}>
+                <AnimatePresence mode="popLayout" initial={false}>
+                    <motion.span key={word} className="inline-flex whitespace-pre" aria-label={word}>
+                        {chars.map((c, k) => (
+                            <motion.span
+                                key={k}
+                                aria-hidden="true"
+                                className="inline-block"
+                                initial={{ y: "110%", opacity: 0 }}
+                                animate={{ y: 0, opacity: 1, transition: { type: "spring", stiffness: 420, damping: 30, delay: delayFor(k) } }}
+                                exit={{ y: "-120%", opacity: 0, transition: { duration: 0.22, ease: "easeIn", delay: delayFor(k) * 0.6 } }}
+                            >
+                                {c}
+                            </motion.span>
+                        ))}
+                    </motion.span>
+                </AnimatePresence>
+            </motion.span>
+        </span>
+    );
+};
+
+export default RotatingText;

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

@@ -0,0 +1,36 @@
+import React from "react";
+import { motion, useReducedMotion } from "framer-motion";
+
+/*
+ * Shiny Text: a bright band of light sweeps across the text on a loop, like
+ * light catching metal. The band starts and ends fully outside the text, so
+ * the loop is seamless — it never pauses on the last letters or jumps back.
+ */
+
+const ShinyText = ({ text = "Shipping soon, join the waitlist", as = "span", speed = 2.8, color = "#71717a", shineColor = "#ffffff", spread = 10, pause = 0.6, disabled = false, className = "" }) => {
+    const reduced = useReducedMotion();
+    const Tag = motion[as] ?? motion.span;
+    const still = disabled || reduced;
+    // The gradient is 3× the text width with the band in its middle. Moving the
+    // background from 100% to 0% carries the band from fully left of the text
+    // to fully right of it, so both ends of the loop look identical.
+    const band = Math.min(16, Math.max(4, spread));
+    return (
+        <Tag
+            className={`inline-block bg-clip-text text-transparent ${className}`}
+            style={{
+                backgroundImage: `linear-gradient(100deg, ${color} ${50 - band}%, ${shineColor} 50%, ${color} ${50 + band}%)`,
+                backgroundSize: "300% 100%",
+                backgroundRepeat: "no-repeat",
+                WebkitBackgroundClip: "text",
+                backgroundPosition: "100% 0",
+            }}
+            animate={still ? { backgroundPosition: "100% 0" } : { backgroundPosition: ["100% 0", "0% 0"] }}
+            transition={still ? undefined : { duration: speed, ease: "linear", repeat: Infinity, repeatDelay: pause }}
+        >
+            {text}
+        </Tag>
+    );
+};
+
+export default ShinyText;

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

@@ -0,0 +1,33 @@
+import React from "react";
+import { motion, useReducedMotion } from "framer-motion";
+
+/*
+ * Star Border: two soft points of light travel along the top and bottom
+ * edges of a button in opposite directions, like stars sliding around its
+ * rim. Renders a <button> by default; pass `as="a"` for a link.
+ */
+
+const StarBorder = ({ as = "button", color = "#a3e635", speed = 5, thickness = 1.5, theme = "dark", children = "Get started", className = "", ...rest }) => {
+    const reduced = useReducedMotion();
+    const Tag = as;
+    const dark = theme !== "light";
+    const star = (dir) => ({
+        background: `radial-gradient(circle, ${color}, transparent 10%)`,
+        animate: reduced ? undefined : { x: dir > 0 ? ["-35%", "35%"] : ["35%", "-35%"], opacity: [0, 1, 1, 0] },
+        transition: { duration: speed, ease: "linear", repeat: Infinity, times: [0, 0.15, 0.85, 1] },
+    });
+    const top = star(-1);
+    const bottom = star(1);
+
+    return (
+        <Tag className={`group relative inline-block overflow-hidden rounded-[1.1rem] ${className}`} style={{ padding: `${thickness}px 0` }} {...(as === "button" ? { type: "button" } : {})} {...rest}>
+            <motion.span aria-hidden="true" className="pointer-events-none absolute -bottom-[11px] left-[-100%] h-1/2 w-[300%] opacity-70" style={{ background: bottom.background }} animate={bottom.animate} transition={bottom.transition} />
+            <motion.span aria-hidden="true" className="pointer-events-none absolute -top-[10px] left-[-100%] h-1/2 w-[300%] opacity-70" style={{ background: top.background }} animate={top.animate} transition={top.transition} />
+            <span className={`relative z-[1] block rounded-[1.1rem] border px-7 py-3.5 text-center text-[0.95rem] font-semibold transition-colors ${dark ? "border-white/10 bg-gradient-to-b from-neutral-900 to-black text-white group-hover:border-white/20" : "border-black/10 bg-gradient-to-b from-white to-neutral-100 text-neutral-900 group-hover:border-black/20"}`}>
+                {children}
+            </span>
+        </Tag>
+    );
+};
+
+export default StarBorder;