apex-ui-kit 2.2.0 → 2.3.0

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

@@ -0,0 +1,107 @@
+import React, { useEffect, useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Mic, MicOff } from "lucide-react";
+
+/*
+ * AI Voice Wave: layered glowing sine waves, like a phone assistant. Flat
+ * and calm when idle, lively while listening, a slow swell while thinking
+ * and full, syllable-like bursts while speaking. Tap to cycle the states or
+ * control `state` yourself.
+ */
+
+const LABELS = { idle: "Tap to talk", listening: "Listening…", thinking: "Thinking…", speaking: "Speaking…" };
+const ORDER = ["idle", "listening", "thinking", "speaking"];
+
+// How loud the voice "is" at time t for each state (0–1).
+const levelAt = (state, t) =>
+    state === "speaking" ? 0.45 + 0.55 * Math.abs(Math.sin(t * 8.5) * Math.sin(t * 2.1)) : state === "listening" ? 0.35 + 0.45 * Math.abs(Math.sin(t * 5.2) * Math.cos(t * 1.6)) : state === "thinking" ? 0.22 + 0.1 * Math.sin(t * 2) : 0.06;
+
+const AiVoiceWave = ({ state: stateProp, onStateChange, colors = ["#a3e635", "#22d3ee", "#a78bfa"], height = 9, showLabel = true, className = "" }) => {
+    const canvasRef = useRef(null);
+    const [inner, setInner] = useState("idle");
+    const state = stateProp ?? inner;
+    const stateRef = useRef(state);
+    stateRef.current = state;
+
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        const ctx = canvas.getContext("2d");
+        let raf = 0;
+        let level = 0.05;
+        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 draw = (now) => {
+            const t = now / 1000;
+            const { width: w, height: h } = canvas.getBoundingClientRect();
+            level += (levelAt(stateRef.current, t) - level) * 0.12;
+            ctx.clearRect(0, 0, w, h);
+            colors.forEach((c, k) => {
+                const amp = h * 0.42 * level * (1 - k * 0.18);
+                const freq = 1.6 + k * 0.7;
+                const phase = t * (2.2 + k * 0.9) * (stateRef.current === "thinking" ? 0.5 : 1);
+                ctx.beginPath();
+                for (let x = 0; x <= w; x += 2) {
+                    const u = x / w;
+                    // Taper both ends so the wave fades in from a flat line.
+                    const taper = Math.pow(Math.sin(Math.PI * u), 2.2);
+                    const y = h / 2 + Math.sin(u * Math.PI * 2 * freq + phase) * amp * taper;
+                    if (x === 0) ctx.moveTo(x, y);
+                    else ctx.lineTo(x, y);
+                }
+                ctx.strokeStyle = c;
+                ctx.lineWidth = 3 - k * 0.5;
+                ctx.shadowColor = c;
+                ctx.shadowBlur = 14;
+                ctx.globalAlpha = 0.85;
+                ctx.stroke();
+            });
+            ctx.globalAlpha = 1;
+            ctx.shadowBlur = 0;
+            raf = requestAnimationFrame(draw);
+        };
+        raf = requestAnimationFrame(draw);
+        return () => {
+            cancelAnimationFrame(raf);
+            ro.disconnect();
+        };
+    }, [colors]);
+
+    const next = () => {
+        const n = ORDER[(ORDER.indexOf(state) + 1) % ORDER.length];
+        if (stateProp === undefined) setInner(n);
+        onStateChange?.(n);
+    };
+
+    return (
+        <div className={`flex w-full max-w-xl flex-col items-center gap-4 ${className}`}>
+            <button type="button" onClick={next} aria-label={`Voice assistant: ${LABELS[state]}`} className="w-full rounded-3xl outline-none focus-visible:ring-2 focus-visible:ring-white/30">
+                <canvas ref={canvasRef} aria-hidden="true" className="block w-full" style={{ height: `${height}rem` }} />
+            </button>
+            {showLabel && <Label state={state} color={colors[0]} />}
+        </div>
+    );
+};
+
+function Label({ state, color }) {
+    return (
+        <div className="flex items-center gap-2 text-sm font-medium">
+            {state === "idle" ? <MicOff className="h-4 w-4 opacity-60" /> : <Mic className="h-4 w-4" style={{ color }} />}
+            <AnimatePresence mode="wait">
+                <motion.span key={state} initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -6 }} transition={{ duration: 0.18 }}>
+                    {LABELS[state]}
+                </motion.span>
+            </AnimatePresence>
+        </div>
+    );
+}
+
+export default AiVoiceWave;

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

