apex-ui-kit 2.1.1 → 2.1.3

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

@@ -0,0 +1,189 @@
+import React, { useEffect, useRef } from "react";
+
+/*
+ * Dot Wave Background: a grid of dots on a canvas with a slow wave of color
+ * rolling through it. Dots near the pointer swell, light up and lean away.
+ * Pauses while off screen and stays still for reduced-motion users.
+ */
+
+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 POINTER_RADIUS = 150;
+
+const DotWaveBackground = ({
+    children,
+    className = "",
+    containerClassName = "",
+    background = "#09090b",
+    dotColor = "#ffffff",
+    colors = ["#38bdf8", "#a78bfa"],
+    gap = 22,
+    dotSize = 1.2,
+    waveStrength = 1,
+    speed = 1,
+    interactive = true,
+    fade = true,
+}) => {
+    const containerRef = useRef(null);
+    const canvasRef = useRef(null);
+    const pointer = useRef({ x: -9999, y: -9999, active: false, strength: 0 });
+    const redraw = useRef(() => {});
+    const settings = useRef(null);
+    settings.current = { dotColor, colors, gap, dotSize, waveStrength, speed, interactive };
+
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        const container = containerRef.current;
+        const ctx = canvas.getContext("2d");
+        const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        let width = 0;
+        let height = 0;
+        let raf = 0;
+        let t = 0;
+        let last = performance.now();
+        let visible = true;
+
+        const draw = () => {
+            const s = settings.current;
+            const base = hexToRgb(s.dotColor);
+            const ca = hexToRgb(s.colors[0]);
+            const cb = hexToRgb(s.colors[1] ?? s.colors[0]);
+            const p = pointer.current;
+            p.strength += ((p.active && s.interactive && !reduced ? 1 : 0) - p.strength) * 0.08;
+
+            ctx.clearRect(0, 0, width, height);
+            const g = Math.max(8, s.gap);
+            const cols = Math.ceil(width / g) + 1;
+            const rows = Math.ceil(height / g) + 1;
+            const ox = (width - (cols - 1) * g) / 2;
+            const oy = (height - (rows - 1) * g) / 2;
+
+            for (let i = 0; i < cols; i++) {
+                const x0 = ox + i * g;
+                // Highlight color drifts from the first to the second color left to right.
+                const m = width ? Math.min(1, Math.max(0, x0 / width)) : 0;
+                const hr = ca[0] + (cb[0] - ca[0]) * m;
+                const hg = ca[1] + (cb[1] - ca[1]) * m;
+                const hb = ca[2] + (cb[2] - ca[2]) * m;
+
+                for (let j = 0; j < rows; j++) {
+                    const y0 = oy + j * g;
+                    // A diagonal band plus a ripple spreading from the centre.
+                    const ripple = Math.hypot(x0 - width / 2, y0 - height / 2);
+                    const wave = 0.55 * Math.sin(x0 * 0.009 + y0 * 0.005 - t * 1.3) + 0.45 * Math.sin(ripple * 0.018 - t * 1.6);
+                    const lift = Math.min(1, Math.max(0, (wave + 0.3) / 0.95));
+                    const v = Math.min(1, lift * lift * s.waveStrength);
+
+                    let x = x0;
+                    let y = y0;
+                    let boost = 0;
+                    if (p.strength > 0.01) {
+                        const dx = x0 - p.x;
+                        const dy = y0 - p.y;
+                        const d = Math.hypot(dx, dy);
+                        if (d < POINTER_RADIUS) {
+                            boost = (1 - d / POINTER_RADIUS) ** 2 * p.strength;
+                            const push = (boost * 9) / (d || 1);
+                            x += dx * push;
+                            y += dy * push;
+                        }
+                    }
+
+                    const k = Math.min(1, v + boost);
+                    const r = s.dotSize * (1 + v * 1.9 + boost * 1.8);
+                    ctx.fillStyle = `rgba(${Math.round(base[0] + (hr - base[0]) * k)},${Math.round(base[1] + (hg - base[1]) * k)},${Math.round(base[2] + (hb - base[2]) * k)},${0.13 + k * 0.87})`;
+                    ctx.beginPath();
+                    ctx.arc(x, y, r, 0, Math.PI * 2);
+                    ctx.fill();
+                }
+            }
+        };
+        redraw.current = draw;
+
+        const loop = (now) => {
+            const dt = Math.min(0.05, (now - last) / 1000);
+            last = now;
+            t += dt * settings.current.speed;
+            draw();
+            raf = requestAnimationFrame(loop);
+        };
+        const start = () => {
+            if (reduced || raf || !visible) return;
+            last = performance.now();
+            raf = requestAnimationFrame(loop);
+        };
+        const stop = () => {
+            cancelAnimationFrame(raf);
+            raf = 0;
+        };
+
+        const resize = () => {
+            const rect = container.getBoundingClientRect();
+            const dpr = Math.min(window.devicePixelRatio || 1, 2);
+            width = rect.width;
+            height = rect.height;
+            canvas.width = Math.round(width * dpr);
+            canvas.height = Math.round(height * dpr);
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+            draw();
+        };
+
+        const ro = new ResizeObserver(resize);
+        ro.observe(container);
+        const io = new IntersectionObserver(([entry]) => {
+            visible = entry.isIntersecting;
+            if (visible) start();
+            else stop();
+        });
+        io.observe(container);
+        resize();
+        start();
+
+        return () => {
+            stop();
+            ro.disconnect();
+            io.disconnect();
+        };
+    }, []);
+
+    // Reduced motion draws one still frame, so redraw when the props change.
+    useEffect(() => {
+        redraw.current();
+    }, [dotColor, colors, gap, dotSize, waveStrength]);
+
+    const onPointerMove = (e) => {
+        const rect = containerRef.current.getBoundingClientRect();
+        pointer.current.x = e.clientX - rect.left;
+        pointer.current.y = e.clientY - rect.top;
+        pointer.current.active = true;
+    };
+    const onPointerLeave = () => {
+        pointer.current.active = false;
+    };
+
+    return (
+        <div
+            ref={containerRef}
+            onPointerMove={interactive ? onPointerMove : undefined}
+            onPointerLeave={onPointerLeave}
+            onPointerCancel={onPointerLeave}
+            className={`relative h-screen w-full overflow-hidden ${containerClassName}`}
+            style={{ background }}
+        >
+            <canvas
+                ref={canvasRef}
+                aria-hidden="true"
+                className="pointer-events-none absolute inset-0 h-full w-full"
+                style={fade ? { maskImage: "radial-gradient(ellipse 80% 75% at 50% 50%, #000 35%, transparent 100%)", WebkitMaskImage: "radial-gradient(ellipse 80% 75% at 50% 50%, #000 35%, transparent 100%)" } : undefined}
+            />
+            {children && <div className={`relative z-10 h-full w-full ${className}`}>{children}</div>}
+        </div>
+    );
+};
+
+export default DotWaveBackground;

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

