aura-ui-library 1.0.4 → 1.0.6

package/dist/index.js

@@ -29,6 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.js
 var index_exports = {};
 __export(index_exports, {
+  Carousel: () => Carousel,
   MagneticButton: () => MagneticButton,
   Navbar: () => Navbar,
   SpotlightCard: () => SpotlightCard
@@ -3697,8 +3698,650 @@ var SpotlightCard = ({
     )
   );
 };
+
+// src/components/Carousel/Carousel.jsx
+var import_react4 = __toESM(require("react"));
+var import_gsap = require("gsap");
+var defaults = {
+  radius: 340,
+  cardWidth: 280,
+  cardHeight: 380,
+  autoPlayInterval: 4200,
+  perspective: 1100
+};
+var Carousel = ({
+  slides = [],
+  radius = defaults.radius,
+  cardWidth = defaults.cardWidth,
+  cardHeight = defaults.cardHeight,
+  autoPlayInterval = defaults.autoPlayInterval,
+  perspective = defaults.perspective,
+  showGlare = true,
+  showParticles = true,
+  showScanlines = true,
+  showVignette = true,
+  showKenBurns = true,
+  showAutoPlay = true,
+  showSettingsPanel = true,
+  showDots = true,
+  showCounter = true,
+  showCursor = true
+}) => {
+  const stageRef = (0, import_react4.useRef)(null);
+  const barrelRef = (0, import_react4.useRef)(null);
+  const canvasRef = (0, import_react4.useRef)(null);
+  const cardRefs = (0, import_react4.useRef)([]);
+  const curRef = (0, import_react4.useRef)(null);
+  const ringRef = (0, import_react4.useRef)(null);
+  const [current, setCurrent] = (0, import_react4.useState)(0);
+  const [settings, setSettings] = (0, import_react4.useState)({
+    glare: showGlare,
+    particles: showParticles,
+    scan: showScanlines,
+    auto: showAutoPlay,
+    kb: showKenBurns
+  });
+  const N = slides.length;
+  const currentRef = (0, import_react4.useRef)(0);
+  const isAnimatingRef = (0, import_react4.useRef)(false);
+  const settingsRef = (0, import_react4.useRef)(settings);
+  const autoTimerRef = (0, import_react4.useRef)(null);
+  const particlesRef = (0, import_react4.useRef)([]);
+  const mouseRef = (0, import_react4.useRef)({ x: 0, y: 0 });
+  const cursorPosRef = (0, import_react4.useRef)({ cx: 0, cy: 0, rx: 0, ry: 0 });
+  const rafRef = (0, import_react4.useRef)(null);
+  const wheelAccRef = (0, import_react4.useRef)(0);
+  const wheelTimerRef = (0, import_react4.useRef)(null);
+  const touchStartRef = (0, import_react4.useRef)(0);
+  (0, import_react4.useEffect)(() => {
+    settingsRef.current = settings;
+  }, [settings]);
+  (0, import_react4.useEffect)(() => {
+    currentRef.current = current;
+  }, [current]);
+  const applyPositions = (0, import_react4.useCallback)(
+    (instant = false) => {
+      if (!cardRefs.current.length) return;
+      const cur = currentRef.current;
+      cardRefs.current.forEach((card, i) => {
+        if (!card) return;
+        const offset = i - cur;
+        let angle = offset / N * 360;
+        if (angle > 180) angle -= 360;
+        if (angle < -180) angle += 360;
+        const rad = angle * (Math.PI / 180);
+        const x = Math.sin(rad) * radius;
+        const z = Math.cos(rad) * radius - radius;
+        const rotY = -angle;
+        const isActive = i === cur;
+        const absOff = Math.abs(angle);
+        const fade = Math.max(0, 1 - absOff / 90) * 0.7 + 0.05;
+        const sc = isActive ? 1 : Math.max(0.6, 1 - absOff / 280);
+        const props = {
+          x,
+          y: 0,
+          z,
+          rotateY: rotY,
+          scale: sc,
+          opacity: isActive ? 1 : fade,
+          zIndex: isActive ? 10 : Math.round((1 - absOff / 200) * 5),
+          overwrite: true
+        };
+        if (instant) {
+          import_gsap.gsap.set(card, props);
+        } else {
+          import_gsap.gsap.to(card, { ...props, duration: 0.85, ease: "power3.out" });
+        }
+        const info = card.querySelector(".bc-info");
+        const line = card.querySelector(".bc-line");
+        if (isActive) {
+          import_gsap.gsap.to(info, {
+            opacity: 1,
+            y: 0,
+            duration: 0.6,
+            delay: 0.25,
+            ease: "power2.out"
+          });
+          import_gsap.gsap.to(line, {
+            scaleX: 1,
+            duration: 0.9,
+            delay: 0.35,
+            ease: "power2.out"
+          });
+          if (settingsRef.current.kb) {
+            const img = card.querySelector(".bc-img");
+            if (img)
+              import_gsap.gsap.fromTo(
+                img,
+                { scale: 1.08 },
+                { scale: 1, duration: 7, ease: "none" }
+              );
+          }
+        } else {
+          import_gsap.gsap.to(info, { opacity: 0, y: 6, duration: 0.3, ease: "power2.in" });
+          import_gsap.gsap.to(line, { scaleX: 0, duration: 0.25, ease: "power2.in" });
+        }
+      });
+    },
+    [N, radius]
+  );
+  const spawnParticles = (0, import_react4.useCallback)(() => {
+    if (!settingsRef.current.particles) return;
+    const { x, y } = mouseRef.current;
+    for (let i = 0; i < 28; i++) {
+      particlesRef.current.push({
+        x,
+        y,
+        vx: (Math.random() - 0.5) * 4.5,
+        vy: (Math.random() - 0.5) * 4.5,
+        life: 1,
+        decay: 0.022 + Math.random() * 0.018,
+        r: Math.random() * 3 + 1
+      });
+    }
+  }, []);
+  const goTo = (0, import_react4.useCallback)(
+    (idx) => {
+      if (idx === currentRef.current || isAnimatingRef.current) return;
+      isAnimatingRef.current = true;
+      spawnParticles();
+      currentRef.current = idx;
+      setCurrent(idx);
+      applyPositions(false);
+      setTimeout(() => {
+        isAnimatingRef.current = false;
+      }, 900);
+    },
+    [applyPositions, spawnParticles]
+  );
+  const next = (0, import_react4.useCallback)(() => goTo((currentRef.current + 1) % N), [goTo, N]);
+  const prev = (0, import_react4.useCallback)(
+    () => goTo((currentRef.current - 1 + N) % N),
+    [goTo, N]
+  );
+  const resetAuto = (0, import_react4.useCallback)(() => {
+    clearInterval(autoTimerRef.current);
+    if (settingsRef.current.auto) {
+      autoTimerRef.current = setInterval(next, autoPlayInterval);
+    }
+  }, [next, autoPlayInterval]);
+  (0, import_react4.useEffect)(() => {
+    if (!barrelRef.current || !cardRefs.current.length) return;
+    applyPositions(true);
+    resetAuto();
+  }, [applyPositions, resetAuto]);
+  (0, import_react4.useEffect)(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    const resize = () => {
+      if (!stageRef.current) return;
+      canvas.width = stageRef.current.offsetWidth;
+      canvas.height = stageRef.current.offsetHeight;
+    };
+    resize();
+    window.addEventListener("resize", resize);
+    let frameId;
+    const drawLoop = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      particlesRef.current = particlesRef.current.filter((p) => p.life > 0);
+      particlesRef.current.forEach((p) => {
+        p.x += p.vx;
+        p.y += p.vy;
+        p.vy += 0.06;
+        p.life -= p.decay;
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.r * p.life, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(255,255,255,${p.life * 0.55})`;
+        ctx.fill();
+      });
+      frameId = requestAnimationFrame(drawLoop);
+    };
+    drawLoop();
+    return () => {
+      window.removeEventListener("resize", resize);
+      cancelAnimationFrame(frameId);
+    };
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    const lerp2 = (a, b, t) => a + (b - a) * t;
+    let frameId;
+    const loop = () => {
+      const { cx, cy, rx, ry } = cursorPosRef.current;
+      const { x, y } = mouseRef.current;
+      cursorPosRef.current.cx = lerp2(cx, x, 0.18);
+      cursorPosRef.current.cy = lerp2(cy, y, 0.18);
+      cursorPosRef.current.rx = lerp2(rx, x, 0.08);
+      cursorPosRef.current.ry = lerp2(ry, y, 0.08);
+      if (curRef.current) {
+        curRef.current.style.left = x + "px";
+        curRef.current.style.top = y + "px";
+      }
+      if (ringRef.current) {
+        ringRef.current.style.left = cursorPosRef.current.rx + "px";
+        ringRef.current.style.top = cursorPosRef.current.ry + "px";
+      }
+      const activeCard = cardRefs.current[currentRef.current];
+      if (activeCard && settingsRef.current.glare && stageRef.current) {
+        const r2 = activeCard.getBoundingClientRect();
+        const pr = stageRef.current.getBoundingClientRect();
+        const lx = x, ly = y;
+        const cx2 = r2.left + r2.width / 2 - pr.left;
+        const cy2 = r2.top + r2.height / 2 - pr.top;
+        const dx = (lx - cx2) / cardWidth;
+        const dy = (ly - cy2) / cardHeight;
+        const glare = activeCard.querySelector(".bc-glare");
+        if (glare) {
+          glare.style.background = `radial-gradient(circle at ${50 + dx * 35}% ${50 + dy * 35}%, rgba(255,255,255,0.16), transparent 60%)`;
+        }
+        import_gsap.gsap.to(activeCard, {
+          rotateX: -dy * 6,
+          rotateY: dx * 6,
+          duration: 0.4,
+          ease: "power2.out",
+          overwrite: "auto"
+        });
+      }
+      frameId = requestAnimationFrame(loop);
+    };
+    loop();
+    return () => cancelAnimationFrame(frameId);
+  }, [cardWidth, cardHeight]);
+  (0, import_react4.useEffect)(() => {
+    const stage = stageRef.current;
+    if (!stage) return;
+    const onMove = (e) => {
+      const r = stage.getBoundingClientRect();
+      mouseRef.current = { x: e.clientX - r.left, y: e.clientY - r.top };
+    };
+    const onLeave = () => {
+      const activeCard = cardRefs.current[currentRef.current];
+      if (activeCard) {
+        const glare = activeCard.querySelector(".bc-glare");
+        if (glare) glare.style.opacity = 0;
+        import_gsap.gsap.to(activeCard, {
+          rotateX: 0,
+          rotateY: 0,
+          duration: 0.6,
+          ease: "elastic.out(1,0.6)"
+        });
+      }
+    };
+    const onWheel = (e) => {
+      e.preventDefault();
+      wheelAccRef.current += e.deltaY;
+      clearTimeout(wheelTimerRef.current);
+      wheelTimerRef.current = setTimeout(() => {
+        if (Math.abs(wheelAccRef.current) > 60) {
+          wheelAccRef.current > 0 ? next() : prev();
+        }
+        wheelAccRef.current = 0;
+      }, 80);
+    };
+    const onTouchStart = (e) => {
+      touchStartRef.current = e.touches[0].pageX;
+    };
+    const onTouchEnd = (e) => {
+      const dx = e.changedTouches[0].pageX - touchStartRef.current;
+      if (dx < -40) next();
+      else if (dx > 40) prev();
+    };
+    const onKey = (e) => {
+      if (e.key === "ArrowRight") next();
+      if (e.key === "ArrowLeft") prev();
+    };
+    stage.addEventListener("mousemove", onMove);
+    stage.addEventListener("mouseleave", onLeave);
+    stage.addEventListener("wheel", onWheel, { passive: false });
+    stage.addEventListener("touchstart", onTouchStart, { passive: true });
+    stage.addEventListener("touchend", onTouchEnd);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      stage.removeEventListener("mousemove", onMove);
+      stage.removeEventListener("mouseleave", onLeave);
+      stage.removeEventListener("wheel", onWheel);
+      stage.removeEventListener("touchstart", onTouchStart);
+      stage.removeEventListener("touchend", onTouchEnd);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [next, prev]);
+  const toggleSetting = (key) => {
+    setSettings((prev2) => {
+      const next2 = { ...prev2, [key]: !prev2[key] };
+      settingsRef.current = next2;
+      if (key === "auto") {
+        clearInterval(autoTimerRef.current);
+        if (next2.auto)
+          autoTimerRef.current = setInterval(next2, autoPlayInterval);
+      }
+      return next2;
+    });
+  };
+  return /* @__PURE__ */ import_react4.default.createElement(
+    "div",
+    {
+      ref: stageRef,
+      style: {
+        width: "100%",
+        height: "600px",
+        background: "#000",
+        overflow: "hidden",
+        position: "relative",
+        cursor: "none",
+        fontFamily: "'Inter', system-ui, sans-serif"
+      }
+    },
+    showCursor && /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement("div", { ref: curRef, style: S.cursor }), /* @__PURE__ */ import_react4.default.createElement("div", { ref: ringRef, style: S.ring })),
+    /* @__PURE__ */ import_react4.default.createElement(
+      "div",
+      {
+        style: {
+          width: "100%",
+          height: "100%",
+          position: "relative",
+          perspective: `${perspective}px`,
+          perspectiveOrigin: "50% 45%"
+        }
+      },
+      /* @__PURE__ */ import_react4.default.createElement(
+        "div",
+        {
+          ref: barrelRef,
+          style: {
+            position: "absolute",
+            left: "50%",
+            top: "50%",
+            transformStyle: "preserve-3d",
+            transform: "translateX(-50%) translateY(-50%)"
+          }
+        },
+        slides.map((slide, i) => /* @__PURE__ */ import_react4.default.createElement(
+          "div",
+          {
+            key: i,
+            ref: (el) => cardRefs.current[i] = el,
+            onClick: () => {
+              if (!isAnimatingRef.current && i !== currentRef.current)
+                goTo(i);
+            },
+            style: {
+              position: "absolute",
+              width: cardWidth,
+              height: cardHeight,
+              marginLeft: -cardWidth / 2,
+              marginTop: -cardHeight / 2,
+              transformStyle: "preserve-3d",
+              cursor: "pointer",
+              transformOrigin: "center center"
+            }
+          },
+          /* @__PURE__ */ import_react4.default.createElement("div", { style: S.cardInner }, /* @__PURE__ */ import_react4.default.createElement(
+            "img",
+            {
+              className: "bc-img",
+              src: slide.img,
+              alt: slide.title,
+              loading: "lazy",
+              style: S.img,
+              draggable: false
+            }
+          ), /* @__PURE__ */ import_react4.default.createElement("div", { style: S.overlay }), /* @__PURE__ */ import_react4.default.createElement("div", { className: "bc-glare", style: S.glare }), /* @__PURE__ */ import_react4.default.createElement(
+            "div",
+            {
+              className: "bc-info",
+              style: {
+                ...S.info,
+                opacity: 0,
+                transform: "translateY(8px)"
+              }
+            },
+            slide.tag && /* @__PURE__ */ import_react4.default.createElement("div", { style: S.tag }, slide.tag),
+            /* @__PURE__ */ import_react4.default.createElement("div", { style: S.title }, slide.title),
+            slide.sub && /* @__PURE__ */ import_react4.default.createElement("div", { style: S.sub }, slide.sub)
+          ), /* @__PURE__ */ import_react4.default.createElement("div", { style: S.num }, "0", i + 1), /* @__PURE__ */ import_react4.default.createElement("div", { className: "bc-line", style: S.line }))
+        ))
+      )
+    ),
+    showScanlines && settings.scan && /* @__PURE__ */ import_react4.default.createElement("div", { style: S.scanlines }),
+    showVignette && /* @__PURE__ */ import_react4.default.createElement("div", { style: S.vignette }),
+    /* @__PURE__ */ import_react4.default.createElement("canvas", { ref: canvasRef, style: S.canvas }),
+    /* @__PURE__ */ import_react4.default.createElement("div", { style: S.topBar }, /* @__PURE__ */ import_react4.default.createElement("div", { style: S.logo }, "Carousel"), showCounter && /* @__PURE__ */ import_react4.default.createElement("div", { style: S.counter }, "0", current + 1, " / 0", N)),
+    showSettingsPanel && /* @__PURE__ */ import_react4.default.createElement("div", { style: S.settingsPanel }, [
+      ["Glare", "glare"],
+      ["Particles", "particles"],
+      ["Scanlines", "scan"],
+      ["Autoplay", "auto"],
+      ["Ken Burns", "kb"]
+    ].map(([label, key]) => /* @__PURE__ */ import_react4.default.createElement("div", { key, style: S.settingRow }, /* @__PURE__ */ import_react4.default.createElement("span", { style: S.settingLabel }, label), /* @__PURE__ */ import_react4.default.createElement(
+      "div",
+      {
+        onClick: () => toggleSetting(key),
+        style: {
+          ...S.toggle,
+          background: settings[key] ? "rgba(255,255,255,0.35)" : "rgba(255,255,255,0.12)"
+        }
+      },
+      /* @__PURE__ */ import_react4.default.createElement(
+        "div",
+        {
+          style: { ...S.knob, left: settings[key] ? "17px" : "3px" }
+        }
+      )
+    )))),
+    /* @__PURE__ */ import_react4.default.createElement("div", { style: S.controls }, /* @__PURE__ */ import_react4.default.createElement("button", { style: S.btn, onClick: prev }, "\u2190"), showDots && /* @__PURE__ */ import_react4.default.createElement("div", { style: { display: "flex", gap: "7px", alignItems: "center" } }, slides.map((_, i) => /* @__PURE__ */ import_react4.default.createElement(
+      "div",
+      {
+        key: i,
+        onClick: () => goTo(i),
+        style: {
+          width: i === current ? 22 : 6,
+          height: 6,
+          borderRadius: 3,
+          background: i === current ? "#fff" : "rgba(255,255,255,0.2)",
+          cursor: "pointer",
+          transition: "all 0.35s ease"
+        }
+      }
+    ))), /* @__PURE__ */ import_react4.default.createElement("button", { style: S.btn, onClick: next }, "\u2192"))
+  );
+};
+var S = {
+  cursor: {
+    position: "absolute",
+    width: 12,
+    height: 12,
+    borderRadius: "50%",
+    background: "#fff",
+    pointerEvents: "none",
+    zIndex: 999,
+    transform: "translate(-50%,-50%)",
+    mixBlendMode: "difference"
+  },
+  ring: {
+    position: "absolute",
+    width: 44,
+    height: 44,
+    borderRadius: "50%",
+    border: "1.5px solid rgba(255,255,255,0.5)",
+    pointerEvents: "none",
+    zIndex: 998,
+    transform: "translate(-50%,-50%)"
+  },
+  cardInner: {
+    width: "100%",
+    height: "100%",
+    borderRadius: 16,
+    overflow: "hidden",
+    position: "relative",
+    border: "1px solid rgba(255,255,255,0.08)"
+  },
+  img: {
+    width: "100%",
+    height: "100%",
+    objectFit: "cover",
+    display: "block",
+    pointerEvents: "none",
+    userSelect: "none"
+  },
+  overlay: {
+    position: "absolute",
+    inset: 0,
+    background: "linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.1) 55%, transparent 100%)",
+    borderRadius: 16
+  },
+  glare: {
+    position: "absolute",
+    inset: 0,
+    borderRadius: 16,
+    pointerEvents: "none",
+    opacity: 0.9
+  },
+  info: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    padding: "22px 20px",
+    transition: "none"
+  },
+  tag: {
+    fontSize: 9,
+    fontWeight: 600,
+    letterSpacing: "0.12em",
+    textTransform: "uppercase",
+    color: "rgba(255,255,255,0.5)",
+    marginBottom: 6
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: 700,
+    color: "#fff",
+    lineHeight: 1.2,
+    marginBottom: 4
+  },
+  sub: { fontSize: 12, color: "rgba(255,255,255,0.55)", lineHeight: 1.5 },
+  num: {
+    position: "absolute",
+    top: 16,
+    right: 18,
+    fontSize: 10,
+    fontWeight: 700,
+    color: "rgba(255,255,255,0.25)",
+    letterSpacing: "0.1em"
+  },
+  line: {
+    position: "absolute",
+    bottom: 0,
+    left: 20,
+    right: 20,
+    height: 2,
+    background: "linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent)",
+    transform: "scaleX(0)",
+    transformOrigin: "left",
+    borderRadius: 2
+  },
+  scanlines: {
+    position: "absolute",
+    inset: 0,
+    pointerEvents: "none",
+    zIndex: 50,
+    background: "repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.03) 3px, rgba(0,0,0,0.03) 4px)"
+  },
+  vignette: {
+    position: "absolute",
+    inset: 0,
+    pointerEvents: "none",
+    zIndex: 49,
+    background: "radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,0.75) 100%)"
+  },
+  canvas: { position: "absolute", inset: 0, pointerEvents: "none", zIndex: 60 },
+  topBar: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 100,
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "20px 28px"
+  },
+  logo: {
+    fontSize: 11,
+    fontWeight: 700,
+    letterSpacing: "0.2em",
+    color: "rgba(255,255,255,0.3)",
+    textTransform: "uppercase"
+  },
+  counter: {
+    fontSize: 11,
+    color: "rgba(255,255,255,0.25)",
+    fontWeight: 500,
+    letterSpacing: "0.06em"
+  },
+  settingsPanel: {
+    position: "absolute",
+    top: 56,
+    right: 28,
+    zIndex: 200,
+    display: "flex",
+    flexDirection: "column",
+    gap: 8,
+    alignItems: "flex-end"
+  },
+  settingRow: { display: "flex", alignItems: "center", gap: 8 },
+  settingLabel: {
+    fontSize: 10,
+    color: "rgba(255,255,255,0.3)",
+    letterSpacing: "0.06em",
+    textTransform: "uppercase"
+  },
+  toggle: {
+    width: 32,
+    height: 18,
+    borderRadius: 9,
+    border: "1px solid rgba(255,255,255,0.15)",
+    cursor: "pointer",
+    position: "relative",
+    transition: "background 0.25s"
+  },
+  knob: {
+    position: "absolute",
+    top: 3,
+    width: 12,
+    height: 12,
+    borderRadius: "50%",
+    background: "#fff",
+    transition: "left 0.2s"
+  },
+  controls: {
+    position: "absolute",
+    bottom: 26,
+    left: "50%",
+    transform: "translateX(-50%)",
+    zIndex: 100,
+    display: "flex",
+    alignItems: "center",
+    gap: 20
+  },
+  btn: {
+    width: 42,
+    height: 42,
+    borderRadius: "50%",
+    background: "rgba(255,255,255,0.07)",
+    border: "1px solid rgba(255,255,255,0.14)",
+    color: "#fff",
+    cursor: "pointer",
+    fontSize: 16,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backdropFilter: "blur(12px)"
+  }
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Carousel,
   MagneticButton,
   Navbar,
   SpotlightCard

package/dist/index.mjs

@@ -3666,7 +3666,649 @@ var SpotlightCard = ({
     )
   );
 };
+
+// src/components/Carousel/Carousel.jsx
+import React4, { useEffect as useEffect4, useRef as useRef4, useState as useState4, useCallback as useCallback4 } from "react";
+import { gsap } from "gsap";
+var defaults = {
+  radius: 340,
+  cardWidth: 280,
+  cardHeight: 380,
+  autoPlayInterval: 4200,
+  perspective: 1100
+};
+var Carousel = ({
+  slides = [],
+  radius = defaults.radius,
+  cardWidth = defaults.cardWidth,
+  cardHeight = defaults.cardHeight,
+  autoPlayInterval = defaults.autoPlayInterval,
+  perspective = defaults.perspective,
+  showGlare = true,
+  showParticles = true,
+  showScanlines = true,
+  showVignette = true,
+  showKenBurns = true,
+  showAutoPlay = true,
+  showSettingsPanel = true,
+  showDots = true,
+  showCounter = true,
+  showCursor = true
+}) => {
+  const stageRef = useRef4(null);
+  const barrelRef = useRef4(null);
+  const canvasRef = useRef4(null);
+  const cardRefs = useRef4([]);
+  const curRef = useRef4(null);
+  const ringRef = useRef4(null);
+  const [current, setCurrent] = useState4(0);
+  const [settings, setSettings] = useState4({
+    glare: showGlare,
+    particles: showParticles,
+    scan: showScanlines,
+    auto: showAutoPlay,
+    kb: showKenBurns
+  });
+  const N = slides.length;
+  const currentRef = useRef4(0);
+  const isAnimatingRef = useRef4(false);
+  const settingsRef = useRef4(settings);
+  const autoTimerRef = useRef4(null);
+  const particlesRef = useRef4([]);
+  const mouseRef = useRef4({ x: 0, y: 0 });
+  const cursorPosRef = useRef4({ cx: 0, cy: 0, rx: 0, ry: 0 });
+  const rafRef = useRef4(null);
+  const wheelAccRef = useRef4(0);
+  const wheelTimerRef = useRef4(null);
+  const touchStartRef = useRef4(0);
+  useEffect4(() => {
+    settingsRef.current = settings;
+  }, [settings]);
+  useEffect4(() => {
+    currentRef.current = current;
+  }, [current]);
+  const applyPositions = useCallback4(
+    (instant = false) => {
+      if (!cardRefs.current.length) return;
+      const cur = currentRef.current;
+      cardRefs.current.forEach((card, i) => {
+        if (!card) return;
+        const offset = i - cur;
+        let angle = offset / N * 360;
+        if (angle > 180) angle -= 360;
+        if (angle < -180) angle += 360;
+        const rad = angle * (Math.PI / 180);
+        const x = Math.sin(rad) * radius;
+        const z = Math.cos(rad) * radius - radius;
+        const rotY = -angle;
+        const isActive = i === cur;
+        const absOff = Math.abs(angle);
+        const fade = Math.max(0, 1 - absOff / 90) * 0.7 + 0.05;
+        const sc = isActive ? 1 : Math.max(0.6, 1 - absOff / 280);
+        const props = {
+          x,
+          y: 0,
+          z,
+          rotateY: rotY,
+          scale: sc,
+          opacity: isActive ? 1 : fade,
+          zIndex: isActive ? 10 : Math.round((1 - absOff / 200) * 5),
+          overwrite: true
+        };
+        if (instant) {
+          gsap.set(card, props);
+        } else {
+          gsap.to(card, { ...props, duration: 0.85, ease: "power3.out" });
+        }
+        const info = card.querySelector(".bc-info");
+        const line = card.querySelector(".bc-line");
+        if (isActive) {
+          gsap.to(info, {
+            opacity: 1,
+            y: 0,
+            duration: 0.6,
+            delay: 0.25,
+            ease: "power2.out"
+          });
+          gsap.to(line, {
+            scaleX: 1,
+            duration: 0.9,
+            delay: 0.35,
+            ease: "power2.out"
+          });
+          if (settingsRef.current.kb) {
+            const img = card.querySelector(".bc-img");
+            if (img)
+              gsap.fromTo(
+                img,
+                { scale: 1.08 },
+                { scale: 1, duration: 7, ease: "none" }
+              );
+          }
+        } else {
+          gsap.to(info, { opacity: 0, y: 6, duration: 0.3, ease: "power2.in" });
+          gsap.to(line, { scaleX: 0, duration: 0.25, ease: "power2.in" });
+        }
+      });
+    },
+    [N, radius]
+  );
+  const spawnParticles = useCallback4(() => {
+    if (!settingsRef.current.particles) return;
+    const { x, y } = mouseRef.current;
+    for (let i = 0; i < 28; i++) {
+      particlesRef.current.push({
+        x,
+        y,
+        vx: (Math.random() - 0.5) * 4.5,
+        vy: (Math.random() - 0.5) * 4.5,
+        life: 1,
+        decay: 0.022 + Math.random() * 0.018,
+        r: Math.random() * 3 + 1
+      });
+    }
+  }, []);
+  const goTo = useCallback4(
+    (idx) => {
+      if (idx === currentRef.current || isAnimatingRef.current) return;
+      isAnimatingRef.current = true;
+      spawnParticles();
+      currentRef.current = idx;
+      setCurrent(idx);
+      applyPositions(false);
+      setTimeout(() => {
+        isAnimatingRef.current = false;
+      }, 900);
+    },
+    [applyPositions, spawnParticles]
+  );
+  const next = useCallback4(() => goTo((currentRef.current + 1) % N), [goTo, N]);
+  const prev = useCallback4(
+    () => goTo((currentRef.current - 1 + N) % N),
+    [goTo, N]
+  );
+  const resetAuto = useCallback4(() => {
+    clearInterval(autoTimerRef.current);
+    if (settingsRef.current.auto) {
+      autoTimerRef.current = setInterval(next, autoPlayInterval);
+    }
+  }, [next, autoPlayInterval]);
+  useEffect4(() => {
+    if (!barrelRef.current || !cardRefs.current.length) return;
+    applyPositions(true);
+    resetAuto();
+  }, [applyPositions, resetAuto]);
+  useEffect4(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    const resize = () => {
+      if (!stageRef.current) return;
+      canvas.width = stageRef.current.offsetWidth;
+      canvas.height = stageRef.current.offsetHeight;
+    };
+    resize();
+    window.addEventListener("resize", resize);
+    let frameId;
+    const drawLoop = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      particlesRef.current = particlesRef.current.filter((p) => p.life > 0);
+      particlesRef.current.forEach((p) => {
+        p.x += p.vx;
+        p.y += p.vy;
+        p.vy += 0.06;
+        p.life -= p.decay;
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.r * p.life, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(255,255,255,${p.life * 0.55})`;
+        ctx.fill();
+      });
+      frameId = requestAnimationFrame(drawLoop);
+    };
+    drawLoop();
+    return () => {
+      window.removeEventListener("resize", resize);
+      cancelAnimationFrame(frameId);
+    };
+  }, []);
+  useEffect4(() => {
+    const lerp2 = (a, b, t) => a + (b - a) * t;
+    let frameId;
+    const loop = () => {
+      const { cx, cy, rx, ry } = cursorPosRef.current;
+      const { x, y } = mouseRef.current;
+      cursorPosRef.current.cx = lerp2(cx, x, 0.18);
+      cursorPosRef.current.cy = lerp2(cy, y, 0.18);
+      cursorPosRef.current.rx = lerp2(rx, x, 0.08);
+      cursorPosRef.current.ry = lerp2(ry, y, 0.08);
+      if (curRef.current) {
+        curRef.current.style.left = x + "px";
+        curRef.current.style.top = y + "px";
+      }
+      if (ringRef.current) {
+        ringRef.current.style.left = cursorPosRef.current.rx + "px";
+        ringRef.current.style.top = cursorPosRef.current.ry + "px";
+      }
+      const activeCard = cardRefs.current[currentRef.current];
+      if (activeCard && settingsRef.current.glare && stageRef.current) {
+        const r2 = activeCard.getBoundingClientRect();
+        const pr = stageRef.current.getBoundingClientRect();
+        const lx = x, ly = y;
+        const cx2 = r2.left + r2.width / 2 - pr.left;
+        const cy2 = r2.top + r2.height / 2 - pr.top;
+        const dx = (lx - cx2) / cardWidth;
+        const dy = (ly - cy2) / cardHeight;
+        const glare = activeCard.querySelector(".bc-glare");
+        if (glare) {
+          glare.style.background = `radial-gradient(circle at ${50 + dx * 35}% ${50 + dy * 35}%, rgba(255,255,255,0.16), transparent 60%)`;
+        }
+        gsap.to(activeCard, {
+          rotateX: -dy * 6,
+          rotateY: dx * 6,
+          duration: 0.4,
+          ease: "power2.out",
+          overwrite: "auto"
+        });
+      }
+      frameId = requestAnimationFrame(loop);
+    };
+    loop();
+    return () => cancelAnimationFrame(frameId);
+  }, [cardWidth, cardHeight]);
+  useEffect4(() => {
+    const stage = stageRef.current;
+    if (!stage) return;
+    const onMove = (e) => {
+      const r = stage.getBoundingClientRect();
+      mouseRef.current = { x: e.clientX - r.left, y: e.clientY - r.top };
+    };
+    const onLeave = () => {
+      const activeCard = cardRefs.current[currentRef.current];
+      if (activeCard) {
+        const glare = activeCard.querySelector(".bc-glare");
+        if (glare) glare.style.opacity = 0;
+        gsap.to(activeCard, {
+          rotateX: 0,
+          rotateY: 0,
+          duration: 0.6,
+          ease: "elastic.out(1,0.6)"
+        });
+      }
+    };
+    const onWheel = (e) => {
+      e.preventDefault();
+      wheelAccRef.current += e.deltaY;
+      clearTimeout(wheelTimerRef.current);
+      wheelTimerRef.current = setTimeout(() => {
+        if (Math.abs(wheelAccRef.current) > 60) {
+          wheelAccRef.current > 0 ? next() : prev();
+        }
+        wheelAccRef.current = 0;
+      }, 80);
+    };
+    const onTouchStart = (e) => {
+      touchStartRef.current = e.touches[0].pageX;
+    };
+    const onTouchEnd = (e) => {
+      const dx = e.changedTouches[0].pageX - touchStartRef.current;
+      if (dx < -40) next();
+      else if (dx > 40) prev();
+    };
+    const onKey = (e) => {
+      if (e.key === "ArrowRight") next();
+      if (e.key === "ArrowLeft") prev();
+    };
+    stage.addEventListener("mousemove", onMove);
+    stage.addEventListener("mouseleave", onLeave);
+    stage.addEventListener("wheel", onWheel, { passive: false });
+    stage.addEventListener("touchstart", onTouchStart, { passive: true });
+    stage.addEventListener("touchend", onTouchEnd);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      stage.removeEventListener("mousemove", onMove);
+      stage.removeEventListener("mouseleave", onLeave);
+      stage.removeEventListener("wheel", onWheel);
+      stage.removeEventListener("touchstart", onTouchStart);
+      stage.removeEventListener("touchend", onTouchEnd);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [next, prev]);
+  const toggleSetting = (key) => {
+    setSettings((prev2) => {
+      const next2 = { ...prev2, [key]: !prev2[key] };
+      settingsRef.current = next2;
+      if (key === "auto") {
+        clearInterval(autoTimerRef.current);
+        if (next2.auto)
+          autoTimerRef.current = setInterval(next2, autoPlayInterval);
+      }
+      return next2;
+    });
+  };
+  return /* @__PURE__ */ React4.createElement(
+    "div",
+    {
+      ref: stageRef,
+      style: {
+        width: "100%",
+        height: "600px",
+        background: "#000",
+        overflow: "hidden",
+        position: "relative",
+        cursor: "none",
+        fontFamily: "'Inter', system-ui, sans-serif"
+      }
+    },
+    showCursor && /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement("div", { ref: curRef, style: S.cursor }), /* @__PURE__ */ React4.createElement("div", { ref: ringRef, style: S.ring })),
+    /* @__PURE__ */ React4.createElement(
+      "div",
+      {
+        style: {
+          width: "100%",
+          height: "100%",
+          position: "relative",
+          perspective: `${perspective}px`,
+          perspectiveOrigin: "50% 45%"
+        }
+      },
+      /* @__PURE__ */ React4.createElement(
+        "div",
+        {
+          ref: barrelRef,
+          style: {
+            position: "absolute",
+            left: "50%",
+            top: "50%",
+            transformStyle: "preserve-3d",
+            transform: "translateX(-50%) translateY(-50%)"
+          }
+        },
+        slides.map((slide, i) => /* @__PURE__ */ React4.createElement(
+          "div",
+          {
+            key: i,
+            ref: (el) => cardRefs.current[i] = el,
+            onClick: () => {
+              if (!isAnimatingRef.current && i !== currentRef.current)
+                goTo(i);
+            },
+            style: {
+              position: "absolute",
+              width: cardWidth,
+              height: cardHeight,
+              marginLeft: -cardWidth / 2,
+              marginTop: -cardHeight / 2,
+              transformStyle: "preserve-3d",
+              cursor: "pointer",
+              transformOrigin: "center center"
+            }
+          },
+          /* @__PURE__ */ React4.createElement("div", { style: S.cardInner }, /* @__PURE__ */ React4.createElement(
+            "img",
+            {
+              className: "bc-img",
+              src: slide.img,
+              alt: slide.title,
+              loading: "lazy",
+              style: S.img,
+              draggable: false
+            }
+          ), /* @__PURE__ */ React4.createElement("div", { style: S.overlay }), /* @__PURE__ */ React4.createElement("div", { className: "bc-glare", style: S.glare }), /* @__PURE__ */ React4.createElement(
+            "div",
+            {
+              className: "bc-info",
+              style: {
+                ...S.info,
+                opacity: 0,
+                transform: "translateY(8px)"
+              }
+            },
+            slide.tag && /* @__PURE__ */ React4.createElement("div", { style: S.tag }, slide.tag),
+            /* @__PURE__ */ React4.createElement("div", { style: S.title }, slide.title),
+            slide.sub && /* @__PURE__ */ React4.createElement("div", { style: S.sub }, slide.sub)
+          ), /* @__PURE__ */ React4.createElement("div", { style: S.num }, "0", i + 1), /* @__PURE__ */ React4.createElement("div", { className: "bc-line", style: S.line }))
+        ))
+      )
+    ),
+    showScanlines && settings.scan && /* @__PURE__ */ React4.createElement("div", { style: S.scanlines }),
+    showVignette && /* @__PURE__ */ React4.createElement("div", { style: S.vignette }),
+    /* @__PURE__ */ React4.createElement("canvas", { ref: canvasRef, style: S.canvas }),
+    /* @__PURE__ */ React4.createElement("div", { style: S.topBar }, /* @__PURE__ */ React4.createElement("div", { style: S.logo }, "Carousel"), showCounter && /* @__PURE__ */ React4.createElement("div", { style: S.counter }, "0", current + 1, " / 0", N)),
+    showSettingsPanel && /* @__PURE__ */ React4.createElement("div", { style: S.settingsPanel }, [
+      ["Glare", "glare"],
+      ["Particles", "particles"],
+      ["Scanlines", "scan"],
+      ["Autoplay", "auto"],
+      ["Ken Burns", "kb"]
+    ].map(([label, key]) => /* @__PURE__ */ React4.createElement("div", { key, style: S.settingRow }, /* @__PURE__ */ React4.createElement("span", { style: S.settingLabel }, label), /* @__PURE__ */ React4.createElement(
+      "div",
+      {
+        onClick: () => toggleSetting(key),
+        style: {
+          ...S.toggle,
+          background: settings[key] ? "rgba(255,255,255,0.35)" : "rgba(255,255,255,0.12)"
+        }
+      },
+      /* @__PURE__ */ React4.createElement(
+        "div",
+        {
+          style: { ...S.knob, left: settings[key] ? "17px" : "3px" }
+        }
+      )
+    )))),
+    /* @__PURE__ */ React4.createElement("div", { style: S.controls }, /* @__PURE__ */ React4.createElement("button", { style: S.btn, onClick: prev }, "\u2190"), showDots && /* @__PURE__ */ React4.createElement("div", { style: { display: "flex", gap: "7px", alignItems: "center" } }, slides.map((_, i) => /* @__PURE__ */ React4.createElement(
+      "div",
+      {
+        key: i,
+        onClick: () => goTo(i),
+        style: {
+          width: i === current ? 22 : 6,
+          height: 6,
+          borderRadius: 3,
+          background: i === current ? "#fff" : "rgba(255,255,255,0.2)",
+          cursor: "pointer",
+          transition: "all 0.35s ease"
+        }
+      }
+    ))), /* @__PURE__ */ React4.createElement("button", { style: S.btn, onClick: next }, "\u2192"))
+  );
+};
+var S = {
+  cursor: {
+    position: "absolute",
+    width: 12,
+    height: 12,
+    borderRadius: "50%",
+    background: "#fff",
+    pointerEvents: "none",
+    zIndex: 999,
+    transform: "translate(-50%,-50%)",
+    mixBlendMode: "difference"
+  },
+  ring: {
+    position: "absolute",
+    width: 44,
+    height: 44,
+    borderRadius: "50%",
+    border: "1.5px solid rgba(255,255,255,0.5)",
+    pointerEvents: "none",
+    zIndex: 998,
+    transform: "translate(-50%,-50%)"
+  },
+  cardInner: {
+    width: "100%",
+    height: "100%",
+    borderRadius: 16,
+    overflow: "hidden",
+    position: "relative",
+    border: "1px solid rgba(255,255,255,0.08)"
+  },
+  img: {
+    width: "100%",
+    height: "100%",
+    objectFit: "cover",
+    display: "block",
+    pointerEvents: "none",
+    userSelect: "none"
+  },
+  overlay: {
+    position: "absolute",
+    inset: 0,
+    background: "linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.1) 55%, transparent 100%)",
+    borderRadius: 16
+  },
+  glare: {
+    position: "absolute",
+    inset: 0,
+    borderRadius: 16,
+    pointerEvents: "none",
+    opacity: 0.9
+  },
+  info: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    padding: "22px 20px",
+    transition: "none"
+  },
+  tag: {
+    fontSize: 9,
+    fontWeight: 600,
+    letterSpacing: "0.12em",
+    textTransform: "uppercase",
+    color: "rgba(255,255,255,0.5)",
+    marginBottom: 6
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: 700,
+    color: "#fff",
+    lineHeight: 1.2,
+    marginBottom: 4
+  },
+  sub: { fontSize: 12, color: "rgba(255,255,255,0.55)", lineHeight: 1.5 },
+  num: {
+    position: "absolute",
+    top: 16,
+    right: 18,
+    fontSize: 10,
+    fontWeight: 700,
+    color: "rgba(255,255,255,0.25)",
+    letterSpacing: "0.1em"
+  },
+  line: {
+    position: "absolute",
+    bottom: 0,
+    left: 20,
+    right: 20,
+    height: 2,
+    background: "linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent)",
+    transform: "scaleX(0)",
+    transformOrigin: "left",
+    borderRadius: 2
+  },
+  scanlines: {
+    position: "absolute",
+    inset: 0,
+    pointerEvents: "none",
+    zIndex: 50,
+    background: "repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.03) 3px, rgba(0,0,0,0.03) 4px)"
+  },
+  vignette: {
+    position: "absolute",
+    inset: 0,
+    pointerEvents: "none",
+    zIndex: 49,
+    background: "radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,0.75) 100%)"
+  },
+  canvas: { position: "absolute", inset: 0, pointerEvents: "none", zIndex: 60 },
+  topBar: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 100,
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "20px 28px"
+  },
+  logo: {
+    fontSize: 11,
+    fontWeight: 700,
+    letterSpacing: "0.2em",
+    color: "rgba(255,255,255,0.3)",
+    textTransform: "uppercase"
+  },
+  counter: {
+    fontSize: 11,
+    color: "rgba(255,255,255,0.25)",
+    fontWeight: 500,
+    letterSpacing: "0.06em"
+  },
+  settingsPanel: {
+    position: "absolute",
+    top: 56,
+    right: 28,
+    zIndex: 200,
+    display: "flex",
+    flexDirection: "column",
+    gap: 8,
+    alignItems: "flex-end"
+  },
+  settingRow: { display: "flex", alignItems: "center", gap: 8 },
+  settingLabel: {
+    fontSize: 10,
+    color: "rgba(255,255,255,0.3)",
+    letterSpacing: "0.06em",
+    textTransform: "uppercase"
+  },
+  toggle: {
+    width: 32,
+    height: 18,
+    borderRadius: 9,
+    border: "1px solid rgba(255,255,255,0.15)",
+    cursor: "pointer",
+    position: "relative",
+    transition: "background 0.25s"
+  },
+  knob: {
+    position: "absolute",
+    top: 3,
+    width: 12,
+    height: 12,
+    borderRadius: "50%",
+    background: "#fff",
+    transition: "left 0.2s"
+  },
+  controls: {
+    position: "absolute",
+    bottom: 26,
+    left: "50%",
+    transform: "translateX(-50%)",
+    zIndex: 100,
+    display: "flex",
+    alignItems: "center",
+    gap: 20
+  },
+  btn: {
+    width: 42,
+    height: 42,
+    borderRadius: "50%",
+    background: "rgba(255,255,255,0.07)",
+    border: "1px solid rgba(255,255,255,0.14)",
+    color: "#fff",
+    cursor: "pointer",
+    fontSize: 16,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backdropFilter: "blur(12px)"
+  }
+};
 export {
+  Carousel,
   MagneticButton,
   Navbar,
   SpotlightCard

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aura-ui-library",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "A modern and customizable UI library for React applications.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",