@@ -0,0 +1,80 @@
+import React, { useId, useState } from "react";
+import { motion } from "framer-motion";
+import { Check, Moon, Sun, X } from "lucide-react";
+
+/*
+ * Animated Switch: a toggle with personality. Variants:
+ *  classic  – the familiar pill with a springy knob that stretches as it moves
+ *  icon     – the knob shows a cross or a check
+ *  daynight – a sun crosses into a starry night
+ *  neon     – a glowing track that lights up when on
+ * Works controlled (`checked` + `onChange`) or on its own (`defaultChecked`).
+ */
+
+const knobSpring = { type: "spring", stiffness: 520, damping: 32 };
+
+const AnimatedSwitch = ({ variant = "classic", checked, defaultChecked = false, onChange, label, accentColor = "#a3e635", size = 1, disabled = false, className = "" }) => {
+    const id = useId();
+    const [inner, setInner] = useState(defaultChecked);
+    const on = checked ?? inner;
+    const toggle = () => {
+        if (disabled) return;
+        if (checked === undefined) setInner(!on);
+        onChange?.(!on);
+    };
+
+    const W = 3.25 * size;
+    const H = 1.85 * size;
+    const K = H - 0.35 * size;
+    const travel = W - K - 0.35 * size;
+
+    const track = {
+        classic: { background: on ? accentColor : "rgba(120,120,128,0.32)" },
+        icon: { background: on ? accentColor : "rgba(120,120,128,0.32)" },
+        daynight: { background: on ? "linear-gradient(135deg,#0f172a,#312e81)" : "linear-gradient(135deg,#7dd3fc,#38bdf8)" },
+        neon: { background: "#0a0a0a", boxShadow: on ? `0 0 0 1.5px ${accentColor}, 0 0 18px ${accentColor}99, inset 0 0 12px ${accentColor}55` : "0 0 0 1.5px rgba(255,255,255,0.15)" },
+    }[variant];
+
+    return (
+        <label htmlFor={id} className={`inline-flex select-none items-center gap-3 ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"} ${className}`}>
+            <button
+                id={id}
+                type="button"
+                role="switch"
+                aria-checked={on}
+                disabled={disabled}
+                onClick={toggle}
+                className="relative shrink-0 overflow-hidden rounded-full outline-none transition-[background,box-shadow] duration-300 focus-visible:ring-2 focus-visible:ring-offset-2"
+                style={{ width: `${W}rem`, height: `${H}rem`, ...track }}
+            >
+                {variant === "daynight" && (
+                    <>
+                        {[0.9, 1.6, 2.2, 1.2].map((x, i) => (
+                            <motion.span
+                                key={i}
+                                className="absolute h-[0.14rem] w-[0.14rem] rounded-full bg-white"
+                                style={{ left: `${x * size * 0.7}rem`, top: `${(0.35 + (i % 2) * 0.55) * size}rem` }}
+                                animate={{ opacity: on ? [0.3, 1, 0.3] : 0, scale: on ? 1 : 0 }}
+                                transition={{ duration: 1.6, repeat: on ? Infinity : 0, delay: i * 0.3 }}
+                            />
+                        ))}
+                        <motion.span className="absolute rounded-full bg-white/80" style={{ width: `${0.9 * size}rem`, height: `${0.35 * size}rem`, top: `${1.05 * size}rem` }} animate={{ left: on ? `${-1.2 * size}rem` : `${1.7 * size}rem`, opacity: on ? 0 : 1 }} transition={{ duration: 0.4 }} />
+                    </>
+                )}
+                <motion.span
+                    className="absolute grid place-items-center rounded-full shadow-[0_2px_6px_rgba(0,0,0,0.3)]"
+                    style={{ left: `${0.175 * size}rem`, top: `${(H - K) / 2}rem`, height: `${K}rem`, background: variant === "daynight" ? (on ? "#e2e8f0" : "#fde047") : variant === "neon" ? (on ? accentColor : "#3f3f46") : "#ffffff" }}
+                    initial={false}
+                    animate={{ x: on ? `${travel}rem` : "0rem", width: on ? [`${K}rem`, `${K * 1.25}rem`, `${K}rem`] : [`${K}rem`, `${K * 1.24}rem`, `${K}rem`] }}
+                    transition={{ x: knobSpring, width: { duration: 0.3 } }}
+                >
+                    {variant === "icon" && (on ? <Check className="h-3/5 w-3/5" style={{ color: accentColor }} strokeWidth={3} /> : <X className="h-3/5 w-3/5 text-neutral-400" strokeWidth={3} />)}
+                    {variant === "daynight" && (on ? <Moon className="h-3/5 w-3/5 text-slate-500" fill="currentColor" /> : <Sun className="h-3/5 w-3/5 text-amber-600" />)}
+                </motion.span>
+            </button>
+            {label && <span className="text-sm font-medium">{label}</span>}
+        </label>
+    );
+};
+
+export default AnimatedSwitch;

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

