apex-ui-kit 2.1.3 → 2.3.0

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

@@ -0,0 +1,148 @@
+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. Touch devices keep their normal behaviour.
+ */
+
+const TARGETS = "a, button, [role='button'], [data-cursor], [data-cursor-text], [data-magnetic]";
+
+const MagneticCursor = ({
+    children,
+    color = "#a3e635",
+    ringSize = 2.25,
+    padding = 6,
+    magnetStrength = 0.35,
+    blend = false,
+    className = "",
+}) => {
+    const ref = useRef(null);
+    const magnet = useRef(null);
+    const reduced = useReducedMotion();
+    const [visible, setVisible] = useState(false);
+    const [label, setLabel] = useState("");
+    const [pressed, setPressed] = useState(false);
+
+    const springy = reduced ? { duration: 0 } : { stiffness: 420, damping: 34, mass: 0.6 };
+    const dotX = useMotionValue(-100);
+    const dotY = useMotionValue(-100);
+    const x = useSpring(-100, springy);
+    const y = useSpring(-100, springy);
+    const w = useSpring(36, springy);
+    const h = useSpring(36, springy);
+    const radius = useSpring(18, springy);
+
+    const ringPx = () => ringSize * parseFloat(getComputedStyle(document.documentElement).fontSize || "16");
+
+    const releaseMagnet = () => {
+        if (magnet.current) {
+            magnet.current.style.transform = "";
+            magnet.current = null;
+        }
+    };
+
+    const onMove = (e) => {
+        if (e.pointerType !== "mouse") return;
+        const box = ref.current.getBoundingClientRect();
+        const px = e.clientX - box.left;
+        const py = e.clientY - box.top;
+        dotX.set(px);
+        dotY.set(py);
+        setVisible(true);
+
+        const target = e.target.closest?.(TARGETS);
+        const inside = target && ref.current.contains(target) && target !== ref.current;
+        const text = inside ? target.getAttribute("data-cursor-text") : null;
+
+        if (inside && target.hasAttribute("data-magnetic")) {
+            const r = target.getBoundingClientRect();
+            const mx = (e.clientX - (r.left + r.width / 2)) * magnetStrength;
+            const my = (e.clientY - (r.top + r.height / 2)) * magnetStrength;
+            target.style.transition = "transform 0.2s ease-out";
+            target.style.transform = `translate(${mx}px, ${my}px)`;
+            if (magnet.current !== target) releaseMagnet();
+            magnet.current = target;
+        } else {
+            releaseMagnet();
+        }
+
+        if (text) {
+            // Big labelled bubble that follows the pointer.
+            const size = ringPx() * 2.2;
+            setLabel(text);
+            x.set(px - size / 2);
+            y.set(py - size / 2);
+            w.set(size);
+            h.set(size);
+            radius.set(size / 2);
+        } else if (inside) {
+            // Wrap the hovered element (it may be shifted by the magnet).
+            const r = target.getBoundingClientRect();
+            const br = parseFloat(getComputedStyle(target).borderTopLeftRadius) || 8;
+            setLabel("");
+            x.set(r.left - box.left - padding);
+            y.set(r.top - box.top - padding);
+            w.set(r.width + padding * 2);
+            h.set(r.height + padding * 2);
+            radius.set(Math.min(br + padding, (r.height + padding * 2) / 2));
+        } else {
+            const size = ringPx();
+            setLabel("");
+            x.set(px - size / 2);
+            y.set(py - size / 2);
+            w.set(size);
+            h.set(size);
+            radius.set(size / 2);
+        }
+    };
+
+    const onLeave = () => {
+        setVisible(false);
+        setLabel("");
+        releaseMagnet();
+    };
+
+    return (
+        <div
+            ref={ref}
+            onPointerMove={onMove}
+            onPointerLeave={onLeave}
+            onPointerDown={(e) => e.pointerType === "mouse" && setPressed(true)}
+            onPointerUp={() => setPressed(false)}
+            className={`relative ${visible ? "cursor-none [&_*]:cursor-none" : ""} ${className}`}
+        >
+            {children}
+            <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]"
+                style={{
+                    x,
+                    y,
+                    width: w,
+                    height: h,
+                    borderRadius: radius,
+                    borderColor: color,
+                    color: "#0a0a0a",
+                    background: label ? color : `color-mix(in srgb, ${color} 12%, transparent)`,
+                    mixBlendMode: blend ? "difference" : "normal",
+                }}
+                animate={{ opacity: visible ? 1 : 0, scale: pressed ? 0.88 : 1 }}
+                transition={{ duration: 0.18 }}
+            >
+                {label}
+            </motion.div>
+            <motion.div
+                aria-hidden="true"
+                className="pointer-events-none absolute -left-1 -top-1 z-50 h-2 w-2 rounded-full"
+                style={{ x: dotX, y: dotY, background: color }}
+                animate={{ opacity: visible && !label ? 1 : 0 }}
+                transition={{ duration: 0.12 }}
+            />
+        </div>
+    );
+};
+
+export default MagneticCursor;

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

