apex-ui-kit 2.1.2 → 2.2.0

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/ProfileCard/ProfileCard.jsx

@@ -0,0 +1,213 @@
+import React, { useEffect, useId, useMemo, useState } from "react";
+import { animate, motion, useMotionValue, useReducedMotion, useSpring, useTransform } from "framer-motion";
+import { Check, Github, Linkedin, MapPin, Plus, Twitter } from "lucide-react";
+
+/*
+ * Profile Card: one profile, two looks.
+ *  card    – cover, avatar, bio, stats, socials and a Follow button, with a soft 3D tilt
+ *  lanyard – the same person as an ID badge hanging from a ribbon; drag it and
+ *            let go to watch it swing back like a pendulum
+ */
+
+const DEFAULT_PROFILE = {
+    name: "Mohan Dalei",
+    role: "Frontend Engineer",
+    company: "ApexUI",
+    location: "Bhubaneswar, India",
+    bio: "Building animated React components that feel alive. Coffee, motion and clean code.",
+    avatar: "https://ik.imagekit.io/ny6yinyut/apexui/assets/black-panther.png?tr=f-auto,q-80,w-320",
+    id: "APX-0042",
+    stats: [
+        { label: "Projects", value: "48" },
+        { label: "Followers", value: "12.8k" },
+        { label: "Stars", value: "3.2k" },
+    ],
+    socials: [
+        { icon: Github, href: "#", label: "GitHub" },
+        { icon: Twitter, href: "#", label: "Twitter" },
+        { icon: Linkedin, href: "#", label: "LinkedIn" },
+    ],
+};
+
+// Stable pseudo-random barcode bars from a string.
+const barsFrom = (seed) => {
+    let h = 2166136261;
+    for (const ch of seed) h = Math.imul(h ^ ch.charCodeAt(0), 16777619);
+    return Array.from({ length: 34 }, (_, i) => 1 + (((h >>> (i % 24)) ^ (i * 7)) & 3));
+};
+
+function CardVariant({ p, color, theme }) {
+    const [following, setFollowing] = useState(false);
+    const reduced = useReducedMotion();
+    const rx = useSpring(0, { stiffness: 200, damping: 20 });
+    const ry = useSpring(0, { stiffness: 200, damping: 20 });
+    const dark = theme !== "light";
+
+    const onMove = (e) => {
+        if (reduced || e.pointerType !== "mouse") return;
+        const r = e.currentTarget.getBoundingClientRect();
+        ry.set(((e.clientX - r.left) / r.width - 0.5) * 10);
+        rx.set(-((e.clientY - r.top) / r.height - 0.5) * 10);
+    };
+
+    return (
+        <div style={{ perspective: 1000 }}>
+            <motion.article
+                onPointerMove={onMove}
+                onPointerLeave={() => {
+                    rx.set(0);
+                    ry.set(0);
+                }}
+                style={{ rotateX: rx, rotateY: ry }}
+                className={`w-[min(21rem,88vw)] overflow-hidden rounded-3xl border shadow-[0_30px_60px_-30px_rgba(0,0,0,0.5)] ${dark ? "border-white/10 bg-neutral-950 text-white" : "border-black/10 bg-white text-neutral-900"}`}
+            >
+                <div className="relative h-24" style={{ background: `radial-gradient(120% 140% at 0% 0%, ${color}, transparent 60%), radial-gradient(120% 140% at 100% 0%, #6366f1, transparent 60%), ${dark ? "#111" : "#eee"}` }}>
+                    <div className="absolute inset-0 opacity-30 [background-image:radial-gradient(rgba(255,255,255,.6)_1px,transparent_1px)] [background-size:12px_12px]" />
+                </div>
+                <div className="px-6 pb-6">
+                    <div className="-mt-11 flex items-end justify-between">
+                        <div className="relative">
+                            <img src={p.avatar} alt="" className={`h-[5.5rem] w-[5.5rem] rounded-full object-cover ring-4 ${dark ? "bg-neutral-800 ring-neutral-950" : "bg-neutral-200 ring-white"}`} />
+                            <span className={`absolute bottom-1.5 right-1.5 h-3.5 w-3.5 rounded-full bg-emerald-400 ring-[3px] ${dark ? "ring-neutral-950" : "ring-white"}`} aria-label="Online" />
+                        </div>
+                        <motion.button
+                            type="button"
+                            onClick={() => setFollowing((f) => !f)}
+                            whileTap={{ scale: 0.94 }}
+                            layout
+                            className="mb-1 inline-flex h-9 items-center gap-1.5 rounded-full px-4 text-[0.8rem] font-semibold"
+                            style={following ? { background: "transparent", color: dark ? "#fff" : "#111", boxShadow: `inset 0 0 0 1.5px ${dark ? "rgba(255,255,255,.25)" : "rgba(0,0,0,.2)"}` } : { background: color, color: "#0a0a0a" }}
+                        >
+                            {following ? <Check className="h-3.5 w-3.5" /> : <Plus className="h-3.5 w-3.5" />}
+                            {following ? "Following" : "Follow"}
+                        </motion.button>
+                    </div>
+                    <h3 className="mt-3 text-lg font-semibold leading-tight">{p.name}</h3>
+                    <p className={`text-[0.85rem] ${dark ? "text-white/55" : "text-neutral-500"}`}>
+                        {p.role} · {p.company}
+                    </p>
+                    {p.location && (
+                        <p className={`mt-1 flex items-center gap-1 text-[0.78rem] ${dark ? "text-white/45" : "text-neutral-400"}`}>
+                            <MapPin className="h-3.5 w-3.5" /> {p.location}
+                        </p>
+                    )}
+                    {p.bio && <p className={`mt-3 text-[0.85rem] leading-relaxed ${dark ? "text-white/75" : "text-neutral-600"}`}>{p.bio}</p>}
+                    <dl className={`mt-4 grid grid-cols-3 divide-x rounded-2xl py-3 text-center ${dark ? "divide-white/10 bg-white/[0.04]" : "divide-black/10 bg-black/[0.03]"}`}>
+                        {p.stats?.map((s) => (
+                            <div key={s.label}>
+                                <dd className="text-[1rem] font-semibold">{s.value}</dd>
+                                <dt className={`text-[0.7rem] ${dark ? "text-white/45" : "text-neutral-500"}`}>{s.label}</dt>
+                            </div>
+                        ))}
+                    </dl>
+                    <div className="mt-4 flex gap-2">
+                        {p.socials?.map(({ icon: Icon, href, label }) => (
+                            <a key={label} href={href} aria-label={label} className={`grid h-9 w-9 place-items-center rounded-full transition hover:-translate-y-0.5 ${dark ? "bg-white/[0.06] hover:bg-white/[0.12]" : "bg-black/[0.04] hover:bg-black/[0.08]"}`}>
+                                <Icon className="h-4 w-4" />
+                            </a>
+                        ))}
+                    </div>
+                </div>
+            </motion.article>
+        </div>
+    );
+}
+
+function LanyardVariant({ p, color, theme, strapLength }) {
+    const pathId = `strap-${useId().replace(/[^a-zA-Z0-9-]/g, "")}`;
+    const reduced = useReducedMotion();
+    const x = useMotionValue(0);
+    const y = useMotionValue(reduced ? 0 : -140);
+    const length = strapLength * 16;
+    const bars = useMemo(() => barsFrom(p.id || p.name), [p.id, p.name]);
+    const dark = theme !== "light";
+    const swing = { type: "spring", stiffness: 90, damping: 5, mass: 1 };
+
+    // Drop in on mount.
+    useEffect(() => {
+        if (reduced) return undefined;
+        const a = animate(y, 0, { type: "spring", stiffness: 120, damping: 9 });
+        return () => a.stop();
+    }, [reduced, y]);
+
+    // The badge hangs along the strap, so its angle follows its offset.
+    const rotate = useTransform([x, y], ([vx, vy]) => (-Math.atan2(vx, Math.max(40, length + vy)) * 180) / Math.PI);
+    const d = useTransform([x, y], ([vx, vy]) => {
+        const ex = 160 + vx;
+        const ey = length + vy;
+        return `M160 0 Q ${160 + vx * 0.35} ${ey * 0.55} ${ex} ${ey}`;
+    });
+
+    return (
+        <div className="relative flex w-[20rem] max-w-full justify-center" style={{ height: `${strapLength + 22}rem` }}>
+            <svg className="pointer-events-none absolute left-1/2 top-0 -translate-x-1/2 overflow-visible" width="320" height={length + 40} aria-hidden="true">
+                <defs>
+                    <motion.path id={pathId} d={d} />
+                </defs>
+                <motion.path d={d} fill="none" stroke={color} strokeWidth="26" strokeLinecap="butt" />
+                <motion.path d={d} fill="none" stroke="rgba(0,0,0,0.18)" strokeWidth="26" strokeDasharray="2 10" />
+                <text fontSize="11" fontWeight="800" letterSpacing="3" fill="#0a0a0a" dy="4">
+                    <textPath href={`#${pathId}`} startOffset="8">
+                        {`${(p.company || "APEXUI").toUpperCase()} • `.repeat(6)}
+                    </textPath>
+                </text>
+                <rect x="148" y="-6" width="24" height="14" rx="3" fill={dark ? "#2a2a2a" : "#bbb"} />
+            </svg>
+
+            <motion.div
+                drag
+                dragMomentum={false}
+                onDragEnd={() => {
+                    animate(x, 0, swing);
+                    animate(y, 0, swing);
+                }}
+                whileDrag={{ cursor: "grabbing" }}
+                className="absolute left-1/2 cursor-grab touch-none"
+                style={{ x, y, rotate, top: length, marginLeft: "-7.25rem", transformOrigin: "50% 0%" }}
+            >
+                {/* Metal clip */}
+                <div className="mx-auto h-5 w-9 rounded-b-md rounded-t-sm bg-gradient-to-b from-neutral-300 to-neutral-500 shadow-inner" />
+                <article className={`-mt-1 w-[14.5rem] overflow-hidden rounded-2xl border shadow-[0_30px_60px_-24px_rgba(0,0,0,0.6)] ${dark ? "border-white/10 bg-neutral-950 text-white" : "border-black/10 bg-white text-neutral-900"}`}>
+                    <div className="relative h-16 px-4 pt-3" style={{ background: color }}>
+                        <span className="mx-auto block h-2.5 w-12 rounded-full bg-black/25" aria-hidden="true" />
+                        <p className="mt-2 flex items-center justify-between text-[0.7rem] font-black uppercase tracking-[0.2em] text-black/80">
+                            <span>{p.company}</span>
+                            <span>Staff</span>
+                        </p>
+                    </div>
+                    <div className="px-5 pb-5">
+                        <img src={p.avatar} alt="" draggable="false" className={`relative -mt-8 h-24 w-24 rounded-2xl object-cover ring-4 ${dark ? "bg-neutral-800 ring-neutral-950" : "bg-neutral-200 ring-white"}`} />
+                        <h3 className="mt-3 text-[1.05rem] font-bold leading-tight">{p.name}</h3>
+                        <p className={`text-[0.78rem] ${dark ? "text-white/55" : "text-neutral-500"}`}>{p.role}</p>
+                        <div className={`mt-3 grid grid-cols-2 gap-2 text-[0.68rem] ${dark ? "text-white/45" : "text-neutral-500"}`}>
+                            <div>
+                                <p className="uppercase tracking-wider">ID</p>
+                                <p className={`font-mono text-[0.78rem] font-semibold ${dark ? "text-white" : "text-neutral-900"}`}>{p.id}</p>
+                            </div>
+                            <div>
+                                <p className="uppercase tracking-wider">Location</p>
+                                <p className={`truncate text-[0.78rem] font-semibold ${dark ? "text-white" : "text-neutral-900"}`}>{p.location?.split(",")[0]}</p>
+                            </div>
+                        </div>
+                        <div className="mt-4 flex h-9 items-stretch gap-[2px]" aria-hidden="true">
+                            {bars.map((w, i) => (
+                                <span key={i} className={dark ? "bg-white/80" : "bg-neutral-900"} style={{ width: w, opacity: i % 5 === 0 ? 0.5 : 1 }} />
+                            ))}
+                        </div>
+                    </div>
+                </article>
+            </motion.div>
+        </div>
+    );
+}
+
+const ProfileCard = ({ variant = "card", profile = DEFAULT_PROFILE, color = "#a3e635", theme = "dark", strapLength = 10, className = "" }) => {
+    const p = { ...DEFAULT_PROFILE, ...profile };
+    return (
+        <div className={`flex justify-center ${className}`}>
+            {variant === "lanyard" ? <LanyardVariant p={p} color={color} theme={theme} strapLength={strapLength} /> : <CardVariant p={p} color={color} theme={theme} />}
+        </div>
+    );
+};
+
+export default ProfileCard;

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;