apex-ui-kit 2.1.3 → 2.3.0

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

@@ -0,0 +1,166 @@
+import React, { useEffect, useRef, useState } from "react";
+import { animate, motion, useMotionValue, useMotionValueEvent, useReducedMotion } from "framer-motion";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+/*
+ * Cube Gallery: up to six images on a solid 3D cube seen from a corner, so
+ * three faces show at once. It spins slowly on its own; drag in any
+ * direction to throw it around, and it eases back to a corner view. Faces
+ * are shaded by how much they turn away from you, which sells the depth.
+ * Arrows / arrow keys turn it a quarter at a time.
+ */
+
+const IK = "https://ik.imagekit.io/ny6yinyut/apexui/assets";
+const img = (n) => `${IK}/${n}.png?tr=f-auto,q-80,w-600`;
+const DEFAULT_FACES = [
+    { image: img("spiderman"), title: "Spider-Man" },
+    { image: img("black-panther"), title: "Black Panther" },
+    { image: img("hulk"), title: "Hulk" },
+    { image: img("thanos"), title: "Thanos" },
+    { image: img("captainamerica"), title: "Captain America" },
+    { image: img("doctorStrange"), title: "Doctor Strange" },
+];
+
+// Side faces (around Y) then top and bottom.
+const SIDES = [
+    { yaw: 0, pitch: 0 },
+    { yaw: 90, pitch: 0 },
+    { yaw: 180, pitch: 0 },
+    { yaw: 270, pitch: 0 },
+    { yaw: 0, pitch: 90 },
+    { yaw: 0, pitch: -90 },
+];
+const RAD = Math.PI / 180;
+
+const CubeGallery = ({ faces = DEFAULT_FACES, size = 13, autoRotate = true, speed = 12, tilt = -24, accentColor = "#a3e635", className = "" }) => {
+    const reduced = useReducedMotion();
+    const rotY = useMotionValue(-35);
+    const rotX = useMotionValue(tilt);
+    const shades = useRef([]);
+    const drag = useRef(null);
+    const [hover, setHover] = useState(false);
+    const [index, setIndex] = useState(0);
+    const half = `${size / 2}rem`;
+
+    // Darken each face by how far it turns from the viewer.
+    const shade = () => {
+        const y = rotY.get();
+        const x = rotX.get();
+        SIDES.forEach((s, i) => {
+            const el = shades.current[i];
+            if (!el) return;
+            let facing;
+            if (s.pitch === 0) facing = Math.cos((s.yaw + y) * RAD) * Math.cos(x * RAD);
+            else facing = Math.sin((s.pitch > 0 ? -x : x) * RAD);
+            el.style.opacity = String(0.08 + (1 - Math.max(0, facing)) * 0.62);
+        });
+    };
+    useMotionValueEvent(rotY, "change", shade);
+    useMotionValueEvent(rotX, "change", shade);
+    useEffect(shade);
+
+    useEffect(() => {
+        rotX.set(tilt);
+    }, [tilt, rotX]);
+
+    // Slow continuous spin while idle.
+    useEffect(() => {
+        if (!autoRotate || hover || reduced) return undefined;
+        let raf = 0;
+        let last = performance.now();
+        const tick = (now) => {
+            if (!drag.current) rotY.set(rotY.get() - ((now - last) / 1000) * speed);
+            last = now;
+            raf = requestAnimationFrame(tick);
+        };
+        raf = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(raf);
+    }, [autoRotate, hover, reduced, speed, rotY]);
+
+    const turn = (dir) => {
+        // Land on the next corner view, 90° along.
+        const target = Math.round((rotY.get() + 35) / 90) * 90 - 35 - dir * 90;
+        animate(rotY, target, { type: "spring", stiffness: 110, damping: 18 });
+        animate(rotX, tilt, { type: "spring", stiffness: 110, damping: 18 });
+        setIndex((i) => (((i + dir) % 4) + 4) % 4);
+    };
+
+    return (
+        <div
+            className={`flex flex-col items-center gap-12 outline-none ${className}`}
+            tabIndex={0}
+            onKeyDown={(e) => {
+                if (e.key === "ArrowRight") turn(1);
+                if (e.key === "ArrowLeft") turn(-1);
+            }}
+            onPointerEnter={() => setHover(true)}
+            onPointerLeave={() => setHover(false)}
+            aria-roledescription="carousel"
+            aria-label="Cube gallery"
+        >
+            <div className="relative [perspective:1100px]" style={{ width: `${size}rem`, height: `${size}rem`, maxWidth: "60vw", maxHeight: "60vw", margin: `${size * 0.16}rem 0` }}>
+                {/* Soft floor shadow */}
+                <div className="pointer-events-none absolute -bottom-[22%] left-1/2 h-[18%] w-[95%] -translate-x-1/2 rounded-[50%] bg-black/40 blur-xl" />
+                <motion.div
+                    className="relative h-full w-full cursor-grab touch-none active:cursor-grabbing [transform-style:preserve-3d]"
+                    style={{ rotateX: rotX, rotateY: rotY }}
+                    onPointerDown={(e) => {
+                        e.currentTarget.setPointerCapture(e.pointerId);
+                        rotY.stop();
+                        rotX.stop();
+                        drag.current = { x: e.clientX, y: e.clientY, sx: rotY.get(), sy: rotX.get(), vx: 0, vy: 0, t: performance.now(), lx: e.clientX, ly: e.clientY };
+                    }}
+                    onPointerMove={(e) => {
+                        const d = drag.current;
+                        if (!d) return;
+                        rotY.set(d.sx + (e.clientX - d.x) * 0.5);
+                        rotX.set(Math.max(-70, Math.min(70, d.sy - (e.clientY - d.y) * 0.4)));
+                        const now = performance.now();
+                        const dt = Math.max(1, now - d.t);
+                        d.vx = ((e.clientX - d.lx) / dt) * 0.5 * 1000;
+                        d.vy = ((e.clientY - d.ly) / dt) * 0.4 * 1000;
+                        d.t = now;
+                        d.lx = e.clientX;
+                        d.ly = e.clientY;
+                    }}
+                    onPointerUp={() => {
+                        const d = drag.current;
+                        if (!d) return;
+                        drag.current = null;
+                        // Throw with momentum, then settle back to the corner tilt.
+                        animate(rotY, rotY.get() + d.vx * 0.35, { type: "spring", stiffness: 40, damping: 16 });
+                        animate(rotX, tilt, { type: "spring", stiffness: 70, damping: 14 });
+                    }}
+                >
+                    {SIDES.map((s, i) => {
+                        const f = faces[i % faces.length];
+                        const transform = s.pitch ? `rotateX(${s.pitch}deg) translateZ(${half})` : `rotateY(${s.yaw}deg) translateZ(${half})`;
+                        return (
+                            <figure key={i} className="absolute inset-0 m-0 overflow-hidden bg-neutral-900 [backface-visibility:hidden]" style={{ transform, boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.14)" }}>
+                                <img src={f.image} alt={f.title} draggable="false" className="h-full w-full select-none object-cover" />
+                                <figcaption className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/75 to-transparent px-3 pb-2.5 pt-8 text-[0.8rem] font-semibold text-white">{f.title}</figcaption>
+                                <span ref={(el) => (shades.current[i] = el)} className="pointer-events-none absolute inset-0 bg-black" style={{ opacity: 0.3 }} />
+                            </figure>
+                        );
+                    })}
+                </motion.div>
+            </div>
+
+            <div className="flex items-center gap-4">
+                <button type="button" aria-label="Turn left" onClick={() => turn(-1)} className="grid h-10 w-10 place-items-center rounded-full border border-current/20 transition hover:scale-105 active:scale-95">
+                    <ChevronLeft className="h-5 w-5" />
+                </button>
+                <div className="flex gap-1.5" aria-hidden="true">
+                    {[0, 1, 2, 3].map((i) => (
+                        <span key={i} className="h-2 rounded-full transition-all duration-300" style={{ width: i === index ? 22 : 8, background: i === index ? accentColor : "color-mix(in srgb, currentColor 25%, transparent)" }} />
+                    ))}
+                </div>
+                <button type="button" aria-label="Turn right" onClick={() => turn(1)} className="grid h-10 w-10 place-items-center rounded-full border border-current/20 transition hover:scale-105 active:scale-95">
+                    <ChevronRight className="h-5 w-5" />
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default CubeGallery;

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

@@ -0,0 +1,200 @@
+import React, { useEffect, useRef } from "react";
+
+/*
+ * Cursor Trail: a tail that follows the mouse — comet, rainbow, dots, ribbon,
+ * sparkles or ghost rings. Wrap an area with it, or pass `global` to follow
+ * the pointer across the whole page. Everything is drawn on one canvas and
+ * the loop sleeps as soon as the tail has faded. Touch input is ignored.
+ */
+
+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}`;
+};
+
+const CursorTrail = ({ children, variant = "comet", color = "#a3e635", size = 1, length = 1, global = false, className = "" }) => {
+    const wrapRef = useRef(null);
+    const canvasRef = useRef(null);
+
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        const target = global ? window : wrapRef.current;
+        if (!canvas || !target || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return undefined;
+        const ctx = canvas.getContext("2d");
+        const rgb = hexToRgb(color);
+        const s = { points: [], chain: [], parts: [], rings: [], last: null, raf: 0, spawn: 0 };
+        const life = 320 * length;
+
+        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();
+
+        // Points that each ease toward the one ahead: used by dots and ribbon.
+        const follow = (count, ease) => {
+            if (!s.last) return false;
+            if (s.chain.length !== count) s.chain = Array.from({ length: count }, () => ({ x: s.last.x, y: s.last.y }));
+            let tx = s.last.x;
+            let ty = s.last.y;
+            for (const p of s.chain) {
+                p.x += (tx - p.x) * ease;
+                p.y += (ty - p.y) * ease;
+                tx = p.x;
+                ty = p.y;
+            }
+            const tail = s.chain[s.chain.length - 1];
+            return Math.hypot(tail.x - s.last.x, tail.y - s.last.y) > 0.4;
+        };
+
+        const frame = () => {
+            const now = performance.now();
+            const { width, height } = canvas.getBoundingClientRect();
+            ctx.clearRect(0, 0, width, height);
+            let alive = false;
+
+            if (variant === "comet" || variant === "rainbow") {
+                s.points = s.points.filter((p) => now - p.t < life);
+                const n = s.points.length;
+                alive = n > 1;
+                ctx.lineCap = "round";
+                for (let i = 1; i < n; i++) {
+                    const k = i / n;
+                    const c = variant === "rainbow" ? `hsla(${(now / 6 + i * 9) % 360},90%,62%,${k})` : `rgba(${rgb},${k * 0.9})`;
+                    ctx.strokeStyle = c;
+                    ctx.shadowColor = c;
+                    ctx.shadowBlur = 12 * size;
+                    ctx.lineWidth = (1 + k * 7) * size;
+                    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 (variant === "dots") {
+                alive = follow(Math.round(14 * length), 0.38);
+                s.chain.forEach((d, i) => {
+                    const k = 1 - i / s.chain.length;
+                    ctx.fillStyle = `rgba(${rgb},${k * 0.85})`;
+                    ctx.beginPath();
+                    ctx.arc(d.x, d.y, (1.5 + k * 4) * size, 0, Math.PI * 2);
+                    ctx.fill();
+                });
+            }
+
+            if (variant === "ribbon") {
+                alive = follow(Math.round(22 * length), 0.42);
+                const pts = s.last ? [s.last, ...s.chain] : [];
+                ctx.lineCap = "round";
+                ctx.lineJoin = "round";
+                for (let i = 1; i < pts.length - 1; i++) {
+                    const k = 1 - i / pts.length;
+                    const mx1 = (pts[i - 1].x + pts[i].x) / 2;
+                    const my1 = (pts[i - 1].y + pts[i].y) / 2;
+                    const mx2 = (pts[i].x + pts[i + 1].x) / 2;
+                    const my2 = (pts[i].y + pts[i + 1].y) / 2;
+                    ctx.strokeStyle = `rgba(${rgb},${0.15 + k * 0.85})`;
+                    ctx.lineWidth = (2 + k * 12) * size;
+                    ctx.beginPath();
+                    ctx.moveTo(mx1, my1);
+                    ctx.quadraticCurveTo(pts[i].x, pts[i].y, mx2, my2);
+                    ctx.stroke();
+                }
+            }
+
+            if (variant === "sparkles") {
+                s.parts = s.parts.filter((p) => now - p.born < p.life);
+                for (const p of s.parts) {
+                    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 r = p.size * k * size;
+                    ctx.strokeStyle = p.white ? `rgba(255,255,255,${k})` : `rgba(${rgb},${k})`;
+                    ctx.lineWidth = 1.4;
+                    ctx.beginPath();
+                    ctx.moveTo(p.x - r, p.y);
+                    ctx.lineTo(p.x + r, p.y);
+                    ctx.moveTo(p.x, p.y - r);
+                    ctx.lineTo(p.x, p.y + r);
+                    ctx.stroke();
+                }
+                alive = s.parts.length > 0;
+            }
+
+            if (variant === "ghost") {
+                const span = 650 * length;
+                s.rings = s.rings.filter((r) => now - r.born < span);
+                for (const r of s.rings) {
+                    const k = (now - r.born) / span;
+                    ctx.strokeStyle = `rgba(${rgb},${(1 - k) * 0.7})`;
+                    ctx.lineWidth = (2 * (1 - k) + 0.5) * size;
+                    ctx.beginPath();
+                    ctx.arc(r.x, r.y, (6 + k * 22) * size, 0, Math.PI * 2);
+                    ctx.stroke();
+                }
+                alive = s.rings.length > 0;
+            }
+
+            s.raf = alive ? requestAnimationFrame(frame) : 0;
+        };
+
+        const onMove = (e) => {
+            if (e.pointerType && e.pointerType !== "mouse") return;
+            const r = canvas.getBoundingClientRect();
+            const x = e.clientX - r.left;
+            const y = e.clientY - r.top;
+            const now = performance.now();
+            const prev = s.last;
+            s.last = { x, y };
+            if (variant === "comet" || variant === "rainbow") s.points.push({ x, y, t: now });
+            if (variant === "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) * length, born: now, white: Math.random() < 0.3 });
+                }
+            }
+            if (variant === "ghost" && now - s.spawn > 70) {
+                s.spawn = now;
+                s.rings.push({ x, y, born: now });
+            }
+            if (!s.raf) s.raf = requestAnimationFrame(frame);
+        };
+
+        target.addEventListener("pointermove", onMove);
+        return () => {
+            target.removeEventListener("pointermove", onMove);
+            cancelAnimationFrame(s.raf);
+            ro.disconnect();
+        };
+    }, [variant, color, size, length, global]);
+
+    const canvas = <canvas ref={canvasRef} aria-hidden="true" className={`pointer-events-none ${global ? "fixed inset-0 z-[9999]" : "absolute inset-0 z-40"} h-full w-full`} />;
+
+    if (global) {
+        return (
+            <>
+                {children}
+                {canvas}
+            </>
+        );
+    }
+    return (
+        <div ref={wrapRef} className={`relative ${className}`}>
+            {children}
+            {canvas}
+        </div>
+    );
+};
+
+export default CursorTrail;

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

@@ -0,0 +1,289 @@
+import React, { useEffect, useRef } from "react";
+
+/*
+ * Dot Globe: a 3D globe of land dots drawn on a 2D canvas (no WebGL, no map
+ * library). Drag to spin it with inertia; it also turns on its own. Cities
+ * pulse as markers and flights arc between them.
+ */
+
+// 2° land mask (Natural Earth 110m): 180 × 69 cells from 180°W, 78°N, one bit each.
+const LAND = "AAAAwADkw////wEABAAAAABgAAAAAAAAAADAUT8A/v8PAAAAAAwA/j8AuAEAAAAAcBHtDcD/fwAAAAAwAPz/fwMAABCAAQD5w/wD8P8FAAAcAIL7//9//xOAAP/ff0668QD/HwAA+A8At///////v3/w/////x8++B8AAOD/1//7////////jP////+/+AE/gAcAn9f//////////w/w/////wEs4AEAAHz+////////////gL////8HeAAcAADg5///////////9ADgAf7/f4AnAAAAAH78////////H0QAAAiA//8f8AcAAIBB4////////38ADwAQAOD//5//AQAAHAT/////////A3AAAAAA/v//+T8AAGDz//////////8DAQAAAMD/////AwAAsP//////////LwAAAAAA6P///2IAAAD+//////////8CAAAAAAD///8/CAAA4P//////////JwAAAAAA8P///wYAAAD+/unz/////z8AAAAAAAD///8HAAAA/pgPPP//////MQAAAAAA8P//PwAAAMBD9v7n/////wcBAAAAAAD///8AAAAAPkD7f/7///8hEAAAAAAA4P//DwAAAIDhAv/n////f8YAAAAAAAD8//8AAAAA+AdE//////8jDwAAAAAAgP//AwAAAMD/APD/////PxgAAAAAAADw/x8AAAAA/n/v//////8HAAAAAAAAAPwDAgAAAOD////7////fwAAAAAAAACgHyAAAACA//9/f/7///8DAAAAAAAAAPQBAAAAAPj//+cv+P//PwAAAAAAAAAAHjAAAADA/////g/+//8EAAAAAAAAAOBhCAAAAP7//99/4D//AAAAAAAAAAAAPAMEAADA////+Qf84BcAAAAAAAAAAAA/AAAAAPz//58fgAf+QAAAAAAAAAAAAA8AAADg////ewA4gA8EAAAAAAAAAADAAAAAAPz//38BgAP4QQAAAAAAAAAAAAgPAADA////zwAwgAwQAAAAAAAAAAAA9Q8AAPj///8HAAVIAAAAAAAAAAAAAID/AQAA////fwBAAAAQAAAAAAAAAAAA+P8AAGDh//8DAAA0GAAAAAAAAAAAAID/HwAAAPj/HwAAgMIBAAAAAAAAAAAA/P8BAACA//8AAAAYXgAAAAAAAAAAAMD/fwAAAPz/BwAAAOOBAQAAAAAAAAAA/P8/AACA/z8AAABgbtQBAAAAAAAAAOD//w8AAPD/AwAAAAQIeAAAAAAAAAAA/P//AQAA/z8AAACAA4APAQAAAAAAAID//w8AAPD/AwAAAAARsEAAAAAAAAAA+P9/AAAA/j8AAAAAAAAAAAAAAAAAAAD//wcAAPD/QwAAAACAIwAAAAAAAAAA8P9/AAAA/z8EAAAAAD8GIAAAAAAAAAD8/wMAAPD/cQAAAAD4ZwAAAAAAAAAAgP8/AAAA/w8HAAAAgP8HAAAAAAAAAAD4/wMAAOD/MAAAAAD//wEBAAAAAAAAgP8PAAAA/g8DAAAA+P8fAAAAAAAAAAD4PwAAAOB/EAAAAID//wMAAAAAAAAAgP8DAAAA/AMAAAAA+P9/AAAAAAAAAAD8HwAAAMA/AAAAAID//wcAAAAAAAAAwP8BAAAA+AEAAAAA8P9/AAAAAAAAAAD8DwAAAIAPAAAAAAAP/gMAAAAAAAAAwB8AAAAAAAAAAAAAEIAfAAEAAAAAAAD+AwAAAAAAAAAAAAAA8AEgAAAAAAAA4AcAAAAAAAAAAAAAAAAAAAYAAAAAAABeAAAAAAAAAAAAAAAAwAAwAAAAAAAAwAMAAAAAAAAAAAAAAAAIgAEAAAAAAAAeAAAAAAAAAAAAAAAAAAAMAAAAAAAA4AEAAAAAAAAAAAAAAAAAAAAAAAAAAAAPAAAAAAAAAAABAAAAAAAAAAAAAAAAcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=";
+const STEP = 2;
+const COLS = 180;
+const ROWS = 69;
+
+const landDots = (() => {
+    const bin = typeof atob === "function" ? atob(LAND) : "";
+    const dots = [];
+    for (let r = 0; r < ROWS; r++) {
+        const lat = 78 - r * STEP - 1;
+        // Fewer dots toward the poles so the globe looks evenly filled.
+        const skip = Math.max(1, Math.round(1 / Math.max(0.25, Math.cos((lat * Math.PI) / 180))));
+        for (let c = 0; c < COLS; c += skip) {
+            const i = r * COLS + c;
+            if ((bin.charCodeAt(i >> 3) >> (i & 7)) & 1) dots.push([lat, -180 + c * STEP + 1]);
+        }
+    }
+    return dots;
+})();
+
+const DEFAULT_MARKERS = [
+    { label: "Bhubaneswar", lat: 20.3, lon: 85.8 },
+    { label: "San Francisco", lat: 37.8, lon: -122.4 },
+    { label: "London", lat: 51.5, lon: -0.1 },
+    { label: "Tokyo", lat: 35.7, lon: 139.7 },
+    { label: "Sydney", lat: -33.9, lon: 151.2 },
+    { label: "São Paulo", lat: -23.5, lon: -46.6 },
+    { label: "Dubai", lat: 25.2, lon: 55.3 },
+];
+
+const DEFAULT_ARCS = [
+    [0, 1],
+    [0, 2],
+    [0, 3],
+    [0, 4],
+    [2, 5],
+    [6, 2],
+    [3, 1],
+];
+
+const rad = (d) => (d * Math.PI) / 180;
+const toVec = (lat, lon) => [Math.cos(rad(lat)) * Math.sin(rad(lon)), Math.sin(rad(lat)), Math.cos(rad(lat)) * Math.cos(rad(lon))];
+
+// Spherical interpolation between two unit vectors.
+const slerp = (a, b, t) => {
+    const dot = Math.min(1, Math.max(-1, a[0] * b[0] + a[1] * b[1] + a[2] * b[2]));
+    const om = Math.acos(dot);
+    if (om < 1e-4) return a;
+    const s = Math.sin(om);
+    const k1 = Math.sin((1 - t) * om) / s;
+    const k2 = Math.sin(t * om) / s;
+    return [a[0] * k1 + b[0] * k2, a[1] * k1 + b[1] * k2, a[2] * k1 + b[2] * k2];
+};
+
+const DotGlobe = ({
+    markers = DEFAULT_MARKERS,
+    arcs = DEFAULT_ARCS,
+    dotColor = "#a1a1aa",
+    markerColor = "#a3e635",
+    arcColor = "#a3e635",
+    glowColor = "#a3e635",
+    labelColor = "rgba(255,255,255,0.9)",
+    autoRotateSpeed = 8,
+    tilt = 18,
+    maxSize = 30,
+    showLabels = true,
+    className = "",
+}) => {
+    const wrapRef = useRef(null);
+    const canvasRef = useRef(null);
+    const opts = useRef(null);
+    opts.current = { markers, arcs, dotColor, markerColor, arcColor, glowColor, labelColor, autoRotateSpeed, tilt, showLabels };
+
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        const wrap = wrapRef.current;
+        const ctx = canvas.getContext("2d");
+        const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        let size = 300;
+        let raf = 0;
+        let last = performance.now();
+        let time = 0;
+        let yaw = -80; // start over India
+        let velocity = 0;
+        let drag = null;
+        let visible = true;
+
+        const resize = () => {
+            const dpr = Math.min(window.devicePixelRatio || 1, 2);
+            size = wrap.getBoundingClientRect().width;
+            canvas.width = Math.round(size * dpr);
+            canvas.height = Math.round(size * dpr);
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+            draw();
+        };
+
+        // Rotate a unit vector by the current yaw and tilt, then project.
+        const project = (v, R, c) => {
+            const cy = Math.cos(rad(yaw));
+            const sy = Math.sin(rad(yaw));
+            const x = v[0] * cy + v[2] * sy;
+            const z0 = -v[0] * sy + v[2] * cy;
+            const ct = Math.cos(rad(opts.current.tilt));
+            const st = Math.sin(rad(opts.current.tilt));
+            const y = v[1] * ct - z0 * st;
+            const z = v[1] * st + z0 * ct;
+            return [c + x * R, c - y * R, z];
+        };
+
+        function draw() {
+            const o = opts.current;
+            const c = size / 2;
+            const R = size * 0.4;
+            ctx.clearRect(0, 0, size, size);
+
+            // Atmosphere glow and sphere body.
+            const glow = ctx.createRadialGradient(c, c, R * 0.85, c, c, R * 1.25);
+            glow.addColorStop(0, `${o.glowColor}33`);
+            glow.addColorStop(1, `${o.glowColor}00`);
+            ctx.fillStyle = glow;
+            ctx.beginPath();
+            ctx.arc(c, c, R * 1.25, 0, Math.PI * 2);
+            ctx.fill();
+            const body = ctx.createRadialGradient(c - R * 0.35, c - R * 0.35, R * 0.1, c, c, R);
+            body.addColorStop(0, "rgba(255,255,255,0.07)");
+            body.addColorStop(1, "rgba(255,255,255,0.01)");
+            ctx.fillStyle = body;
+            ctx.beginPath();
+            ctx.arc(c, c, R, 0, Math.PI * 2);
+            ctx.fill();
+
+            // Land dots: front bright, back faint.
+            const dr = Math.max(0.8, R / 190);
+            ctx.fillStyle = o.dotColor;
+            for (let i = 0; i < landDots.length; i++) {
+                const [lat, lon] = landDots[i];
+                const [x, y, z] = project(toVec(lat, lon), R, c);
+                ctx.globalAlpha = z > 0 ? 0.35 + 0.65 * z : 0.06;
+                ctx.fillRect(x - dr, y - dr, dr * 2, dr * 2);
+            }
+            ctx.globalAlpha = 1;
+
+            // Arcs with a travelling head.
+            o.arcs.forEach(([a, b], k) => {
+                const A = o.markers[a];
+                const B = o.markers[b];
+                if (!A || !B) return;
+                const va = toVec(A.lat, A.lon);
+                const vb = toVec(B.lat, B.lon);
+                const steps = 48;
+                ctx.strokeStyle = o.arcColor;
+                ctx.lineWidth = Math.max(1, R / 220);
+                ctx.globalAlpha = 0.55;
+                ctx.beginPath();
+                let drawing = false;
+                for (let s = 0; s <= steps; s++) {
+                    const t = s / steps;
+                    const v = slerp(va, vb, t);
+                    const lift = 1 + 0.18 * Math.sin(Math.PI * t);
+                    const [x, y, z] = project([v[0] * lift, v[1] * lift, v[2] * lift], R, c);
+                    if (z > -0.1) {
+                        if (drawing) ctx.lineTo(x, y);
+                        else ctx.moveTo(x, y);
+                        drawing = true;
+                    } else drawing = false;
+                }
+                ctx.stroke();
+                const t = ((time * 0.35 + k * 0.17) % 1 + 1) % 1;
+                const v = slerp(va, vb, t);
+                const lift = 1 + 0.18 * Math.sin(Math.PI * t);
+                const [hx, hy, hz] = project([v[0] * lift, v[1] * lift, v[2] * lift], R, c);
+                if (hz > 0) {
+                    ctx.globalAlpha = 1;
+                    ctx.fillStyle = o.arcColor;
+                    ctx.beginPath();
+                    ctx.arc(hx, hy, Math.max(1.5, R / 110), 0, Math.PI * 2);
+                    ctx.fill();
+                }
+            });
+            ctx.globalAlpha = 1;
+
+            // Markers with a pulse and labels.
+            ctx.font = `600 ${Math.max(10, R / 18)}px ui-sans-serif, system-ui, sans-serif`;
+            o.markers.forEach((m, k) => {
+                const [x, y, z] = project(toVec(m.lat, m.lon), R, c);
+                if (z <= 0.05) return;
+                const pulse = ((time * 0.8 + k * 0.23) % 1 + 1) % 1;
+                ctx.strokeStyle = o.markerColor;
+                ctx.globalAlpha = (1 - pulse) * z;
+                ctx.lineWidth = 1.5;
+                ctx.beginPath();
+                ctx.arc(x, y, 3 + pulse * R * 0.06, 0, Math.PI * 2);
+                ctx.stroke();
+                ctx.globalAlpha = z;
+                ctx.fillStyle = o.markerColor;
+                ctx.beginPath();
+                ctx.arc(x, y, Math.max(2.5, R / 80), 0, Math.PI * 2);
+                ctx.fill();
+                if (o.showLabels && z > 0.35) {
+                    ctx.globalAlpha = Math.min(1, (z - 0.35) * 3);
+                    ctx.fillStyle = o.labelColor;
+                    ctx.fillText(m.label, x + 8, y + 4);
+                }
+            });
+            ctx.globalAlpha = 1;
+        }
+
+        const loop = (now) => {
+            const dt = Math.min(0.05, (now - last) / 1000);
+            last = now;
+            time += dt;
+            if (!drag) {
+                velocity *= 0.94;
+                yaw += velocity * dt * 60 + (reduced ? 0 : opts.current.autoRotateSpeed * dt) * (Math.abs(velocity) < 0.05 ? 1 : 0.3);
+            }
+            draw();
+            raf = requestAnimationFrame(loop);
+        };
+        const start = () => {
+            if (raf || !visible) return;
+            last = performance.now();
+            raf = requestAnimationFrame(loop);
+        };
+        const stop = () => {
+            cancelAnimationFrame(raf);
+            raf = 0;
+        };
+
+        const onDown = (e) => {
+            drag = { x: e.clientX, yaw, lastX: e.clientX, lastT: performance.now() };
+            canvas.setPointerCapture?.(e.pointerId);
+        };
+        const onMove = (e) => {
+            if (!drag) return;
+            const degPerPx = 180 / (size * 0.8);
+            // Drag right → the surface under the pointer moves right.
+            yaw = drag.yaw + (e.clientX - drag.x) * degPerPx;
+            const now = performance.now();
+            velocity = ((e.clientX - drag.lastX) * degPerPx) / Math.max(1, (now - drag.lastT) / 16.7);
+            drag.lastX = e.clientX;
+            drag.lastT = now;
+        };
+        const onUp = () => {
+            drag = null;
+        };
+
+        canvas.addEventListener("pointerdown", onDown);
+        canvas.addEventListener("pointermove", onMove);
+        canvas.addEventListener("pointerup", onUp);
+        canvas.addEventListener("pointercancel", onUp);
+        const ro = new ResizeObserver(resize);
+        ro.observe(wrap);
+        const io = new IntersectionObserver(([entry]) => {
+            visible = entry.isIntersecting;
+            if (visible) start();
+            else stop();
+        });
+        io.observe(wrap);
+        resize();
+        start();
+
+        return () => {
+            stop();
+            ro.disconnect();
+            io.disconnect();
+            canvas.removeEventListener("pointerdown", onDown);
+            canvas.removeEventListener("pointermove", onMove);
+            canvas.removeEventListener("pointerup", onUp);
+            canvas.removeEventListener("pointercancel", onUp);
+        };
+    }, []);
+
+    return (
+        <div ref={wrapRef} className={`relative aspect-square w-full ${className}`} style={{ maxWidth: `${maxSize}rem` }}>
+            <canvas ref={canvasRef} role="img" aria-label="Interactive globe" className="h-full w-full cursor-grab touch-pan-y active:cursor-grabbing" />
+        </div>
+    );
+};
+
+export default DotGlobe;