@@ -0,0 +1,213 @@
+import React, { useEffect, useId, useMemo, useState } from "react";
+import { animate, motion, useMotionValue, useReducedMotion, useSpring, useTransform } from "framer-motion";
+import { Check, Github, Linkedin, MapPin, Plus, Twitter } from "lucide-react";
+
+/*
+ * Profile Card: one profile, two looks.
+ *  card    – cover, avatar, bio, stats, socials and a Follow button, with a soft 3D tilt
+ *  lanyard – the same person as an ID badge hanging from a ribbon; drag it and
+ *            let go to watch it swing back like a pendulum
+ */
+
+const DEFAULT_PROFILE = {
+    name: "Mohan Dalei",
+    role: "Frontend Engineer",
+    company: "ApexUI",
+    location: "Bhubaneswar, India",
+    bio: "Building animated React components that feel alive. Coffee, motion and clean code.",
+    avatar: "https://ik.imagekit.io/ny6yinyut/apexui/assets/black-panther.png?tr=f-auto,q-80,w-320",
+    id: "APX-0042",
+    stats: [
+        { label: "Projects", value: "48" },
+        { label: "Followers", value: "12.8k" },
+        { label: "Stars", value: "3.2k" },
+    ],
+    socials: [
+        { icon: Github, href: "#", label: "GitHub" },
+        { icon: Twitter, href: "#", label: "Twitter" },
+        { icon: Linkedin, href: "#", label: "LinkedIn" },
+    ],
+};
+
+// Stable pseudo-random barcode bars from a string.
+const barsFrom = (seed) => {
+    let h = 2166136261;
+    for (const ch of seed) h = Math.imul(h ^ ch.charCodeAt(0), 16777619);
+    return Array.from({ length: 34 }, (_, i) => 1 + (((h >>> (i % 24)) ^ (i * 7)) & 3));
+};
+
+function CardVariant({ p, color, theme }) {
+    const [following, setFollowing] = useState(false);
+    const reduced = useReducedMotion();
+    const rx = useSpring(0, { stiffness: 200, damping: 20 });
+    const ry = useSpring(0, { stiffness: 200, damping: 20 });
+    const dark = theme !== "light";
+
+    const onMove = (e) => {
+        if (reduced || e.pointerType !== "mouse") return;
+        const r = e.currentTarget.getBoundingClientRect();
+        ry.set(((e.clientX - r.left) / r.width - 0.5) * 10);
+        rx.set(-((e.clientY - r.top) / r.height - 0.5) * 10);
+    };
+
+    return (
+        <div style={{ perspective: 1000 }}>
+            <motion.article
+                onPointerMove={onMove}
+                onPointerLeave={() => {
+                    rx.set(0);
+                    ry.set(0);
+                }}
+                style={{ rotateX: rx, rotateY: ry }}
+                className={`w-[min(21rem,88vw)] overflow-hidden rounded-3xl border shadow-[0_30px_60px_-30px_rgba(0,0,0,0.5)] ${dark ? "border-white/10 bg-neutral-950 text-white" : "border-black/10 bg-white text-neutral-900"}`}
+            >
+                <div className="relative h-24" style={{ background: `radial-gradient(120% 140% at 0% 0%, ${color}, transparent 60%), radial-gradient(120% 140% at 100% 0%, #6366f1, transparent 60%), ${dark ? "#111" : "#eee"}` }}>
+                    <div className="absolute inset-0 opacity-30 [background-image:radial-gradient(rgba(255,255,255,.6)_1px,transparent_1px)] [background-size:12px_12px]" />
+                </div>
+                <div className="px-6 pb-6">
+                    <div className="-mt-11 flex items-end justify-between">
+                        <div className="relative">
+                            <img src={p.avatar} alt="" className={`h-[5.5rem] w-[5.5rem] rounded-full object-cover ring-4 ${dark ? "bg-neutral-800 ring-neutral-950" : "bg-neutral-200 ring-white"}`} />
+                            <span className={`absolute bottom-1.5 right-1.5 h-3.5 w-3.5 rounded-full bg-emerald-400 ring-[3px] ${dark ? "ring-neutral-950" : "ring-white"}`} aria-label="Online" />
+                        </div>
+                        <motion.button
+                            type="button"
+                            onClick={() => setFollowing((f) => !f)}
+                            whileTap={{ scale: 0.94 }}
+                            layout
+                            className="mb-1 inline-flex h-9 items-center gap-1.5 rounded-full px-4 text-[0.8rem] font-semibold"
+                            style={following ? { background: "transparent", color: dark ? "#fff" : "#111", boxShadow: `inset 0 0 0 1.5px ${dark ? "rgba(255,255,255,.25)" : "rgba(0,0,0,.2)"}` } : { background: color, color: "#0a0a0a" }}
+                        >
+                            {following ? <Check className="h-3.5 w-3.5" /> : <Plus className="h-3.5 w-3.5" />}
+                            {following ? "Following" : "Follow"}
+                        </motion.button>
+                    </div>
+                    <h3 className="mt-3 text-lg font-semibold leading-tight">{p.name}</h3>
+                    <p className={`text-[0.85rem] ${dark ? "text-white/55" : "text-neutral-500"}`}>
+                        {p.role} · {p.company}
+                    </p>
+                    {p.location && (
+                        <p className={`mt-1 flex items-center gap-1 text-[0.78rem] ${dark ? "text-white/45" : "text-neutral-400"}`}>
+                            <MapPin className="h-3.5 w-3.5" /> {p.location}
+                        </p>
+                    )}
+                    {p.bio && <p className={`mt-3 text-[0.85rem] leading-relaxed ${dark ? "text-white/75" : "text-neutral-600"}`}>{p.bio}</p>}
+                    <dl className={`mt-4 grid grid-cols-3 divide-x rounded-2xl py-3 text-center ${dark ? "divide-white/10 bg-white/[0.04]" : "divide-black/10 bg-black/[0.03]"}`}>
+                        {p.stats?.map((s) => (
+                            <div key={s.label}>
+                                <dd className="text-[1rem] font-semibold">{s.value}</dd>
+                                <dt className={`text-[0.7rem] ${dark ? "text-white/45" : "text-neutral-500"}`}>{s.label}</dt>
+                            </div>
+                        ))}
+                    </dl>
+                    <div className="mt-4 flex gap-2">
+                        {p.socials?.map(({ icon: Icon, href, label }) => (
+                            <a key={label} href={href} aria-label={label} className={`grid h-9 w-9 place-items-center rounded-full transition hover:-translate-y-0.5 ${dark ? "bg-white/[0.06] hover:bg-white/[0.12]" : "bg-black/[0.04] hover:bg-black/[0.08]"}`}>
+                                <Icon className="h-4 w-4" />
+                            </a>
+                        ))}
+                    </div>
+                </div>
+            </motion.article>
+        </div>
+    );
+}
+
+function LanyardVariant({ p, color, theme, strapLength }) {
+    const pathId = `strap-${useId().replace(/[^a-zA-Z0-9-]/g, "")}`;
+    const reduced = useReducedMotion();
+    const x = useMotionValue(0);
+    const y = useMotionValue(reduced ? 0 : -140);
+    const length = strapLength * 16;
+    const bars = useMemo(() => barsFrom(p.id || p.name), [p.id, p.name]);
+    const dark = theme !== "light";
+    const swing = { type: "spring", stiffness: 90, damping: 5, mass: 1 };
+
+    // Drop in on mount.
+    useEffect(() => {
+        if (reduced) return undefined;
+        const a = animate(y, 0, { type: "spring", stiffness: 120, damping: 9 });
+        return () => a.stop();
+    }, [reduced, y]);
+
+    // The badge hangs along the strap, so its angle follows its offset.
+    const rotate = useTransform([x, y], ([vx, vy]) => (-Math.atan2(vx, Math.max(40, length + vy)) * 180) / Math.PI);
+    const d = useTransform([x, y], ([vx, vy]) => {
+        const ex = 160 + vx;
+        const ey = length + vy;
+        return `M160 0 Q ${160 + vx * 0.35} ${ey * 0.55} ${ex} ${ey}`;
+    });
+
+    return (
+        <div className="relative flex w-[20rem] max-w-full justify-center" style={{ height: `${strapLength + 22}rem` }}>
+            <svg className="pointer-events-none absolute left-1/2 top-0 -translate-x-1/2 overflow-visible" width="320" height={length + 40} aria-hidden="true">
+                <defs>
+                    <motion.path id={pathId} d={d} />
+                </defs>
+                <motion.path d={d} fill="none" stroke={color} strokeWidth="26" strokeLinecap="butt" />
+                <motion.path d={d} fill="none" stroke="rgba(0,0,0,0.18)" strokeWidth="26" strokeDasharray="2 10" />
+                <text fontSize="11" fontWeight="800" letterSpacing="3" fill="#0a0a0a" dy="4">
+                    <textPath href={`#${pathId}`} startOffset="8">
+                        {`${(p.company || "APEXUI").toUpperCase()} • `.repeat(6)}
+                    </textPath>
+                </text>
+                <rect x="148" y="-6" width="24" height="14" rx="3" fill={dark ? "#2a2a2a" : "#bbb"} />
+            </svg>
+
+            <motion.div
+                drag
+                dragMomentum={false}
+                onDragEnd={() => {
+                    animate(x, 0, swing);
+                    animate(y, 0, swing);
+                }}
+                whileDrag={{ cursor: "grabbing" }}
+                className="absolute left-1/2 cursor-grab touch-none"
+                style={{ x, y, rotate, top: length, marginLeft: "-7.25rem", transformOrigin: "50% 0%" }}
+            >
+                {/* Metal clip */}
+                <div className="mx-auto h-5 w-9 rounded-b-md rounded-t-sm bg-gradient-to-b from-neutral-300 to-neutral-500 shadow-inner" />
+                <article className={`-mt-1 w-[14.5rem] overflow-hidden rounded-2xl border shadow-[0_30px_60px_-24px_rgba(0,0,0,0.6)] ${dark ? "border-white/10 bg-neutral-950 text-white" : "border-black/10 bg-white text-neutral-900"}`}>
+                    <div className="relative h-16 px-4 pt-3" style={{ background: color }}>
+                        <span className="mx-auto block h-2.5 w-12 rounded-full bg-black/25" aria-hidden="true" />
+                        <p className="mt-2 flex items-center justify-between text-[0.7rem] font-black uppercase tracking-[0.2em] text-black/80">
+                            <span>{p.company}</span>
+                            <span>Staff</span>
+                        </p>
+                    </div>
+                    <div className="px-5 pb-5">
+                        <img src={p.avatar} alt="" draggable="false" className={`relative -mt-8 h-24 w-24 rounded-2xl object-cover ring-4 ${dark ? "bg-neutral-800 ring-neutral-950" : "bg-neutral-200 ring-white"}`} />
+                        <h3 className="mt-3 text-[1.05rem] font-bold leading-tight">{p.name}</h3>
+                        <p className={`text-[0.78rem] ${dark ? "text-white/55" : "text-neutral-500"}`}>{p.role}</p>
+                        <div className={`mt-3 grid grid-cols-2 gap-2 text-[0.68rem] ${dark ? "text-white/45" : "text-neutral-500"}`}>
+                            <div>
+                                <p className="uppercase tracking-wider">ID</p>
+                                <p className={`font-mono text-[0.78rem] font-semibold ${dark ? "text-white" : "text-neutral-900"}`}>{p.id}</p>
+                            </div>
+                            <div>
+                                <p className="uppercase tracking-wider">Location</p>
+                                <p className={`truncate text-[0.78rem] font-semibold ${dark ? "text-white" : "text-neutral-900"}`}>{p.location?.split(",")[0]}</p>
+                            </div>
+                        </div>
+                        <div className="mt-4 flex h-9 items-stretch gap-[2px]" aria-hidden="true">
+                            {bars.map((w, i) => (
+                                <span key={i} className={dark ? "bg-white/80" : "bg-neutral-900"} style={{ width: w, opacity: i % 5 === 0 ? 0.5 : 1 }} />
+                            ))}
+                        </div>
+                    </div>
+                </article>
+            </motion.div>
+        </div>
+    );
+}
+
+const ProfileCard = ({ variant = "card", profile = DEFAULT_PROFILE, color = "#a3e635", theme = "dark", strapLength = 10, className = "" }) => {
+    const p = { ...DEFAULT_PROFILE, ...profile };
+    return (
+        <div className={`flex justify-center ${className}`}>
+            {variant === "lanyard" ? <LanyardVariant p={p} color={color} theme={theme} strapLength={strapLength} /> : <CardVariant p={p} color={color} theme={theme} />}
+        </div>
+    );
+};
+
+export default ProfileCard;