apex-ui-kit 2.2.0 → 2.3.1

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

@@ -0,0 +1,191 @@
+import React, { useEffect, useRef, useState } from "react";
+import { animate, motion, useMotionValue, useTransform } from "framer-motion";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+/*
+ * Flip Book: a small 3D hardcover book. Pages turn around the spine and lift
+ * off the stack while a shadow sweeps across them; drag a page to turn it
+ * by hand, click it, use the buttons or the arrow keys. The page edges
+ * thicken on whichever side has more pages, and every page is numbered.
+ */
+
+const IK = "https://ik.imagekit.io/ny6yinyut/apexui/assets";
+const DEFAULT_PAGES = [
+    { title: "ApexUI", body: "A field guide to motion", cover: true },
+    { title: "Chapter 1", body: "Start small. One spring, one easing, one idea per interaction." },
+    { title: "Chapter 2", body: "Motion should explain, where things come from and where they go.", image: `${IK}/spiderman.png?tr=f-auto,q-80,w-500` },
+    { title: "Chapter 3", body: "Keep it fast. Animate transform and opacity, never layout." },
+    { title: "Chapter 4", body: "Respect reduced motion. Calm is a feature too.", image: `${IK}/doctorStrange.png?tr=f-auto,q-80,w-500` },
+    { title: "Chapter 5", body: "Details compound. Tiny shadows and easing make it feel real." },
+    { title: "Chapter 6", body: "Test on a slow phone. If it stutters there, it is not done." },
+    { title: "The end", body: "Now go make something that feels alive.", cover: true },
+];
+
+const PAPER = "#f7f2e8";
+
+function Face({ page, number, accentColor, back }) {
+    const round = back ? "rounded-l-[0.7rem] rounded-r-sm" : "rounded-r-[0.7rem] rounded-l-sm";
+    if (!page) return <div className={`h-full w-full ${round}`} style={{ background: PAPER }} />;
+    if (page.cover) {
+        return (
+            <div className={`relative flex h-full w-full flex-col justify-between overflow-hidden p-6 text-neutral-950 ${round}`} style={{ background: `linear-gradient(135deg, ${accentColor}, color-mix(in srgb, ${accentColor} 50%, #000))` }}>
+                <div className="pointer-events-none absolute inset-3 rounded-md border border-black/15" />
+                <span className="text-[0.62rem] font-bold uppercase tracking-[0.3em] opacity-70">Volume 1</span>
+                <div>
+                    <p className="text-[1.6rem] font-black leading-none">{page.title}</p>
+                    <p className="mt-2 text-[0.82rem] font-medium opacity-80">{page.body}</p>
+                </div>
+                {/* Cloth texture */}
+                <div className="pointer-events-none absolute inset-0 opacity-[0.12] mix-blend-multiply" style={{ backgroundImage: "repeating-linear-gradient(45deg, #000 0 1px, transparent 1px 4px)" }} />
+            </div>
+        );
+    }
+    return (
+        <div className={`flex h-full w-full flex-col p-5 text-neutral-800 ${round}`} style={{ background: PAPER }}>
+            <p className="text-[0.62rem] font-bold uppercase tracking-[0.25em]" style={{ color: `color-mix(in srgb, ${accentColor} 50%, #000)` }}>
+                {page.title}
+            </p>
+            {page.image && <img src={page.image} alt="" draggable="false" className="mt-3 h-[38%] w-full rounded-md object-cover object-top" />}
+            <p className="mt-3 font-serif text-[0.98rem] leading-relaxed">{page.body}</p>
+            <div className="mt-auto flex items-end justify-between gap-3">
+                {!page.image && (
+                    <div className="flex-1 space-y-1.5" aria-hidden="true">
+                        {[90, 75, 82].map((w, i) => (
+                            <span key={i} className="block h-1.5 rounded-full bg-neutral-900/10" style={{ width: `${w}%` }} />
+                        ))}
+                    </div>
+                )}
+                <span className={`font-mono text-[0.65rem] text-neutral-500 ${back ? "order-first" : "ml-auto"}`}>{number}</span>
+            </div>
+        </div>
+    );
+}
+
+// Stacked page edges peeking out under a page.
+const edges = (count, side) => {
+    const n = Math.min(6, Math.ceil(count * 1.5));
+    const dir = side === "right" ? 1 : -1;
+    return Array.from({ length: n }, (_, k) => `${dir * (k + 1)}px ${k + 1}px 0 ${k % 2 ? "#e4dccb" : "#efe8da"}`).join(", ") || "none";
+};
+
+function Sheet({ index, sheet, flipped, active, dragAngle, accentColor, total, onClick }) {
+    const rot = useMotionValue(flipped ? -180 : 0);
+    // Lift while turning, and darken the page as it faces away from the light.
+    const z = useTransform(rot, [0, -90, -180], [0, 40, 0]);
+    const frontShade = useTransform(rot, [0, -90], [0, 0.45]);
+    const backShade = useTransform(rot, [-90, -180], [0.45, 0]);
+
+    useEffect(() => {
+        if (dragAngle != null) rot.set(dragAngle);
+        else animate(rot, flipped ? -180 : 0, { type: "spring", stiffness: 75, damping: 16 });
+    }, [flipped, dragAngle, rot]);
+
+    return (
+        <motion.div className="group absolute inset-0 origin-left cursor-pointer [transform-style:preserve-3d]" style={{ rotateY: rot, z, zIndex: active ? 50 : flipped ? index : total - index }} onClick={onClick}>
+            <div className="absolute inset-0 shadow-[0_18px_36px_-18px_rgba(0,0,0,0.55)] [backface-visibility:hidden]">
+                <Face page={sheet.front} number={index * 2 + 1} accentColor={accentColor} />
+                <div className="pointer-events-none absolute inset-y-0 left-0 w-10 bg-gradient-to-r from-black/20 via-black/5 to-transparent" />
+                <motion.div className="pointer-events-none absolute inset-0 rounded-r-[0.7rem] bg-gradient-to-l from-black to-black/40" style={{ opacity: frontShade }} />
+                {/* Dog-ear hint */}
+                {!flipped && <span className="pointer-events-none absolute bottom-0 right-0 h-7 w-7 origin-bottom-right scale-0 rounded-tl-md bg-gradient-to-tl from-transparent from-50% to-[#e2d9c6] to-50% shadow-[-2px_-2px_6px_rgba(0,0,0,0.15)] transition-transform duration-300 group-hover:scale-100" />}
+            </div>
+            <div className="absolute inset-0 shadow-[0_18px_36px_-18px_rgba(0,0,0,0.55)] [backface-visibility:hidden] [transform:rotateY(180deg)]">
+                <Face page={sheet.back} number={index * 2 + 2} accentColor={accentColor} back />
+                <div className="pointer-events-none absolute inset-y-0 right-0 w-10 bg-gradient-to-l from-black/20 via-black/5 to-transparent" />
+                <motion.div className="pointer-events-none absolute inset-0 rounded-l-[0.7rem] bg-gradient-to-r from-black to-black/40" style={{ opacity: backShade }} />
+            </div>
+        </motion.div>
+    );
+}
+
+const FlipBook = ({ pages = DEFAULT_PAGES, width = 12, accentColor = "#a3e635", className = "" }) => {
+    // Sheets: page 0+1 on sheet 0, 2+3 on sheet 1, …
+    const sheets = [];
+    for (let i = 0; i < pages.length; i += 2) sheets.push({ front: pages[i], back: pages[i + 1] });
+    const [turned, setTurned] = useState(0);
+    const [drag, setDrag] = useState(null); // { sheet, angle }
+    const start = useRef(null);
+    const dragged = useRef(false);
+    const pageRef = useRef(null);
+    const go = (dir) => setTurned((t) => Math.min(sheets.length, Math.max(0, t + dir)));
+    const open = turned > 0 && turned < sheets.length;
+
+    const onDown = (e) => {
+        dragged.current = false;
+        start.current = { x: e.clientX, moved: false, w: pageRef.current.offsetWidth };
+    };
+    const onMove = (e) => {
+        const s = start.current;
+        if (!s) return;
+        const dx = e.clientX - s.x;
+        if (!s.moved && Math.abs(dx) < 6) return;
+        if (!s.moved) {
+            s.moved = true;
+            s.sheet = dx < 0 ? turned : turned - 1;
+            s.from = dx < 0 ? 0 : -180;
+            if (s.sheet < 0 || s.sheet >= sheets.length) return (start.current = null);
+            e.currentTarget.setPointerCapture(e.pointerId);
+        }
+        const angle = Math.max(-180, Math.min(0, s.from + (dx / s.w) * 180));
+        setDrag({ sheet: s.sheet, angle });
+    };
+    const onUp = () => {
+        const s = start.current;
+        start.current = null;
+        if (!s?.moved || !drag) return;
+        dragged.current = true;
+        const flippedNow = drag.angle < -90;
+        setTurned(flippedNow ? s.sheet + 1 : s.sheet);
+        setDrag(null);
+    };
+
+    return (
+        <div
+            className={`flex flex-col items-center gap-7 outline-none ${className}`}
+            tabIndex={0}
+            onKeyDown={(e) => {
+                if (e.key === "ArrowRight") go(1);
+                if (e.key === "ArrowLeft") go(-1);
+            }}
+            aria-label="Flip book"
+        >
+            <div className="relative flex touch-pan-y select-none [perspective:2000px]" style={{ width: `min(${width * 2}rem, 92vw)` }} onPointerDown={onDown} onPointerMove={onMove} onPointerUp={onUp} onPointerCancel={onUp}>
+                {/* Hardcover boards behind the open spread */}
+                <div className="pointer-events-none absolute -inset-x-2 -inset-y-2 rounded-xl transition-opacity duration-500" style={{ opacity: open ? 1 : 0, background: `color-mix(in srgb, ${accentColor} 35%, #111)`, boxShadow: "0 30px 60px -25px rgba(0,0,0,0.6)" }} />
+                <div className="flex-1" />
+                <div ref={pageRef} className="relative aspect-[3/4] flex-1 [transform-style:preserve-3d]" style={{ transform: `translateX(${turned === 0 && !drag ? "-50%" : turned === sheets.length && !drag ? "50%" : "0%"})`, transition: "transform 600ms cubic-bezier(0.22,1,0.36,1)" }}>
+                    <div className="absolute inset-y-0 right-full w-full rounded-l-[0.7rem] transition-[opacity,box-shadow] duration-500" style={{ opacity: turned > 0 ? 1 : 0, boxShadow: edges(turned, "left") }} />
+                    <div className="absolute inset-0 rounded-r-[0.7rem] transition-[opacity,box-shadow] duration-500" style={{ opacity: turned < sheets.length ? 1 : 0, boxShadow: edges(sheets.length - turned, "right") }} />
+                    {sheets.map((sheet, i) => (
+                        <Sheet
+                            key={i}
+                            index={i}
+                            sheet={sheet}
+                            total={sheets.length}
+                            flipped={i < turned}
+                            active={drag?.sheet === i}
+                            dragAngle={drag?.sheet === i ? drag.angle : null}
+                            accentColor={accentColor}
+                            onClick={() => !dragged.current && go(i < turned ? -1 : 1)}
+                        />
+                    ))}
+                </div>
+            </div>
+            <div className="flex items-center gap-4">
+                <button type="button" aria-label="Previous page" onClick={() => go(-1)} disabled={turned === 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>
+                <div className="flex gap-1" aria-hidden="true">
+                    {Array.from({ length: sheets.length + 1 }, (_, i) => (
+                        <span key={i} className="h-1.5 rounded-full transition-all duration-300" style={{ width: i === turned ? 18 : 6, background: i === turned ? accentColor : "color-mix(in srgb, currentColor 25%, transparent)" }} />
+                    ))}
+                </div>
+                <button type="button" aria-label="Next page" onClick={() => go(1)} disabled={turned === sheets.length} 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">
+                    <ChevronRight className="h-5 w-5" />
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default FlipBook;

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

@@ -0,0 +1,162 @@
+import React, { useEffect, useId, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { ArrowUpRight } from "lucide-react";
+
+/*
+ * Floating Navbar: a glassy pill that floats over the page. A highlight
+ * follows the pointer across the links, the active link keeps a dot, and the
+ * bar tucks away when you scroll down and slides back when you scroll up.
+ * It switches to a hamburger menu based on its own width (container query),
+ * so it is responsive wherever you put it.
+ */
+
+const DEFAULT_LINKS = [
+    { label: "Home", href: "#home" },
+    { label: "Components", href: "#components" },
+    { label: "Templates", href: "#templates" },
+    { label: "Pricing", href: "#pricing" },
+    { label: "Blog", href: "#blog" },
+];
+
+function Burger({ open }) {
+    return (
+        <span className="relative block h-3.5 w-5" aria-hidden="true">
+            <motion.span className="absolute left-0 top-0 h-[2px] w-full rounded-full bg-current" animate={open ? { top: "50%", rotate: 45, y: "-50%" } : { top: "0%", rotate: 0, y: 0 }} />
+            <motion.span className="absolute left-0 top-1/2 h-[2px] w-full -translate-y-1/2 rounded-full bg-current" animate={{ opacity: open ? 0 : 1, scaleX: open ? 0.3 : 1 }} />
+            <motion.span className="absolute bottom-0 left-0 h-[2px] w-full rounded-full bg-current" animate={open ? { bottom: "50%", rotate: -45, y: "50%" } : { bottom: "0%", rotate: 0, y: 0 }} />
+        </span>
+    );
+}
+
+const FloatingNavbar = ({
+    brand = "Apex",
+    links = DEFAULT_LINKS,
+    cta = { label: "Get started", href: "#start" },
+    active: activeProp,
+    onNavigate,
+    hideOnScroll = true,
+    scrollRoot,
+    accentColor = "#a3e635",
+    theme = "dark",
+    className = "",
+}) => {
+    const id = useId();
+    const [active, setActive] = useState(activeProp ?? links[0]?.label);
+    const [hover, setHover] = useState(null);
+    const [open, setOpen] = useState(false);
+    const [hidden, setHidden] = useState(false);
+    const [compact, setCompact] = useState(false);
+    const dark = theme !== "light";
+
+    // Hide on scroll down, show on scroll up; compact once the page has moved.
+    useEffect(() => {
+        const root = scrollRoot?.current ?? window;
+        const read = () => (root === window ? window.scrollY : root.scrollTop);
+        let last = read();
+        const onScroll = () => {
+            const y = read();
+            setCompact(y > 24);
+            if (hideOnScroll && Math.abs(y - last) > 6) setHidden(y > last && y > 80);
+            last = y;
+        };
+        root.addEventListener("scroll", onScroll, { passive: true });
+        return () => root.removeEventListener("scroll", onScroll);
+    }, [hideOnScroll, scrollRoot]);
+
+    const go = (link, e) => {
+        setActive(link.label);
+        setOpen(false);
+        onNavigate?.(link, e);
+    };
+
+    const surface = dark ? "border-white/10 bg-neutral-900/70 text-white shadow-[0_10px_40px_-12px_rgba(0,0,0,0.7)]" : "border-black/10 bg-white/75 text-neutral-900 shadow-[0_10px_40px_-14px_rgba(0,0,0,0.25)]";
+    const muted = dark ? "text-white/65 hover:text-white" : "text-neutral-500 hover:text-neutral-900";
+
+    return (
+        <div className={`@container sticky top-3 z-50 w-full px-3 ${className}`}>
+            <motion.nav
+                aria-label="Main"
+                initial={false}
+                animate={{ y: hidden && !open ? "-140%" : "0%", opacity: hidden && !open ? 0 : 1 }}
+                transition={{ type: "spring", stiffness: 380, damping: 34 }}
+                className={`mx-auto max-w-4xl rounded-[1.6rem] border backdrop-blur-xl transition-[padding] duration-300 ${surface} ${compact ? "px-2.5 py-1.5" : "px-3 py-2.5"}`}
+            >
+                <div className="flex items-center justify-between gap-3">
+                    <a href="#home" onClick={(e) => go(links[0], e)} className="flex items-center gap-2 pl-1.5 text-[0.95rem] font-bold">
+                        <motion.span whileHover={{ rotate: -12, scale: 1.08 }} className="grid h-8 w-8 place-items-center rounded-xl text-sm font-black text-black" style={{ background: accentColor }}>
+                            {brand[0]}
+                        </motion.span>
+                        {brand}
+                    </a>
+
+                    {/* Desktop links with a pill that follows the pointer. */}
+                    <ul className="hidden items-center gap-0.5 @xl:flex" onPointerLeave={() => setHover(null)}>
+                        {links.map((link) => {
+                            const on = active === link.label;
+                            return (
+                                <li key={link.label} className="relative">
+                                    <a
+                                        href={link.href}
+                                        onClick={(e) => go(link, e)}
+                                        onPointerEnter={() => setHover(link.label)}
+                                        aria-current={on ? "page" : undefined}
+                                        className={`relative block rounded-full px-3 py-2 text-[0.86rem] font-medium transition-colors ${on ? "" : muted}`}
+                                    >
+                                        {hover === link.label && <motion.span layoutId={`${id}-hover`} className={`absolute inset-0 rounded-full ${dark ? "bg-white/[0.08]" : "bg-black/[0.05]"}`} transition={{ type: "spring", stiffness: 500, damping: 38 }} />}
+                                        <span className="relative">{link.label}</span>
+                                        {on && <motion.span layoutId={`${id}-dot`} className="absolute bottom-0.5 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full" style={{ background: accentColor }} />}
+                                    </a>
+                                </li>
+                            );
+                        })}
+                    </ul>
+
+                    <div className="flex items-center gap-1.5">
+                        {cta && (
+                            <motion.a
+                                href={cta.href}
+                                whileHover={{ scale: 1.04 }}
+                                whileTap={{ scale: 0.96 }}
+                                className="hidden items-center gap-1 rounded-full px-4 py-2 text-[0.85rem] font-semibold text-black @3xl:inline-flex"
+                                style={{ background: accentColor }}
+                            >
+                                {cta.label}
+                                <ArrowUpRight className="h-4 w-4" />
+                            </motion.a>
+                        )}
+                        <button type="button" aria-label={open ? "Close menu" : "Open menu"} aria-expanded={open} onClick={() => setOpen((o) => !o)} className={`grid h-10 w-10 place-items-center rounded-full @xl:hidden ${dark ? "hover:bg-white/10" : "hover:bg-black/5"}`}>
+                            <Burger open={open} />
+                        </button>
+                    </div>
+                </div>
+
+                {/* Mobile menu */}
+                <AnimatePresence initial={false}>
+                    {open && (
+                        <motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: "auto", opacity: 1 }} exit={{ height: 0, opacity: 0 }} transition={{ duration: 0.3, ease: [0.22, 1, 0.36, 1] }} className="overflow-hidden @xl:hidden">
+                            <ul className="space-y-1 px-1 pb-2 pt-3">
+                                {links.map((link, i) => (
+                                    <motion.li key={link.label} initial={{ x: -14, opacity: 0 }} animate={{ x: 0, opacity: 1 }} transition={{ delay: 0.04 * i + 0.05 }}>
+                                        <a href={link.href} onClick={(e) => go(link, e)} className={`flex items-center justify-between rounded-2xl px-4 py-3 text-[0.95rem] font-medium ${active === link.label ? (dark ? "bg-white/[0.08]" : "bg-black/[0.05]") : ""}`}>
+                                            {link.label}
+                                            {active === link.label && <span className="h-1.5 w-1.5 rounded-full" style={{ background: accentColor }} />}
+                                        </a>
+                                    </motion.li>
+                                ))}
+                                {cta && (
+                                    <motion.li initial={{ y: 8, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ delay: 0.04 * links.length + 0.08 }} className="pt-2">
+                                        <a href={cta.href} className="flex items-center justify-center gap-1 rounded-2xl py-3 text-[0.95rem] font-semibold text-black" style={{ background: accentColor }}>
+                                            {cta.label} <ArrowUpRight className="h-4 w-4" />
+                                        </a>
+                                    </motion.li>
+                                )}
+                            </ul>
+                        </motion.div>
+                    )}
+                </AnimatePresence>
+            </motion.nav>
+        </div>
+    );
+};
+
+export default FloatingNavbar;

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

@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+
+/*
+ * Folder: a little folder that opens on click — the front flap tilts down
+ * and up to three papers fan out of it. While open, each paper leans toward
+ * the pointer a little. Click again to tuck everything back in.
+ */
+
+const DEFAULT_ITEMS = [
+    <div key="a" className="space-y-1.5 p-2">
+        <p className="text-[0.55rem] font-bold text-neutral-800">Notes.md</p>
+        {[85, 60, 72].map((w) => (
+            <span key={w} className="block h-1 rounded-full bg-neutral-300" style={{ width: `${w}%` }} />
+        ))}
+    </div>,
+    <div key="b" className="space-y-1.5 p-2">
+        <p className="text-[0.55rem] font-bold text-neutral-800">Plan.pdf</p>
+        {[70, 90, 50].map((w) => (
+            <span key={w} className="block h-1 rounded-full bg-neutral-300" style={{ width: `${w}%` }} />
+        ))}
+    </div>,
+    <div key="c" className="space-y-1.5 p-2">
+        <p className="text-[0.55rem] font-bold text-neutral-800">Logo.png</p>
+        <span className="block h-7 rounded bg-gradient-to-br from-lime-300 to-cyan-300" />
+    </div>,
+];
+
+// Where each paper lands when open, in em (scales with `size`).
+const SPOTS = [
+    { x: -3.9, y: -3.3, r: -14 },
+    { x: 0, y: -4.2, r: 3 },
+    { x: 3.9, y: -3.3, r: 15 },
+];
+
+const Folder = ({ color = "#a3e635", size = 1, items = DEFAULT_ITEMS, label = "Projects", className = "" }) => {
+    const [open, setOpen] = useState(false);
+    const [lean, setLean] = useState([]);
+    const papers = items.slice(0, 3);
+    const back = `color-mix(in srgb, ${color} 75%, #000)`;
+
+    return (
+        <div className={`flex flex-col items-center gap-4 ${className}`} style={{ fontSize: `${size}rem` }}>
+            <button
+                type="button"
+                aria-expanded={open}
+                aria-label={`${label} folder`}
+                onClick={() => {
+                    setOpen((o) => !o);
+                    setLean([]);
+                }}
+                className="group relative h-[5.5em] w-[7em] outline-none transition-transform duration-200 hover:-translate-y-1"
+                style={{ perspective: "600px" }}
+            >
+                {/* Back panel with tab */}
+                <span className="absolute inset-0 rounded-[0.6em] rounded-tl-none" style={{ background: back }} />
+                <span className="absolute -top-[0.7em] left-0 h-[0.9em] w-[2.6em] rounded-t-[0.45em]" style={{ background: back }} />
+
+                {papers.map((p, i) => {
+                    const spot = SPOTS[papers.length === 1 ? 1 : papers.length === 2 ? i * 2 : i];
+                    const l = lean[i] ?? { x: 0, y: 0 };
+                    return (
+                        <motion.span
+                            key={i}
+                            className="absolute bottom-[10%] left-[10%] h-[80%] w-[80%] overflow-hidden rounded-[0.4em] bg-white text-left shadow-md"
+                            initial={false}
+                            animate={open ? { x: `${spot.x + l.x}em`, y: `${spot.y + l.y}em`, rotate: spot.r, scale: 1 } : { x: "0em", y: `${-0.3 - i * 0.2}em`, rotate: 0, scale: 0.92 - (2 - i) * 0.03 }}
+                            transition={{ type: "spring", stiffness: 300, damping: 22, delay: open ? i * 0.04 : 0 }}
+                            onPointerMove={(e) => {
+                                if (!open) return;
+                                const r = e.currentTarget.getBoundingClientRect();
+                                const next = [...lean];
+                                next[i] = { x: ((e.clientX - (r.left + r.width / 2)) / r.width) * 0.8, y: ((e.clientY - (r.top + r.height / 2)) / r.height) * 0.8 };
+                                setLean(next);
+                            }}
+                            onPointerLeave={() => {
+                                const next = [...lean];
+                                next[i] = { x: 0, y: 0 };
+                                setLean(next);
+                            }}
+                        >
+                            {p}
+                        </motion.span>
+                    );
+                })}
+
+                {/* Front flap */}
+                <motion.span
+                    className="absolute inset-x-0 bottom-0 h-[85%] origin-bottom rounded-[0.6em] shadow-[0_-4px_12px_rgba(0,0,0,0.12)]"
+                    style={{ background: `linear-gradient(180deg, color-mix(in srgb, ${color} 85%, #fff), ${color})` }}
+                    initial={false}
+                    animate={{ rotateX: open ? -38 : 0 }}
+                    transition={{ type: "spring", stiffness: 260, damping: 20 }}
+                />
+            </button>
+            <span className="text-sm font-medium opacity-70">{label}</span>
+        </div>
+    );
+};
+
+export default Folder;

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

@@ -0,0 +1,56 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useReducedMotion } from "framer-motion";
+
+/*
+ * Glitch Text: two colored copies of the text sit behind it and jump
+ * around in random horizontal slices, like a broken signal. Runs all the
+ * time or only while hovered.
+ */
+
+const slice = () => {
+    const top = Math.random() * 90;
+    return `inset(${top}% 0 ${Math.max(0, 100 - top - (6 + Math.random() * 22))}% 0)`;
+};
+
+const GlitchText = ({ text = "GLITCH", colors = ["#22d3ee", "#f43f5e"], speed = 90, hoverOnly = false, className = "" }) => {
+    const reduced = useReducedMotion();
+    const [hover, setHover] = useState(false);
+    const a = useRef(null);
+    const b = useRef(null);
+    const active = !reduced && (!hoverOnly || hover);
+
+    useEffect(() => {
+        const layers = [a.current, b.current];
+        if (!active) {
+            layers.forEach((el) => {
+                el.style.clipPath = "inset(50% 0 50% 0)";
+                el.style.transform = "none";
+            });
+            return undefined;
+        }
+        const id = setInterval(() => {
+            layers.forEach((el, i) => {
+                const burst = Math.random() < 0.25;
+                el.style.clipPath = slice();
+                el.style.transform = `translate(${(i ? 1 : -1) * (burst ? 6 + Math.random() * 6 : 1 + Math.random() * 3)}px, ${(Math.random() - 0.5) * 2}px)`;
+            });
+        }, speed);
+        return () => clearInterval(id);
+    }, [active, speed]);
+
+    const layer = "pointer-events-none absolute inset-0 select-none";
+    return (
+        <span className={`relative inline-block font-black tracking-tight ${className}`} onPointerEnter={() => setHover(true)} onPointerLeave={() => setHover(false)}>
+            <span>{text}</span>
+            {/* Sliced, shifted copies painted over the text. */}
+            <span ref={a} aria-hidden="true" className={layer} style={{ color: colors[0], clipPath: "inset(50% 0 50% 0)" }}>
+                {text}
+            </span>
+            <span ref={b} aria-hidden="true" className={layer} style={{ color: colors[1], clipPath: "inset(50% 0 50% 0)" }}>
+                {text}
+            </span>
+        </span>
+    );
+};
+
+export default GlitchText;