apex-ui-kit 2.1.3 → 2.2.0

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

@@ -0,0 +1,306 @@
+import React, { useEffect, 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.
+ */
+
+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",
+    ringSize = 2.25,
+    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);
+
+    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);
+        feedTrail(px, py);
+
+        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}
+            {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]"
+                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/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;