@@ -0,0 +1,221 @@
+import React, { useEffect, useRef, useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import { MessageCircle, Pause, Phone, PhoneOff, Play, SkipBack, SkipForward, Timer } from "lucide-react";
+
+/*
+ * Dynamic Island: a black capsule that morphs between live activities —
+ * idle, music, call, timer and notification. Click the music view to expand
+ * it. Runs through the views on its own, or follows a controlled `view`.
+ */
+
+const IK = "https://ik.imagekit.io/ny6yinyut/apexui/assets";
+const ALL_VIEWS = ["idle", "music", "call", "timer", "notification"];
+
+// Capsule size per view, in rem so it scales with the page's font size.
+const SIZES = {
+    idle: { width: "7.5rem", height: "2.1rem", borderRadius: "1.05rem" },
+    music: { width: "17rem", height: "2.6rem", borderRadius: "1.3rem" },
+    musicExpanded: { width: "22rem", height: "11.25rem", borderRadius: "2.4rem" },
+    call: { width: "22rem", height: "4.6rem", borderRadius: "2.3rem" },
+    timer: { width: "14rem", height: "2.6rem", borderRadius: "1.3rem" },
+    notification: { width: "22rem", height: "4.6rem", borderRadius: "2.3rem" },
+};
+
+const spring = { type: "spring", stiffness: 380, damping: 32, mass: 0.9 };
+
+const formatTime = (s) => `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
+
+function Waveform({ color, playing, moving }) {
+    const bars = [0.55, 1, 0.7, 0.9, 0.45];
+    return (
+        <span className="flex h-4 items-center gap-[3px]" aria-hidden="true">
+            {bars.map((peak, i) => (
+                <motion.span
+                    key={i}
+                    className="w-[3px] origin-center rounded-full"
+                    style={{ backgroundColor: color, height: "100%" }}
+                    animate={playing && moving ? { scaleY: [0.3, peak, 0.4, peak * 0.8, 0.3] } : { scaleY: 0.3 }}
+                    transition={playing && moving ? { duration: 0.9 + i * 0.12, repeat: Infinity, ease: "easeInOut" } : { duration: 0.3 }}
+                />
+            ))}
+        </span>
+    );
+}
+
+const DynamicIsland = ({
+    view,
+    defaultView = "music",
+    views = ALL_VIEWS,
+    autoPlay = true,
+    interval = 3600,
+    accentColor = "#a3e635",
+    music = { title: "Midnight City", artist: "Apex Sessions", cover: `${IK}/spiderman.png?tr=f-auto,q-80,w-200` },
+    call = { name: "Tony Stark", subtitle: "Mobile", avatar: `${IK}/ironman.png?tr=f-auto,q-80,w-160` },
+    notification = { app: "Messages", title: "Peter Parker", message: "On my way — saving the city first 🕷️" },
+    timerSeconds = 300,
+    onViewChange,
+    className = "",
+}) => {
+    const controlled = view !== undefined;
+    const [ownView, setOwnView] = useState(views.includes(defaultView) ? defaultView : views[0]);
+    const current = controlled ? view : ownView;
+    const [expanded, setExpanded] = useState(false);
+    const [playing, setPlaying] = useState(true);
+    const [hovered, setHovered] = useState(false);
+    const [remaining, setRemaining] = useState(timerSeconds);
+    const moving = !useReducedMotion();
+    const onViewChangeRef = useRef(onViewChange);
+    onViewChangeRef.current = onViewChange;
+
+    // Cycle through the views on its own (uncontrolled), pausing while hovered or expanded.
+    useEffect(() => {
+        if (controlled || !autoPlay || hovered || expanded || views.length < 2) return undefined;
+        const id = setTimeout(() => {
+            setOwnView((v) => {
+                const next = views[(views.indexOf(v) + 1) % views.length];
+                onViewChangeRef.current?.(next);
+                return next;
+            });
+        }, interval);
+        return () => clearTimeout(id);
+    }, [controlled, autoPlay, hovered, expanded, views, interval, ownView]);
+
+    // A new view always starts compact.
+    useEffect(() => setExpanded(false), [current]);
+
+    // Live countdown while the timer is showing.
+    useEffect(() => {
+        if (current !== "timer") return undefined;
+        const id = setInterval(() => setRemaining((s) => (s > 0 ? s - 1 : timerSeconds)), 1000);
+        return () => clearInterval(id);
+    }, [current, timerSeconds]);
+
+    const sizeKey = current === "music" && expanded ? "musicExpanded" : current;
+    const size = SIZES[sizeKey] ?? SIZES.idle;
+    const canExpand = current === "music";
+
+    const content = {
+        idle: <span className="sr-only">Idle</span>,
+        music: (
+            <div className="flex h-full w-full items-center justify-between pl-1.5 pr-4">
+                <img src={music.cover} alt="" className="h-[1.85rem] w-[1.85rem] rounded-full object-cover" draggable="false" />
+                <span className="sr-only">Now playing {music.title} by {music.artist}</span>
+                <Waveform color={accentColor} playing={playing} moving={moving} />
+            </div>
+        ),
+        musicExpanded: (
+            <div className="flex h-full w-full flex-col justify-between p-5">
+                <div className="flex items-center gap-3.5">
+                    <img src={music.cover} alt="" className="h-14 w-14 rounded-2xl object-cover" draggable="false" />
+                    <div className="min-w-0 flex-1">
+                        <p className="truncate text-[0.95rem] font-semibold">{music.title}</p>
+                        <p className="truncate text-[0.8rem] text-white/50">{music.artist}</p>
+                    </div>
+                    <Waveform color={accentColor} playing={playing} moving={moving} />
+                </div>
+                <div>
+                    <div className="h-1 overflow-hidden rounded-full bg-white/15">
+                        <motion.div
+                            className="h-full rounded-full"
+                            style={{ backgroundColor: accentColor }}
+                            initial={{ width: "32%" }}
+                            animate={{ width: playing && moving ? "78%" : "32%" }}
+                            transition={{ duration: playing && moving ? 20 : 0.3, ease: "linear" }}
+                        />
+                    </div>
+                    <div className="mt-3 flex items-center justify-center gap-7">
+                        <button type="button" aria-label="Previous" onClick={(e) => e.stopPropagation()} className="text-white/70 transition hover:text-white">
+                            <SkipBack className="h-5 w-5" fill="currentColor" />
+                        </button>
+                        <button
+                            type="button"
+                            aria-label={playing ? "Pause" : "Play"}
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                setPlaying((p) => !p);
+                            }}
+                            className="text-white transition hover:scale-105"
+                        >
+                            {playing ? <Pause className="h-7 w-7" fill="currentColor" /> : <Play className="h-7 w-7" fill="currentColor" />}
+                        </button>
+                        <button type="button" aria-label="Next" onClick={(e) => e.stopPropagation()} className="text-white/70 transition hover:text-white">
+                            <SkipForward className="h-5 w-5" fill="currentColor" />
+                        </button>
+                    </div>
+                </div>
+            </div>
+        ),
+        call: (
+            <div className="flex h-full w-full items-center gap-3 pl-2.5 pr-2.5">
+                <img src={call.avatar} alt="" className="h-[3.4rem] w-[3.4rem] rounded-full object-cover" draggable="false" />
+                <div className="min-w-0 flex-1">
+                    <p className="truncate text-[0.72rem] text-white/50">{call.subtitle}</p>
+                    <p className="truncate text-[0.95rem] font-semibold">{call.name}</p>
+                </div>
+                <button type="button" aria-label="Decline" onClick={(e) => e.stopPropagation()} className="grid h-11 w-11 place-items-center rounded-full bg-[#ff453a] transition hover:brightness-110">
+                    <PhoneOff className="h-[1.1rem] w-[1.1rem]" />
+                </button>
+                <button type="button" aria-label="Accept" onClick={(e) => e.stopPropagation()} className="grid h-11 w-11 place-items-center rounded-full bg-[#30d158] transition hover:brightness-110">
+                    <Phone className="h-[1.1rem] w-[1.1rem]" fill="currentColor" />
+                </button>
+            </div>
+        ),
+        timer: (
+            <div className="flex h-full w-full items-center justify-between pl-3 pr-4">
+                <span className="grid h-[1.85rem] w-[1.85rem] place-items-center rounded-full bg-[#ff9f0a]/20 text-[#ff9f0a]">
+                    <Timer className="h-4 w-4" />
+                </span>
+                <span className="font-mono text-[0.95rem] font-semibold tabular-nums text-[#ff9f0a]" aria-label={`Timer ${formatTime(remaining)} left`}>
+                    {formatTime(remaining)}
+                </span>
+            </div>
+        ),
+        notification: (
+            <div className="flex h-full w-full items-center gap-3 pl-2.5 pr-5">
+                <span className="grid h-[3.4rem] w-[3.4rem] shrink-0 place-items-center rounded-full" style={{ backgroundColor: accentColor }}>
+                    <MessageCircle className="h-6 w-6 text-black" fill="currentColor" />
+                </span>
+                <div className="min-w-0 flex-1">
+                    <p className="flex items-center justify-between gap-2 text-[0.72rem] text-white/50">
+                        <span className="truncate">{notification.app}</span>
+                        <span className="shrink-0">now</span>
+                    </p>
+                    <p className="truncate text-[0.9rem] font-semibold">{notification.title}</p>
+                    <p className="truncate text-[0.78rem] text-white/70">{notification.message}</p>
+                </div>
+            </div>
+        ),
+    };
+
+    return (
+        <div className={`flex w-full justify-center ${className}`}>
+            <motion.div
+                role="status"
+                aria-live="polite"
+                aria-label="Dynamic island"
+                onClick={canExpand ? () => setExpanded((e) => !e) : undefined}
+                onPointerEnter={(e) => e.pointerType === "mouse" && setHovered(true)}
+                onPointerLeave={() => setHovered(false)}
+                className={`relative max-w-[calc(100vw-2rem)] overflow-hidden bg-black text-white shadow-[0_18px_40px_-16px_rgba(0,0,0,0.65),inset_0_0_0_1px_rgba(255,255,255,0.06)] ${canExpand ? "cursor-pointer" : ""}`}
+                initial={false}
+                animate={size}
+                transition={moving ? spring : { duration: 0 }}
+            >
+                <AnimatePresence initial={false} mode="popLayout">
+                    <motion.div
+                        key={sizeKey}
+                        className="absolute inset-0 flex"
+                        initial={moving ? { opacity: 0, scale: 0.92, filter: "blur(6px)" } : { opacity: 0 }}
+                        animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
+                        exit={moving ? { opacity: 0, scale: 0.92, filter: "blur(6px)" } : { opacity: 0 }}
+                        transition={{ duration: 0.28, ease: [0.22, 1, 0.36, 1], delay: moving ? 0.06 : 0 }}
+                    >
+                        {content[sizeKey]}
+                    </motion.div>
+                </AnimatePresence>
+            </motion.div>
+        </div>
+    );
+};
+
+export default DynamicIsland;

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

@@ -0,0 +1,154 @@
+import React, { useRef, useState } from "react";
+import { AnimatePresence, motion, useAnimationControls, useMotionValue, useReducedMotion, useSpring, useTransform } from "framer-motion";
+import { Compass, House, Image, Mail, MessageCircle, Music, Settings } from "lucide-react";
+
+/*
+ * Magnify Dock: a glass dock whose icons swell toward the pointer, like the
+ * macOS dock. Hover shows a label, a click bounces the icon and marks it open.
+ * Sizes are in rem so the dock scales with the page's font size.
+ */
+
+const DEFAULT_ITEMS = [
+    { label: "Home", icon: House, color: "linear-gradient(160deg,#60a5fa,#2563eb)" },
+    { label: "Explore", icon: Compass, color: "linear-gradient(160deg,#a78bfa,#7c3aed)" },
+    { label: "Music", icon: Music, color: "linear-gradient(160deg,#fb7185,#e11d48)" },
+    { label: "Photos", icon: Image, color: "linear-gradient(160deg,#fcd34d,#f97316)" },
+    { label: "Messages", icon: MessageCircle, color: "linear-gradient(160deg,#4ade80,#16a34a)" },
+    { label: "Mail", icon: Mail, color: "linear-gradient(160deg,#38bdf8,#0369a1)" },
+    { type: "separator" },
+    { label: "Settings", icon: Settings, color: "linear-gradient(160deg,#a1a1aa,#52525b)" },
+];
+
+const THEMES = {
+    dark: {
+        panel: "border-white/10 bg-neutral-900/75 shadow-[0_20px_50px_-20px_rgba(0,0,0,0.7),inset_0_1px_0_rgba(255,255,255,0.08)]",
+        glassTile: "bg-white/10 text-white",
+        label: "bg-neutral-900/90 text-white border-white/10",
+        separator: "bg-white/15",
+        dot: "bg-white/80",
+    },
+    light: {
+        panel: "border-black/10 bg-white/70 shadow-[0_20px_50px_-24px_rgba(0,0,0,0.35),inset_0_1px_0_rgba(255,255,255,0.9)]",
+        glassTile: "bg-black/[0.06] text-neutral-800",
+        label: "bg-white/95 text-neutral-900 border-black/10",
+        separator: "bg-black/15",
+        dot: "bg-neutral-800/80",
+    },
+};
+
+function DockItem({ item, index, mouseX, baseSize, magnification, distance, theme, tileStyle, showLabels, open, onSelect }) {
+    const ref = useRef(null);
+    const [hovered, setHovered] = useState(false);
+    const controls = useAnimationControls();
+    const t = THEMES[theme] ?? THEMES.dark;
+
+    // Distance from the pointer to this icon's centre, mapped to a size factor.
+    const offset = useTransform(mouseX, (x) => {
+        const rect = ref.current?.getBoundingClientRect();
+        return rect ? x - (rect.left + rect.width / 2) : Infinity;
+    });
+    const target = useTransform(offset, [-distance, 0, distance], [1, magnification, 1]);
+    const factor = useSpring(target, { mass: 0.1, stiffness: 170, damping: 14 });
+    const size = useTransform(factor, (f) => `${f * baseSize}rem`);
+
+    const Icon = item.icon;
+    const Tag = item.href ? motion.a : motion.button;
+
+    return (
+        <motion.div className="relative flex flex-col items-center" style={{ width: size }}>
+            <AnimatePresence>
+                {showLabels && hovered && (
+                    <motion.span
+                        className={`pointer-events-none absolute bottom-full mb-3 whitespace-nowrap rounded-lg border px-2.5 py-1 text-[0.75rem] font-medium backdrop-blur-md ${t.label}`}
+                        initial={{ opacity: 0, y: 6, scale: 0.9 }}
+                        animate={{ opacity: 1, y: 0, scale: 1 }}
+                        exit={{ opacity: 0, y: 4, scale: 0.95 }}
+                        transition={{ duration: 0.16 }}
+                    >
+                        {item.label}
+                    </motion.span>
+                )}
+            </AnimatePresence>
+            <Tag
+                ref={ref}
+                type={item.href ? undefined : "button"}
+                href={item.href}
+                aria-label={item.label}
+                animate={controls}
+                onClick={(e) => {
+                    controls.start({ y: [0, -14, 0, -5, 0], transition: { duration: 0.7, ease: "easeOut" } });
+                    onSelect(index, item, e);
+                }}
+                onPointerEnter={(e) => e.pointerType === "mouse" && setHovered(true)}
+                onPointerLeave={() => setHovered(false)}
+                onFocus={() => setHovered(true)}
+                onBlur={() => setHovered(false)}
+                className={`grid aspect-square w-full place-items-center rounded-[24%] outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-white/70 ${tileStyle === "glass" ? t.glassTile : "text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.35),0_6px_14px_-6px_rgba(0,0,0,0.5)]"}`}
+                style={tileStyle === "glass" ? undefined : { background: item.color }}
+            >
+                {Icon && <Icon className="h-[48%] w-[48%]" strokeWidth={2} />}
+            </Tag>
+            <span className={`absolute -bottom-[0.45rem] h-1 w-1 rounded-full transition-opacity ${t.dot} ${open ? "opacity-100" : "opacity-0"}`} />
+        </motion.div>
+    );
+}
+
+const MagnifyDock = ({
+    items = DEFAULT_ITEMS,
+    baseSize = 2.75,
+    magnification = 1.7,
+    distance = 140,
+    theme = "dark",
+    tileStyle = "color",
+    showLabels = true,
+    defaultOpen = [0],
+    onSelect,
+    className = "",
+}) => {
+    const mouseX = useMotionValue(Infinity);
+    const [open, setOpen] = useState(() => new Set(defaultOpen));
+    const reduced = useReducedMotion();
+    const t = THEMES[theme] ?? THEMES.dark;
+    const reset = () => mouseX.set(Infinity);
+
+    const select = (index, item, e) => {
+        setOpen((prev) => new Set(prev).add(index));
+        onSelect?.(item, index, e);
+    };
+
+    return (
+        <nav aria-label="Dock" className={`flex w-full justify-center ${className}`}>
+            <div
+                onPointerMove={(e) => mouseX.set(e.clientX)}
+                onPointerLeave={reset}
+                onPointerUp={(e) => e.pointerType !== "mouse" && reset()}
+                onPointerCancel={reset}
+                className={`flex max-w-full items-end gap-[0.45rem] rounded-[1.35rem] border px-[0.55rem] pb-[0.6rem] pt-[0.55rem] backdrop-blur-xl ${t.panel}`}
+                style={{ height: `${baseSize + 1.15}rem`, touchAction: "pan-y" }}
+            >
+                {items.map((item, i) =>
+                    item.type === "separator" ? (
+                        <span key={`sep-${i}`} aria-hidden="true" className={`mx-[0.2rem] w-px self-stretch ${t.separator}`} />
+                    ) : (
+                        <DockItem
+                            key={item.label ?? i}
+                            item={item}
+                            index={i}
+                            mouseX={mouseX}
+                            baseSize={baseSize}
+                            magnification={reduced ? 1 : magnification}
+                            distance={distance}
+                            theme={theme}
+                            tileStyle={tileStyle}
+                            showLabels={showLabels}
+                            open={open.has(i)}
+                            onSelect={select}
+                        />
+                    )
+                )}
+            </div>
+        </nav>
+    );
+};
+
+export default MagnifyDock;

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

@@ -0,0 +1,304 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import { CircleCheck, LoaderCircle, Printer, RotateCcw } from "lucide-react";
+
+/*
+ * Receipt Printer: a little thermal printer that processes a payment, feeds a
+ * receipt out of its slot and settles on "Payment complete".
+ *
+ * Runs on its own (autoPlay) or follows a controlled `stage`:
+ *   "processing" → "printing" → "complete"
+ */
+
+const defaultItems = [
+    { name: "Iced Latte", qty: 2, price: 4.5 },
+    { name: "Blueberry Muffin", qty: 1, price: 3.25 },
+    { name: "Avocado Toast", qty: 1, price: 8.9 },
+    { name: "Sparkling Water", qty: 1, price: 2 },
+];
+
+const STATUS = {
+    processing: { label: "Processing payment", Icon: LoaderCircle },
+    printing: { label: "Printing receipt", Icon: Printer },
+    complete: { label: "Payment complete", Icon: CircleCheck },
+};
+
+const ease = [0.22, 1, 0.36, 1];
+
+/*
+ * Keyframes for a "stepped" feed: the paper advances in short bursts with a
+ * pause after each one, like a thermal printer printing line by line.
+ */
+function steppedFeed(steps = 9, moveShare = 0.62) {
+    const y = ["-100%"];
+    const times = [0];
+    for (let i = 1; i <= steps; i++) {
+        // Ease the step sizes so the paper starts slow and speeds up a little.
+        const progress = 1 - Math.pow(1 - i / steps, 1.35);
+        const at = -100 + progress * 100;
+        const start = (i - 1) / steps;
+        const end = i / steps;
+        y.push(`${at.toFixed(2)}%`, `${at.toFixed(2)}%`);
+        times.push(start + (end - start) * moveShare, end);
+    }
+    return { y, times };
+}
+
+// Bar widths derived from the order id, so the same order always gets the same barcode.
+function barcodeBars(code, count = 38) {
+    const seed = [...String(code)].reduce((sum, ch, i) => sum + ch.charCodeAt(0) * (i + 7), 0);
+    return Array.from({ length: count }, (_, i) => 1 + ((seed * (i + 3) * 2654435761) >>> 0) % 3);
+}
+
+const money = (value, currency) => `${currency}${value.toFixed(2)}`;
+
+// Zig-zag tear along the bottom edge of the paper.
+const tearMask = {
+    WebkitMask:
+        "linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 7px repeat-x",
+    mask: "linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 7px repeat-x",
+};
+
+function Receipt({ store, address, items, currency, taxRate, orderId, date }) {
+    const subtotal = items.reduce((sum, item) => sum + item.qty * item.price, 0);
+    const tax = subtotal * taxRate;
+    const bars = useMemo(() => barcodeBars(orderId), [orderId]);
+
+    return (
+        <article
+            className="relative bg-[#fbfaf5] px-5 pb-8 pt-5 font-mono text-[0.72rem] leading-relaxed text-zinc-800 shadow-[0_18px_30px_-18px_rgba(0,0,0,0.6)]"
+            style={tearMask}
+        >
+            {/* faint thermal-paper grain */}
+            <div
+                aria-hidden="true"
+                className="pointer-events-none absolute inset-0 opacity-[0.35]"
+                style={{ backgroundImage: "repeating-linear-gradient(0deg, rgba(0,0,0,0.035) 0 1px, transparent 1px 3px)" }}
+            />
+            <div className="relative">
+                <p className="text-center text-[0.85rem] font-bold uppercase tracking-[0.18em]">{store}</p>
+                {address && <p className="mt-0.5 text-center text-[0.65rem] text-zinc-500">{address}</p>}
+                <p className="mt-0.5 text-center text-[0.65rem] text-zinc-500">{date}</p>
+
+                <div className="my-3 border-t border-dashed border-zinc-400" />
+
+                <ul className="space-y-1">
+                    {items.map((item, i) => (
+                        <li key={i} className="flex justify-between gap-3">
+                            <span className="min-w-0 truncate">
+                                {item.qty} × {item.name}
+                            </span>
+                            <span className="shrink-0 tabular-nums">{money(item.qty * item.price, currency)}</span>
+                        </li>
+                    ))}
+                </ul>
+
+                <div className="my-3 border-t border-dashed border-zinc-400" />
+
+                <div className="space-y-0.5 text-zinc-600">
+                    <p className="flex justify-between"><span>Subtotal</span><span className="tabular-nums">{money(subtotal, currency)}</span></p>
+                    <p className="flex justify-between"><span>Tax {Math.round(taxRate * 100)}%</span><span className="tabular-nums">{money(tax, currency)}</span></p>
+                </div>
+                <p className="mt-2 flex justify-between text-[0.85rem] font-bold">
+                    <span>TOTAL</span>
+                    <span className="tabular-nums">{money(subtotal + tax, currency)}</span>
+                </p>
+
+                <div className="my-3 border-t border-dashed border-zinc-400" />
+
+                <div aria-hidden="true" className="flex h-9 items-stretch justify-center gap-[1.5px]">
+                    {bars.map((w, i) => (
+                        <span key={i} className="bg-zinc-800" style={{ width: w }} />
+                    ))}
+                </div>
+                <p className="mt-1 text-center text-[0.62rem] tracking-[0.3em] text-zinc-500">{orderId}</p>
+                <p className="mt-3 text-center text-[0.65rem] font-semibold uppercase tracking-[0.25em]">Thank you</p>
+            </div>
+        </article>
+    );
+}
+
+const ReceiptPrinter = ({
+    store = "ApexUI Café",
+    address = "221B Baker Street",
+    items = defaultItems,
+    currency = "$",
+    taxRate = 0.08,
+    orderId = "AX-20491",
+    date,
+    stage,
+    autoPlay = true,
+    feed = "stepped",
+    processingTime = 1600,
+    printTime = 2200,
+    accentColor = "#a3e635",
+    onComplete,
+    className = "",
+}) => {
+    const controlled = stage !== undefined;
+    const [ownStage, setOwnStage] = useState(autoPlay ? "processing" : "complete");
+    const [run, setRun] = useState(0);
+    const current = controlled ? stage : ownStage;
+    const reduceMotion = useReducedMotion();
+    const onCompleteRef = useRef(onComplete);
+    onCompleteRef.current = onComplete;
+
+    // Self-running sequence (skipped when the parent controls the stage).
+    useEffect(() => {
+        if (controlled || (!autoPlay && run === 0)) return undefined;
+        setOwnStage("processing");
+        const toPrint = setTimeout(() => setOwnStage("printing"), processingTime);
+        const toDone = setTimeout(() => {
+            setOwnStage("complete");
+            onCompleteRef.current?.();
+        }, processingTime + printTime);
+        return () => {
+            clearTimeout(toPrint);
+            clearTimeout(toDone);
+        };
+    }, [controlled, autoPlay, run, processingTime, printTime]);
+
+    const printedAt = useMemo(
+        () =>
+            date ??
+            new Date().toLocaleString("en-US", { month: "short", day: "numeric", year: "numeric", hour: "numeric", minute: "2-digit" }),
+        // A fresh timestamp for every print run.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [date, run]
+    );
+
+    const stepped = useMemo(() => steppedFeed(), []);
+    const moving = !reduceMotion;
+    const paperY =
+        current === "processing"
+            ? "-100%"
+            : current === "printing" && moving
+                ? feed === "stepped"
+                    ? stepped.y
+                    : "0%"
+                : "0%";
+    const paperTransition =
+        current === "printing" && moving
+            ? feed === "stepped"
+                ? { duration: printTime / 1000, ease: "linear", times: stepped.times }
+                : { duration: printTime / 1000, ease: [0.65, 0, 0.35, 1] }
+            : { duration: 0 };
+
+    const { label, Icon } = STATUS[current] ?? STATUS.processing;
+    const itemCount = items.reduce((sum, item) => sum + item.qty, 0);
+
+    return (
+        <section aria-label="Receipt printer" className={`relative isolate flex w-[20rem] max-w-full flex-col items-center ${className}`}>
+            {/* Machine */}
+            <div
+                className="relative z-20 w-full rounded-[1.75rem] border border-white/10 bg-[#1b1b20] p-3 pb-8 shadow-[0_30px_60px_-30px_rgba(0,0,0,0.85),inset_0_1px_0_rgba(255,255,255,0.08),inset_0_-2px_0_rgba(0,0,0,0.5)]"
+            >
+                {/* matte plastic texture */}
+                <div
+                    aria-hidden="true"
+                    className="pointer-events-none absolute inset-0 rounded-[inherit] opacity-[0.12]"
+                    style={{ backgroundImage: "radial-gradient(rgba(255,255,255,0.7) 0.5px, transparent 0.6px)", backgroundSize: "4px 4px" }}
+                />
+
+                {/* Top row: brand, LED and reprint */}
+                <div className="relative flex h-10 items-center justify-between px-2">
+                    <span className="font-mono text-[0.6rem] uppercase tracking-[0.3em] text-white/40">Apex · Print</span>
+                    <div className="flex items-center gap-2">
+                        <span
+                            aria-hidden="true"
+                            className={`h-2 w-2 rounded-full ${current === "printing" && moving ? "animate-pulse" : ""}`}
+                            style={{
+                                backgroundColor: current === "complete" ? accentColor : current === "printing" ? accentColor : "#f59e0b",
+                                boxShadow: `0 0 10px ${current === "processing" ? "#f59e0b" : accentColor}`,
+                            }}
+                        />
+                        {!controlled && (
+                            <button
+                                type="button"
+                                onClick={() => setRun((r) => r + 1)}
+                                disabled={current !== "complete"}
+                                aria-label="Print again"
+                                title="Print again"
+                                className="flex h-7 w-7 items-center justify-center rounded-full border border-white/10 bg-white/5 text-white/60 transition hover:text-white disabled:pointer-events-none disabled:opacity-30"
+                            >
+                                <RotateCcw className="h-3.5 w-3.5" />
+                            </button>
+                        )}
+                    </div>
+                </div>
+
+                {/* Screen */}
+                <div className="relative overflow-hidden rounded-[1.1rem] border border-black/60 bg-[#0b0e0c] px-4 py-3.5 shadow-[inset_0_2px_12px_rgba(0,0,0,0.8)]">
+                    <div className="flex items-center gap-2.5" role="status" aria-live="polite">
+                        <span className="relative grid h-5 w-5 shrink-0 place-items-center" style={{ color: current === "processing" ? "#f59e0b" : accentColor }}>
+                            <AnimatePresence initial={false} mode="popLayout">
+                                <motion.span
+                                    key={current}
+                                    initial={moving ? { opacity: 0, scale: 0.7 } : false}
+                                    animate={{ opacity: 1, scale: 1 }}
+                                    exit={moving ? { opacity: 0, scale: 0.7 } : { opacity: 0 }}
+                                    transition={{ duration: 0.2, ease }}
+                                    className="grid place-items-center"
+                                >
+                                    <Icon className={`h-[18px] w-[18px] ${current === "processing" && moving ? "animate-spin" : ""}`} strokeWidth={2.2} />
+                                </motion.span>
+                            </AnimatePresence>
+                        </span>
+                        <div className="relative h-4 min-w-0 flex-1 overflow-hidden">
+                            <AnimatePresence initial={false} mode="popLayout">
+                                <motion.p
+                                    key={current}
+                                    initial={moving ? { opacity: 0, y: 8 } : false}
+                                    animate={{ opacity: 1, y: 0 }}
+                                    exit={moving ? { opacity: 0, y: -8 } : { opacity: 0 }}
+                                    transition={{ duration: 0.22, ease }}
+                                    className="truncate text-xs font-medium leading-4 text-zinc-200"
+                                >
+                                    {label}
+                                </motion.p>
+                            </AnimatePresence>
+                        </div>
+                    </div>
+                    <div className="mt-2.5 flex items-center justify-between font-mono text-[0.62rem] text-zinc-500">
+                        <span>#{orderId}</span>
+                        <span>{itemCount} items</span>
+                    </div>
+                    {/* Progress while printing */}
+                    <div className="mt-2 h-1 overflow-hidden rounded-full bg-white/5">
+                        <motion.div
+                            key={`${run}-${current}`}
+                            className="h-full rounded-full"
+                            style={{ backgroundColor: current === "processing" ? "#f59e0b" : accentColor }}
+                            initial={{ width: current === "printing" ? "0%" : current === "complete" ? "100%" : "35%" }}
+                            animate={{ width: current === "processing" ? ["15%", "60%", "15%"] : "100%" }}
+                            transition={
+                                current === "processing"
+                                    ? { duration: 1.4, repeat: Infinity, ease: "easeInOut" }
+                                    : { duration: current === "printing" && moving ? printTime / 1000 : 0, ease: "linear" }
+                            }
+                        />
+                    </div>
+                </div>
+
+                {/* Paper slot */}
+                <div aria-hidden="true" className="absolute inset-x-7 bottom-3 h-2 rounded-full bg-black shadow-[inset_0_2px_3px_rgba(0,0,0,0.9),0_1px_0_rgba(255,255,255,0.06)]" />
+            </div>
+
+            {/* Paper coming out of the slot */}
+            <div className="relative z-10 -mt-4 w-[86%] overflow-hidden px-1 pb-4 pt-0">
+                <div aria-hidden="true" className="pointer-events-none absolute inset-x-1 top-0 z-10 h-3 bg-gradient-to-b from-black/45 to-transparent" />
+                <motion.div
+                    key={run}
+                    initial={{ y: "-100%" }}
+                    animate={{ y: paperY }}
+                    transition={paperTransition}
+                    aria-hidden={current !== "complete"}
+                >
+                    <Receipt store={store} address={address} items={items} currency={currency} taxRate={taxRate} orderId={orderId} date={printedAt} />
+                </motion.div>
+            </div>
+        </section>
+    );
+};
+
+export default ReceiptPrinter;

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

@@ -0,0 +1,143 @@
+import React, { useEffect, useMemo, useRef } from "react";
+import { AnimatePresence, motion, useInView, useReducedMotion, useSpring, useTransform } from "framer-motion";
+
+/*
+ * Rolling Counter: an odometer-style number. Every digit is a wheel that
+ * rolls forward or back to its new value, carrying into the next wheel like a
+ * real odometer. Formats with Intl (separators, decimals, currency).
+ */
+
+const DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+const STEP = 1.15; // wheel height per digit, in em
+const DEFAULT_SPRING = { stiffness: 70, damping: 18, mass: 1 };
+
+function WheelDigit({ digit, position }) {
+    // Place each digit on a loop around the wheel so the wheel can spin either way.
+    const y = useTransform(position, (v) => {
+        const off = (((digit - v) % 10) + 10) % 10;
+        return `${(off > 5 ? off - 10 : off) * STEP}em`;
+    });
+    return (
+        <motion.span className="absolute inset-0 flex items-center justify-center" style={{ y }}>
+            {digit}
+        </motion.span>
+    );
+}
+
+function Wheel({ target, spring, moving }) {
+    // New wheels start at 0 and roll in.
+    const position = useSpring(moving ? 0 : target, spring);
+    useEffect(() => {
+        if (!moving) {
+            position.jump(target);
+            return;
+        }
+        // Big jumps skip ahead (keeping the same digit) so the wheel spins at most ~2 turns.
+        const current = position.get();
+        const gap = target - current;
+        if (Math.abs(gap) > 20) position.jump(current + 10 * Math.round((gap - Math.sign(gap) * 20) / 10));
+        position.set(target);
+    }, [target, moving, position]);
+
+    return (
+        <span
+            className="relative inline-block overflow-hidden"
+            style={{
+                width: "1ch",
+                height: `${STEP}em`,
+                maskImage: "linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent)",
+                WebkitMaskImage: "linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent)",
+            }}
+        >
+            {DIGITS.map((d) => (
+                <WheelDigit key={d} digit={d} position={position} />
+            ))}
+        </span>
+    );
+}
+
+const RollingCounter = ({
+    value = 0,
+    locale = "en-US",
+    decimals = 0,
+    currency,
+    prefix = "",
+    suffix = "",
+    fontSize = 4,
+    fontWeight = 700,
+    color = "currentColor",
+    startOnView = true,
+    spring = DEFAULT_SPRING,
+    className = "",
+}) => {
+    const ref = useRef(null);
+    const inView = useInView(ref, { once: true, margin: "-10% 0px" });
+    const moving = !useReducedMotion();
+    const shown = startOnView && !inView ? 0 : value;
+
+    const formatter = useMemo(
+        () =>
+            new Intl.NumberFormat(locale, {
+                numberingSystem: "latn",
+                minimumFractionDigits: decimals,
+                maximumFractionDigits: decimals,
+                ...(currency ? { style: "currency", currency } : {}),
+            }),
+        [locale, decimals, currency]
+    );
+
+    // Whole number of the smallest unit shown, e.g. 12.34 with 2 decimals -> 1234.
+    const scaled = Math.round(Math.abs(shown) * 10 ** decimals);
+    const text = formatter.format(shown);
+
+    // Walk the formatted string from the right so each wheel keeps its place as
+    // the number grows. Symbols before the first digit ($, -) keep a fixed key.
+    const isDigit = (ch) => ch >= "0" && ch <= "9";
+    const firstDigit = [...text].findIndex(isDigit);
+    const parts = [];
+    let place = 0;
+    for (let i = text.length - 1; i >= 0; i--) {
+        const ch = text[i];
+        if (isDigit(ch)) {
+            parts.unshift({ key: `d${place}`, place });
+            place += 1;
+        } else {
+            parts.unshift({ key: i < firstDigit ? `lead${i}-${ch}` : `s${place}-${ch}`, char: ch });
+        }
+    }
+
+    return (
+        <span
+            ref={ref}
+            role="img"
+            aria-label={`${prefix}${formatter.format(value)}${suffix}`}
+            className={`inline-flex items-center whitespace-nowrap leading-none tabular-nums ${className}`}
+            style={{ fontSize: `${fontSize}rem`, fontWeight, color, fontVariantNumeric: "tabular-nums" }}
+        >
+            {prefix && <span aria-hidden="true">{prefix}</span>}
+            <AnimatePresence initial={false} mode="popLayout">
+                {parts.map((part) => (
+                    <motion.span
+                        key={part.key}
+                        layout="position"
+                        aria-hidden="true"
+                        className="inline-flex"
+                        initial={{ opacity: 0, y: "-0.4em" }}
+                        animate={{ opacity: 1, y: 0 }}
+                        exit={{ opacity: 0, y: "0.4em" }}
+                        transition={{ duration: moving ? 0.35 : 0 }}
+                    >
+                        {part.char !== undefined ? (
+                            part.char === " " || part.char === " " || part.char === " " ? " " : part.char
+                        ) : (
+                            <Wheel target={Math.floor(scaled / 10 ** part.place)} spring={spring} moving={moving} />
+                        )}
+                    </motion.span>
+                ))}
+            </AnimatePresence>
+            {suffix && <span aria-hidden="true">{suffix}</span>}
+        </span>
+    );
+};
+
+export default RollingCounter;

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

@@ -0,0 +1,132 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useInView, useReducedMotion } from "framer-motion";
+
+/*
+ * Scramble Text: letters cycle through random characters and lock into place
+ * one by one, like text being decrypted. Runs when it scrolls into view, on
+ * hover, or on a loop. Every letter keeps its real width, so nothing jumps.
+ */
+
+const DEFAULT_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&*@$/<>";
+
+// Random character, lowercased for lowercase letters so widths stay close.
+const pick = (chars, ch = "") => {
+    const c = chars[Math.floor(Math.random() * chars.length)];
+    return ch !== ch.toUpperCase() ? c.toLowerCase() : c;
+};
+
+// Order in which the letters lock in.
+function revealOrder(text, direction) {
+    const chars = [...text];
+    const idx = chars.map((_, i) => i).filter((i) => chars[i] !== " ");
+    if (direction === "end") return idx.reverse();
+    if (direction === "center") {
+        const mid = (chars.length - 1) / 2;
+        return idx.sort((a, b) => Math.abs(a - mid) - Math.abs(b - mid));
+    }
+    if (direction === "random") {
+        for (let i = idx.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [idx[i], idx[j]] = [idx[j], idx[i]];
+        }
+    }
+    return idx;
+}
+
+const scrambleAll = (text, chars) => [...text].map((ch) => (ch === " " ? " " : pick(chars, ch)));
+
+const ScrambleText = ({
+    text = "Decrypting the future",
+    as: Tag = "span",
+    trigger = "view",
+    speed = 40,
+    revealRate = 2,
+    direction = "start",
+    characters = DEFAULT_CHARS,
+    accentColor = "#a3e635",
+    loopDelay = 2400,
+    className = "",
+    ...rest
+}) => {
+    const ref = useRef(null);
+    const timers = useRef({ tick: 0, wait: 0 });
+    const reduced = useReducedMotion();
+    const inView = useInView(ref, { once: trigger === "view", margin: "-10% 0px" });
+    // null means "show the real text"; an array means scrambled letters, with locked ones in `locked`.
+    const [output, setOutput] = useState(() => (trigger === "view" && !reduced ? scrambleAll(text, characters) : null));
+    const [locked, setLocked] = useState(() => new Set());
+    const running = useRef(false);
+
+    const stop = useCallback(() => {
+        clearInterval(timers.current.tick);
+        clearTimeout(timers.current.wait);
+        running.current = false;
+    }, []);
+
+    const run = useCallback(() => {
+        if (reduced || running.current) return;
+        running.current = true;
+        const order = revealOrder(text, direction);
+        let tick = 0;
+        timers.current.tick = setInterval(() => {
+            tick += 1;
+            const count = Math.floor(tick / Math.max(1, revealRate));
+            const done = new Set(order.slice(0, count));
+            if (count >= order.length) {
+                clearInterval(timers.current.tick);
+                running.current = false;
+                setOutput(null);
+                setLocked(new Set());
+                if (trigger === "loop") timers.current.wait = setTimeout(run, loopDelay);
+                return;
+            }
+            setLocked(done);
+            setOutput([...text].map((ch, i) => (ch === " " || done.has(i) ? ch : pick(characters, ch))));
+        }, speed);
+    }, [reduced, text, direction, revealRate, speed, characters, trigger, loopDelay]);
+
+    // Start on view / loop; restart cleanly when the settings change.
+    useEffect(() => {
+        if (reduced) {
+            setOutput(null);
+            return undefined;
+        }
+        if ((trigger === "view" || trigger === "loop") && inView) run();
+        return stop;
+    }, [trigger, inView, run, stop, reduced]);
+
+    const hoverProps = trigger === "hover" ? { onPointerEnter: run, onFocus: run } : {};
+
+    // Group letters by word so lines only wrap between words.
+    let index = 0;
+    const words = text.split(" ").map((word, w) => {
+        const letters = [...word].map((ch) => {
+            const i = index++;
+            const shown = output ? output[i] : ch;
+            const scrambling = output && !locked.has(i);
+            return (
+                <span key={i} className="relative inline-block">
+                    <span className="invisible">{ch}</span>
+                    <span className="absolute inset-0 text-center" style={scrambling ? { color: accentColor } : undefined}>
+                        {shown}
+                    </span>
+                </span>
+            );
+        });
+        index += 1; // the space
+        return (
+            <React.Fragment key={w}>
+                {w > 0 && " "}
+                <span className="inline-block whitespace-nowrap">{letters}</span>
+            </React.Fragment>
+        );
+    });
+
+    return (
+        <Tag ref={ref} aria-label={text} className={className} {...rest} {...hoverProps}>
+            <span aria-hidden="true">{words}</span>
+        </Tag>
+    );
+};
+
+export default ScrambleText;

package/dist/cli/index.js

@@ -47,6 +47,12 @@ const componentMap = {
     "theme-toggle": "ThemeToggle",
     "testimonials": "Testimonials",
     "mask-view": "MaskView",
+    "receipt-printer": "ReceiptPrinter",
+    "dynamic-island": "DynamicIsland",
+    "magnify-dock": "MagnifyDock",
+    "dot-wave-background": "DotWaveBackground",
+    "rolling-counter": "RollingCounter",
+    "scramble-text": "ScrambleText",
     "water-drop-reveal": "MaskView",
 };
 // Packages only some components need, installed on top of the shared ones.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apex-ui-kit",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "license": "MIT",
   "description": "Apex UI Kit - A React component library for building modern user interfaces",
   "keywords": [