@@ -76,7 +76,15 @@ const AnimatedTabs = ({ tabs = DEFAULT_TABS, defaultTab, variant = "pill", accen
                     );
                 })}
             </div>
-            <div id={`${id}-panel`} role="tabpanel" aria-labelledby={`${id}-tab-${active}`} className="relative mt-4 min-h-[6rem] overflow-hidden">
+            <div id={`${id}-panel`} role="tabpanel" aria-labelledby={`${id}-tab-${active}`} className="relative mt-4 grid min-h-[6rem] overflow-hidden">
+                {/* Invisible copies of every panel reserve the tallest height, so the
+                    tab bar never jumps when panels of different lengths swap. */}
+                {tabs.map((t) => (
+                    <div key={t.id} aria-hidden="true" className="invisible col-start-1 row-start-1 p-5 text-[0.92rem] leading-relaxed">
+                        <p className="mb-1.5 text-[1rem] font-semibold">{t.label}</p>
+                        {t.content}
+                    </div>
+                ))}
                 <AnimatePresence mode="popLayout" initial={false} custom={dir}>
                     <motion.div
                         key={active}
@@ -85,7 +93,7 @@ const AnimatedTabs = ({ tabs = DEFAULT_TABS, defaultTab, variant = "pill", accen
                         animate={{ opacity: 1, x: 0, filter: "blur(0px)" }}
                         exit={{ opacity: 0, x: dir * -24, filter: "blur(4px)" }}
                         transition={{ duration: 0.28, ease: [0.22, 1, 0.36, 1] }}
-                        className={`rounded-2xl p-5 text-[0.92rem] leading-relaxed ${dark ? "bg-white/[0.04] text-white/75" : "bg-black/[0.03] text-neutral-600"}`}
+                        className={`col-start-1 row-start-1 h-full rounded-2xl p-5 text-[0.92rem] leading-relaxed ${dark ? "bg-white/[0.04] text-white/75" : "bg-black/[0.03] text-neutral-600"}`}
                     >
                         <p className={`mb-1.5 text-[1rem] font-semibold ${dark ? "text-white" : "text-neutral-900"}`}>{current?.label}</p>
                         {current?.content}

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

@@ -0,0 +1,48 @@
+import React from "react";
+
+/*
+ * Aurora Background: soft northern-light bands that drift and shimmer, built
+ * from blurred CSS gradients only (no canvas, no WebGL). Works on light and
+ * dark pages; reduced-motion visitors get the same picture without movement.
+ */
+
+const AuroraBackground = ({
+    children,
+    colors = ["#22d3ee", "#a3e635", "#a78bfa", "#38bdf8"],
+    theme = "dark",
+    speed = 1,
+    intensity = 1,
+    className = "",
+    containerClassName = "",
+}) => {
+    const dark = theme !== "light";
+    const stops = colors.map((c, i) => `${c} ${Math.round((i / colors.length) * 100)}%`).join(", ");
+    const duration = `${60 / Math.max(0.1, speed)}s`;
+
+    return (
+        <div className={`relative h-screen w-full overflow-hidden ${dark ? "bg-[#05060a]" : "bg-[#f8fafc]"} ${containerClassName}`}>
+            <style>{`
+                @keyframes apex-aurora { from { background-position: 50% 50%, 50% 50%; } to { background-position: 350% 50%, 350% 50%; } }
+                @media (prefers-reduced-motion: reduce) { .apex-aurora, .apex-aurora::after { animation: none !important; } }
+            `}</style>
+            <div
+                aria-hidden="true"
+                className="apex-aurora pointer-events-none absolute -inset-[10px] will-change-transform after:absolute after:inset-0 after:content-['']"
+                style={{
+                    opacity: Math.min(1, (dark ? 0.9 : 0.75) * intensity),
+                    filter: `blur(${dark ? 12 : 10}px) ${dark ? "" : "invert(0)"}`,
+                    backgroundImage: `repeating-linear-gradient(100deg, ${dark ? "#000" : "#fff"} 0%, ${dark ? "#000" : "#fff"} 7%, transparent 10%, transparent 12%, ${dark ? "#000" : "#fff"} 16%), repeating-linear-gradient(100deg, ${stops}, ${colors[0]} 100%)`,
+                    backgroundSize: "300%, 200%",
+                    backgroundPosition: "50% 50%, 50% 50%",
+                    maskImage: "radial-gradient(ellipse 120% 95% at 70% 0%, black 25%, transparent 78%)",
+                    WebkitMaskImage: "radial-gradient(ellipse 120% 95% at 70% 0%, black 25%, transparent 78%)",
+                    animation: `apex-aurora ${duration} linear infinite`,
+                    mixBlendMode: dark ? "normal" : "multiply",
+                }}
+            />
+            {children && <div className={`relative z-10 h-full w-full ${className}`}>{children}</div>}
+        </div>
+    );
+};
+
+export default AuroraBackground;

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

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+
+/*
+ * Bounce Cards: a hand of photo cards that bounce into a fan on mount.
+ * Hover one and it straightens and lifts while its neighbours lean away to
+ * make room; move off and everything settles back into the fan.
+ */
+
+const IK = "https://ik.imagekit.io/ny6yinyut/apexui/assets";
+const img = (n) => `${IK}/${n}.png?tr=f-auto,q-80,w-400`;
+const DEFAULT_IMAGES = [img("hulk"), img("captainamerica"), img("spiderman"), img("doctorStrange"), img("black-panther")];
+
+const BounceCards = ({ images = DEFAULT_IMAGES, cardSize = 9, spread = 5.5, fan = 8, delay = 0.2, className = "" }) => {
+    const [hovered, setHovered] = useState(null);
+    const mid = (images.length - 1) / 2;
+
+    return (
+        <div className={`relative flex items-center justify-center ${className}`} style={{ width: `min(${cardSize + spread * (images.length - 1) + 4}rem, 92vw)`, height: `${cardSize * 1.5}rem` }} onPointerLeave={() => setHovered(null)}>
+            {images.map((src, i) => {
+                const off = i - mid;
+                let x = off * spread;
+                let rotate = off * fan;
+                let y = Math.abs(off) * 0.6;
+                if (hovered !== null) {
+                    if (i === hovered) {
+                        rotate = 0;
+                        y = -1;
+                    } else {
+                        // Neighbours lean away, closer ones more.
+                        const d = i - hovered;
+                        x += Math.sign(d) * Math.max(0, 3 - Math.abs(d) * 0.8);
+                    }
+                }
+                return (
+                    <motion.div
+                        key={i}
+                        className="absolute overflow-hidden rounded-[1.4rem] border-[0.35rem] border-white bg-white shadow-[0_18px_40px_-18px_rgba(0,0,0,0.55)]"
+                        style={{ width: `${cardSize}rem`, height: `${cardSize}rem`, zIndex: i === hovered ? 50 : 10 - Math.abs(Math.round(off)) }}
+                        initial={{ scale: 0, x: 0, y: "0rem", rotate: 0 }}
+                        animate={{ scale: i === hovered ? 1.06 : 1, x: `${x}rem`, y: `${y}rem`, rotate }}
+                        transition={{ type: "spring", stiffness: 260, damping: 14, delay: hovered === null ? delay + i * 0.06 : 0 }}
+                        onPointerEnter={() => setHovered(i)}
+                    >
+                        <img src={src} alt="" draggable="false" className="h-full w-full bg-neutral-200 object-cover" />
+                    </motion.div>
+                );
+            })}
+        </div>
+    );
+};
+
+export default BounceCards;

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

@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from "react";
+import { motion } from "framer-motion";
+import { Code2, Layers, Sparkles, Zap } from "lucide-react";
+
+/*
+ * Card Swap 3D: cards stacked diagonally into the distance in 3D. On a
+ * timer the front card drops away and slides to the back of the stack
+ * while the rest step forward. Pauses while hovered; click to swap now.
+ */
+
+const DEFAULT_CARDS = [
+    { icon: Sparkles, title: "Smooth", body: "Springs tuned to feel natural, never floaty." },
+    { icon: Layers, title: "Composable", body: "Drop components in and style them with Tailwind." },
+    { icon: Code2, title: "Yours", body: "Copy the source or add it with one CLI command." },
+    { icon: Zap, title: "Fast", body: "Transforms and opacity only — 60fps on phones." },
+];
+
+const CardSwap3D = ({ cards = DEFAULT_CARDS, delay = 3200, distanceX = 3.6, distanceY = 3.2, skew = 5, pauseOnHover = true, accentColor = "#a3e635", theme = "dark", width = 18, className = "" }) => {
+    // order[0] is the card in front.
+    const [order, setOrder] = useState(() => cards.map((_, i) => i));
+    const [dropping, setDropping] = useState(null);
+    const [paused, setPaused] = useState(false);
+    const dark = theme !== "light";
+
+    const swap = () => {
+        if (dropping !== null) return;
+        setDropping(order[0]);
+        setTimeout(() => {
+            setOrder((o) => [...o.slice(1), o[0]]);
+            setDropping(null);
+        }, 520);
+    };
+
+    useEffect(() => {
+        if (paused) return undefined;
+        const id = setInterval(swap, delay);
+        return () => clearInterval(id);
+    });
+
+    return (
+        <div
+            className={`relative [perspective:1000px] ${className}`}
+            style={{ width: `min(${width}rem, 70vw)`, height: `${width * 0.68}rem`, marginTop: `${distanceY * (cards.length - 1)}rem`, marginRight: `${distanceX * (cards.length - 1)}rem` }}
+            onPointerEnter={() => pauseOnHover && setPaused(true)}
+            onPointerLeave={() => setPaused(false)}
+            onClick={swap}
+        >
+            {cards.map((card, i) => {
+                const slot = order.indexOf(i);
+                const isDropping = dropping === i;
+                const Icon = card.icon ?? Sparkles;
+                return (
+                    <motion.div
+                        key={i}
+                        className={`absolute inset-0 cursor-pointer overflow-hidden rounded-2xl border p-6 [backface-visibility:hidden] ${dark ? "border-white/10 bg-neutral-950 text-white" : "border-black/10 bg-white text-neutral-900"}`}
+                        style={{ zIndex: isDropping ? 60 : cards.length - slot, transformStyle: "preserve-3d", boxShadow: "0 25px 50px -25px rgba(0,0,0,0.6)" }}
+                        initial={false}
+                        animate={
+                            isDropping
+                                ? { x: "0rem", y: "14rem", z: 0, skewY: skew, opacity: 0.0 }
+                                : { x: `${slot * distanceX}rem`, y: `${-slot * distanceY}rem`, z: -slot * 60, skewY: skew, opacity: slot > 4 ? 0 : 1 }
+                        }
+                        transition={isDropping ? { duration: 0.5, ease: [0.55, 0, 0.8, 0.2] } : { type: "spring", stiffness: 140, damping: 20 }}
+                    >
+                        <div className="flex items-center gap-2.5">
+                            <span className="grid h-9 w-9 place-items-center rounded-xl text-black" style={{ background: accentColor }}>
+                                <Icon className="h-4.5 w-4.5" />
+                            </span>
+                            <p className="text-lg font-semibold">{card.title}</p>
+                        </div>
+                        <p className={`mt-3 text-[0.92rem] leading-relaxed ${dark ? "text-white/60" : "text-neutral-500"}`}>{card.body}</p>
+                        <div className="pointer-events-none absolute -bottom-10 -right-10 h-32 w-32 rounded-full opacity-20 blur-2xl" style={{ background: accentColor }} />
+                    </motion.div>
+                );
+            })}
+        </div>
+    );
+};
+
+export default CardSwap3D;

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

@@ -0,0 +1,49 @@
+import React, { useRef } from "react";
+import { useAnimationFrame, useReducedMotion } from "framer-motion";
+
+/*
+ * Circular Text: a line of text wrapped around a circle that keeps turning.
+ * On hover it can speed up, slow down, pause or spin wildly. Put anything in
+ * the middle with children.
+ */
+
+const HOVER_SPEED = { speedUp: 4, slowDown: 0.25, pause: 0, goBonkers: 14, none: 1 };
+
+const CircularText = ({ text = "APEX UI • MOTION • COMPONENTS • ", size = 11, duration = 18, onHover = "speedUp", color = "currentColor", children, className = "" }) => {
+    const reduced = useReducedMotion();
+    const ring = useRef(null);
+    const angle = useRef(0);
+    const speed = useRef(1);
+    const target = useRef(1);
+    const chars = Array.from(text);
+
+    useAnimationFrame((_, delta) => {
+        if (reduced || !ring.current) return;
+        speed.current += (target.current - speed.current) * 0.06;
+        angle.current = (angle.current + (360 / duration) * (delta / 1000) * speed.current) % 360;
+        const s = onHover === "goBonkers" && target.current > 1 ? 1 + Math.min(0.12, (speed.current - 1) * 0.01) : 1;
+        ring.current.style.transform = `rotate(${angle.current}deg) scale(${s})`;
+    });
+
+    return (
+        <div
+            className={`relative grid place-items-center rounded-full ${className}`}
+            style={{ width: `${size}rem`, height: `${size}rem`, color }}
+            onPointerEnter={() => (target.current = HOVER_SPEED[onHover] ?? 1)}
+            onPointerLeave={() => (target.current = 1)}
+            aria-label={text}
+            role="img"
+        >
+            <div ref={ring} className="absolute inset-0" aria-hidden="true">
+                {chars.map((c, i) => (
+                    <span key={i} className="absolute left-1/2 top-0 h-1/2 origin-bottom text-[0.95rem] font-bold uppercase" style={{ transform: `translateX(-50%) rotate(${(i / chars.length) * 360}deg)` }}>
+                        {c}
+                    </span>
+                ))}
+            </div>
+            {children && <div className="relative">{children}</div>}
+        </div>
+    );
+};
+
+export default CircularText;

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

@@ -0,0 +1,72 @@
+import React, { useEffect, useRef } from "react";
+
+/*
+ * Click Spark: wrap anything and every click throws out a ring of short
+ * spark lines from the pointer that shoot out and fade. Drawn on a canvas
+ * overlay so it never blocks clicks underneath.
+ */
+
+const ease = (t) => t * (2 - t);
+
+const ClickSpark = ({ sparkColor = "#a3e635", sparkCount = 10, sparkRadius = 26, sparkSize = 12, duration = 450, children, className = "" }) => {
+    const wrap = useRef(null);
+    const canvas = useRef(null);
+    const sparks = useRef([]);
+    const raf = useRef(0);
+
+    useEffect(() => {
+        const c = canvas.current;
+        const resize = () => {
+            const r = wrap.current.getBoundingClientRect();
+            const dpr = Math.min(window.devicePixelRatio || 1, 2);
+            c.width = r.width * dpr;
+            c.height = r.height * dpr;
+            c.getContext("2d").setTransform(dpr, 0, 0, dpr, 0, 0);
+        };
+        const ro = new ResizeObserver(resize);
+        ro.observe(wrap.current);
+        resize();
+        return () => {
+            ro.disconnect();
+            cancelAnimationFrame(raf.current);
+        };
+    }, []);
+
+    const draw = () => {
+        const ctx = canvas.current.getContext("2d");
+        const now = performance.now();
+        ctx.clearRect(0, 0, canvas.current.width, canvas.current.height);
+        sparks.current = sparks.current.filter((s) => now - s.start < duration);
+        for (const s of sparks.current) {
+            const p = ease((now - s.start) / duration);
+            const dist = p * sparkRadius;
+            const len = sparkSize * (1 - p);
+            ctx.strokeStyle = sparkColor;
+            ctx.lineWidth = 2;
+            ctx.lineCap = "round";
+            ctx.beginPath();
+            ctx.moveTo(s.x + dist * Math.cos(s.a), s.y + dist * Math.sin(s.a));
+            ctx.lineTo(s.x + (dist + len) * Math.cos(s.a), s.y + (dist + len) * Math.sin(s.a));
+            ctx.stroke();
+        }
+        raf.current = sparks.current.length ? requestAnimationFrame(draw) : 0;
+    };
+
+    const onClick = (e) => {
+        const r = wrap.current.getBoundingClientRect();
+        const x = e.clientX - r.left;
+        const y = e.clientY - r.top;
+        const start = performance.now();
+        for (let i = 0; i < sparkCount; i++) sparks.current.push({ x, y, a: (Math.PI * 2 * i) / sparkCount, start });
+        if (!raf.current) raf.current = requestAnimationFrame(draw);
+    };
+
+    return (
+        <div ref={wrap} className={`relative ${className}`} onClick={onClick}>
+            {children}
+            <canvas ref={canvas} aria-hidden="true" className="pointer-events-none absolute inset-0 h-full w-full" />
+        </div>
+    );
+};
+
+export default ClickSpark;

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

@@ -0,0 +1,108 @@
+import React, { useRef, useState } from "react";
+import { motion } from "framer-motion";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+/*
+ * Coverflow 3D: the classic album-flip view. The centre cover faces you,
+ * the rest stand angled on either side and slide back in depth, each with a
+ * soft reflection. Drag / swipe, click a cover, or use the arrow keys.
+ */
+
+const IK = "https://ik.imagekit.io/ny6yinyut/apexui/assets";
+const img = (n) => `${IK}/${n}.png?tr=f-auto,q-80,w-500`;
+const DEFAULT_ITEMS = [
+    { image: img("spiderman"), title: "Spider-Man" },
+    { image: img("black-panther"), title: "Black Panther" },
+    { image: img("hulk"), title: "Hulk" },
+    { image: img("captainamerica"), title: "Captain America" },
+    { image: img("doctorStrange"), title: "Doctor Strange" },
+    { image: img("thanos"), title: "Thanos" },
+    { image: img("ironman"), title: "Iron Man" },
+];
+
+const Coverflow3D = ({ items = DEFAULT_ITEMS, initialIndex = 2, size = 12, angle = 55, gap = 0.42, reflection = true, accentColor = "#a3e635", className = "" }) => {
+    const [index, setIndex] = useState(initialIndex);
+    const drag = useRef(null);
+    const clamp = (i) => Math.max(0, Math.min(items.length - 1, i));
+    const go = (i) => setIndex(clamp(i));
+
+    return (
+        <div
+            className={`flex w-full flex-col items-center gap-6 outline-none ${className}`}
+            tabIndex={0}
+            onKeyDown={(e) => {
+                if (e.key === "ArrowRight") go(index + 1);
+                if (e.key === "ArrowLeft") go(index - 1);
+            }}
+            aria-roledescription="carousel"
+            aria-label="Coverflow"
+        >
+            <div
+                className="relative w-full touch-pan-y select-none overflow-hidden [perspective:1100px]"
+                style={{ height: `${size * (reflection ? 1.55 : 1.15)}rem` }}
+                onPointerDown={(e) => (drag.current = { x: e.clientX, start: index, moved: false })}
+                onPointerMove={(e) => {
+                    const d = drag.current;
+                    if (!d) return;
+                    const steps = Math.round((d.x - e.clientX) / 70);
+                    if (steps !== 0) d.moved = true;
+                    go(d.start + steps);
+                }}
+                onPointerUp={() => setTimeout(() => (drag.current = null))}
+                onPointerLeave={() => (drag.current = null)}
+            >
+                {items.map((item, i) => {
+                    const off = i - index;
+                    const abs = Math.abs(off);
+                    const side = Math.sign(off);
+                    return (
+                        <motion.button
+                            key={i}
+                            type="button"
+                            aria-label={item.title}
+                            aria-current={off === 0}
+                            onClick={() => !drag.current?.moved && go(i)}
+                            className="absolute left-1/2 top-[6%] [transform-style:preserve-3d]"
+                            style={{ width: `${size}rem`, height: `${size}rem`, marginLeft: `-${size / 2}rem`, zIndex: 100 - abs }}
+                            initial={false}
+                            animate={{
+                                x: off === 0 ? "0%" : `${side * (55 + (abs - 1) * gap * 100)}%`,
+                                z: off === 0 ? 60 : -120 - abs * 20,
+                                rotateY: off === 0 ? 0 : -side * angle,
+                                opacity: abs > 4 ? 0 : 1,
+                            }}
+                            transition={{ type: "spring", stiffness: 220, damping: 30 }}
+                        >
+                            <span className="relative block h-full w-full overflow-hidden rounded-xl shadow-[0_25px_50px_-20px_rgba(0,0,0,0.7)] ring-1 ring-white/10">
+                                <img src={item.image} alt="" draggable="false" className="h-full w-full bg-neutral-900 object-cover" />
+                                <motion.span className="absolute inset-0 bg-black" initial={false} animate={{ opacity: off === 0 ? 0 : Math.min(0.55, 0.25 + abs * 0.1) }} />
+                            </span>
+                            {reflection && (
+                                <span aria-hidden="true" className="pointer-events-none absolute left-0 top-full mt-1 block h-1/2 w-full overflow-hidden rounded-xl opacity-30 [mask-image:linear-gradient(to_bottom,black,transparent_70%)]">
+                                    <img src={item.image} alt="" draggable="false" className="h-[200%] w-full -scale-y-100 object-cover" />
+                                </span>
+                            )}
+                        </motion.button>
+                    );
+                })}
+            </div>
+
+            <div className="flex items-center gap-4">
+                <button type="button" aria-label="Previous" onClick={() => go(index - 1)} disabled={index === 0} className="grid h-10 w-10 place-items-center rounded-full border border-current/20 transition hover:scale-105 active:scale-95 disabled:opacity-30">
+                    <ChevronLeft className="h-5 w-5" />
+                </button>
+                <p className="min-w-[9rem] text-center text-sm font-semibold">
+                    {items[index].title}
+                    <span className="mt-0.5 block font-mono text-[0.7rem] font-normal opacity-50">
+                        {index + 1} / {items.length}
+                    </span>
+                </p>
+                <button type="button" aria-label="Next" onClick={() => go(index + 1)} disabled={index === items.length - 1} className="grid h-10 w-10 place-items-center rounded-full border border-current/20 transition hover:scale-105 active:scale-95 disabled:opacity-30" style={{ color: index === items.length - 1 ? undefined : accentColor }}>
+                    <ChevronRight className="h-5 w-5" />
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default Coverflow3D;