apex-ui-kit 2.7.0 → 2.8.0

package/ReadMe.md

@@ -4,7 +4,7 @@
 [![npm downloads](https://img.shields.io/npm/dm/apex-ui-kit?color=a3e635)](https://www.npmjs.com/package/apex-ui-kit)
 [![license](https://img.shields.io/npm/l/apex-ui-kit?color=a3e635)](./Licence.md)
 
-**107 free, animated UI components for React.** Pick one, add it with a single command, and the source lands in your project so you can read it and change anything.
+**115 free, animated UI components for React.** Pick one, add it with a single command, and the source lands in your project so you can read it and change anything.
 
 Built with React, Tailwind CSS and Framer Motion, plus GSAP, Canvas and WebGL where a component needs them.
 
@@ -15,7 +15,7 @@ Built with React, Tailwind CSS and Framer Motion, plus GSAP, Canvas and WebGL wh
 
 ## Why ApexUI
 
-- **107 components** across backgrounds, cards, text effects, navigation, buttons, interactive UI, AI interfaces, loaders and maps.
+- **115 components** across backgrounds, cards, text effects, navigation, buttons, interactive UI, AI interfaces, loaders and maps.
 - **You own the code.** The CLI copies plain `.jsx` files into your project, no runtime package to keep in sync.
 - **Every docs page has** a live preview, a playground to tweak props, a Desktop / Tablet / Mobile preview, the full props table and a ready prompt you can paste into ChatGPT or Claude.
 - **Smooth on real devices.** Animations stick to transform and opacity, respect reduced motion, and work with mouse, touch and keyboard.
@@ -99,12 +99,13 @@ Every component's props, variants and copy-ready code are on its docs page.
 
 ## Components
 
-### Backgrounds (16)
+### Backgrounds (17)
 
 | Component | CLI name |
 | --- | --- |
 | [Aurora Background](https://apex-ui.in/components/aurora-background) | `aurora-background` |
 | [BluePrint Background](https://apex-ui.in/components/blueprint-background) | `blueprint-background` |
+| [Dither Waves](https://apex-ui.in/components/dither-waves) | `dither-waves` |
 | [Dot Wave Background](https://apex-ui.in/components/dot-wave-background) | `dot-wave-background` |
 | [Galaxy 3D](https://apex-ui.in/components/galaxy-3d) | `galaxy-3d` |
 | [Horizon Glow](https://apex-ui.in/components/horizon-glow) | `horizon-glow` |
@@ -120,7 +121,7 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Sunrise Background](https://apex-ui.in/components/sunrise-background) | `sunrise-background` |
 | [Warp Tunnel](https://apex-ui.in/components/warp-tunnel) | `warp-tunnel` |
 
-### Cards (19)
+### Cards (20)
 
 | Component | CLI name |
 | --- | --- |
@@ -133,6 +134,7 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Glare Card](https://apex-ui.in/components/glare-card) | `glare-card` |
 | [Holo Card](https://apex-ui.in/components/holo-card) | `holo-card` |
 | [Hyper Card](https://apex-ui.in/components/hyper-card) | `hyper-card` |
+| [Image Accordion](https://apex-ui.in/components/image-accordion) | `image-accordion` |
 | [Iso Stack](https://apex-ui.in/components/iso-stack) | `iso-stack` |
 | [Parallax Card](https://apex-ui.in/components/parallax-card) | `parallax-card` |
 | [Pixel Transition](https://apex-ui.in/components/pixel-transition) | `pixel-transition` |
@@ -144,7 +146,7 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Swipe Cards](https://apex-ui.in/components/swipe-cards) | `swipe-cards` |
 | [Testimonials](https://apex-ui.in/components/testimonials) | `testimonials` |
 
-### Text & Motion (19)
+### Text & Motion (20)
 
 | Component | CLI name |
 | --- | --- |
@@ -153,6 +155,7 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Beam Bar](https://apex-ui.in/components/beam-bar) | `beam-bar` |
 | [Blur Reveal Text](https://apex-ui.in/components/blur-reveal-text) | `blur-reveal-text` |
 | [Circular Text](https://apex-ui.in/components/circular-text) | `circular-text` |
+| [Crossed Marquee](https://apex-ui.in/components/crossed-marquee) | `crossed-marquee` |
 | [Extruded Text](https://apex-ui.in/components/extruded-text) | `extruded-text` |
 | [Flip Clock](https://apex-ui.in/components/flip-clock) | `flip-clock` |
 | [Glitch Text](https://apex-ui.in/components/glitch-text) | `glitch-text` |
@@ -168,11 +171,12 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [True Focus](https://apex-ui.in/components/true-focus) | `true-focus` |
 | [Typewriter Text](https://apex-ui.in/components/typewriter-text) | `typewriter-text` |
 
-### Navigation (9)
+### Navigation (11)
 
 | Component | CLI name |
 | --- | --- |
 | [Animated Tabs](https://apex-ui.in/components/animated-tabs) | `animated-tabs` |
+| [Command Palette](https://apex-ui.in/components/command-palette) | `command-palette` |
 | [Floating Navbar](https://apex-ui.in/components/floating-navbar) | `floating-navbar` |
 | [Gooey Nav](https://apex-ui.in/components/gooey-nav) | `gooey-nav` |
 | [Magnify Dock](https://apex-ui.in/components/magnify-dock) | `magnify-dock` |
@@ -180,6 +184,7 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Nav Menu](https://apex-ui.in/components/nav-menu) | `nav-menu` |
 | [Radial Menu](https://apex-ui.in/components/radial-menu) | `radial-menu` |
 | [Sidebar Nav](https://apex-ui.in/components/sidebar-nav) | `sidebar-nav` |
+| [Theme Switcher](https://apex-ui.in/components/theme-switcher) | `theme-switcher` |
 | [Theme Toggle](https://apex-ui.in/components/theme-toggle) | `theme-toggle` |
 
 ### Buttons (4)
@@ -191,7 +196,7 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Magnetic Button](https://apex-ui.in/components/magnetic-button) | `magnetic-button` |
 | [Star Border](https://apex-ui.in/components/star-border) | `star-border` |
 
-### Interactive (27)
+### Interactive (30)
 
 | Component | CLI name |
 | --- | --- |
@@ -210,11 +215,14 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Elastic Slider](https://apex-ui.in/components/elastic-slider) | `elastic-slider` |
 | [FAQ Accordion](https://apex-ui.in/components/faq-accordion) | `faq-accordion` |
 | [Flip Book](https://apex-ui.in/components/flip-book) | `flip-book` |
+| [Glass Lens](https://apex-ui.in/components/glass-lens) | `glass-lens` |
 | [Image Compare](https://apex-ui.in/components/image-compare) | `image-compare` |
+| [Infinite Canvas](https://apex-ui.in/components/infinite-canvas) | `infinite-canvas` |
 | [Liquid Blob 3D](https://apex-ui.in/components/liquid-blob-3d) | `liquid-blob-3d` |
 | [Magnet Lines](https://apex-ui.in/components/magnet-lines) | `magnet-lines` |
 | [Magnetic Cursor](https://apex-ui.in/components/magnetic-cursor) | `magnetic-cursor` |
 | [Marquee 3D](https://apex-ui.in/components/marquee-3d) | `marquee-3d` |
+| [Orbit Icons](https://apex-ui.in/components/orbit-icons) | `orbit-icons` |
 | [Particle Morph](https://apex-ui.in/components/particle-morph) | `particle-morph` |
 | [Pointer Follower](https://apex-ui.in/components/pointer-follower) | `pointer-follower` |
 | [Receipt Printer](https://apex-ui.in/components/receipt-printer) | `receipt-printer` |
@@ -251,9 +259,11 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Dot Globe](https://apex-ui.in/components/dot-globe) | `dot-globe` |
 | [World Map](https://apex-ui.in/components/world-map) | `world-map` |
 
-## What's new in 2.7
+## What's new in 2.8
 
-- 38 new components, including WebGL and three.js (Sunrise Background, Horizon Glow, Circular Carousel, Arc Gallery, Galaxy 3D, Warp Tunnel, Wireframe Knot 3D, Marquee 3D, Distortion Image, Liquid Blob 3D, Particle Morph, Retro Grid 3D), Scroll Stack, Particle Text, Edge Blur, Magnetic Button, Radial Menu, the AI voice family (Wave, Bars, Ring, Blob), Gooey Nav (WebGL metaball pill), Coverflow 3D, Card Swap 3D, 3D Text Ring, Elastic Slider, Stepper and Pixel Transition.
+- New in 2.8: Glass Lens (WebGL liquid glass), Dither Waves (WebGL 1-bit background), Infinite Canvas, Image Accordion, Orbit Icons, Command Palette, Crossed Marquee (tech-stack bands with simple-icons) and Theme Switcher (8 themes with a circle reveal).
+- Toast Stack and Radial Menu no longer blink in production builds; Radial Menu, 3D Text Ring, Animated Tabs and Gooey Nav now fit 320px phones.
+- 38 new components since 2.6, including WebGL and three.js (Sunrise Background, Horizon Glow, Circular Carousel, Arc Gallery, Galaxy 3D, Warp Tunnel, Wireframe Knot 3D, Marquee 3D, Distortion Image, Liquid Blob 3D, Particle Morph, Retro Grid 3D), Scroll Stack, Particle Text, Edge Blur, Magnetic Button, Radial Menu, the AI voice family (Wave, Bars, Ring, Blob), Gooey Nav (WebGL metaball pill), Coverflow 3D, Card Swap 3D, 3D Text Ring, Elastic Slider, Stepper and Pixel Transition.
 - Accordion Marquee is rebuilt: one liquid band glides between rows on springs, leans toward the pointer, and its marquee speeds up with sideways mouse moves. No GSAP needed any more.
 - AI Model Prompt now exports `DEFAULT_LLM_MODELS` and an index file, so you can import both from the folder.
 - Loading Screens follow the real page load by default: drop `<LoadingScreen fullScreen />` into your app and it covers the page while it loads, with a live bar and percentage, then hides itself. Pass `progress` to drive it yourself.

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

@@ -58,7 +58,7 @@ const AnimatedTabs = ({ tabs = DEFAULT_TABS, defaultTab, variant = "pill", accen
                             aria-controls={`${id}-panel`}
                             tabIndex={on ? 0 : -1}
                             onClick={() => select(i)}
-                            className={`relative flex-1 whitespace-nowrap px-3 py-2 text-[0.82rem] sm:px-4 sm:text-[0.88rem] font-medium outline-none transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-current/40 ${variant === "underline" ? "pb-3" : variant === "pill" ? "rounded-full" : "rounded-lg"} ${on ? (variant === "pill" ? "text-neutral-950" : "") : dark ? "text-white/55 hover:text-white" : "text-neutral-500 hover:text-neutral-900"}`}
+                            className={`relative flex-1 whitespace-nowrap px-3 py-2 text-[0.82rem] max-[380px]:px-2 max-[380px]:text-[0.76rem] sm:px-4 sm:text-[0.88rem] font-medium outline-none transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-current/40 ${variant === "underline" ? "pb-3" : variant === "pill" ? "rounded-full" : "rounded-lg"} ${on ? (variant === "pill" ? "text-neutral-950" : "") : dark ? "text-white/55 hover:text-white" : "text-neutral-500 hover:text-neutral-900"}`}
                         >
                             {on && (
                                 <motion.span

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

@@ -0,0 +1,250 @@
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { CornerDownLeft, FileText, Github, LayoutGrid, LogOut, Moon, Plus, Search, Settings, Sparkles, User } from "lucide-react";
+
+/*
+ * Command Palette: a ⌘K / Ctrl+K search box for jumping anywhere. Typing
+ * filters with a forgiving fuzzy match (letters in order, gaps allowed) and
+ * highlights the matched letters; arrow keys move a highlight that slides
+ * between rows, Enter runs the command, Escape closes. The panel eases in and
+ * out with CSS transitions only, so it never blinks.
+ */
+
+const DEFAULT_GROUPS = [
+    {
+        heading: "Suggestions",
+        items: [
+            { id: "new", label: "Create new project", icon: Plus, shortcut: "N" },
+            { id: "components", label: "Browse components", icon: LayoutGrid, hint: "107 ready to use" },
+            { id: "ai", label: "Ask AI to build a section", icon: Sparkles, keywords: "assistant generate" },
+        ],
+    },
+    {
+        heading: "Pages",
+        items: [
+            { id: "docs", label: "Documentation", icon: FileText },
+            { id: "github", label: "Open GitHub", icon: Github, keywords: "repo source" },
+        ],
+    },
+    {
+        heading: "Settings",
+        items: [
+            { id: "profile", label: "Profile", icon: User, shortcut: "P" },
+            { id: "theme", label: "Toggle dark mode", icon: Moon, keywords: "theme light" },
+            { id: "settings", label: "Preferences", icon: Settings, shortcut: "," },
+            { id: "logout", label: "Log out", icon: LogOut },
+        ],
+    },
+];
+
+// Letters in order, gaps allowed. Lower score is better; returns matched indexes.
+function fuzzy(text, query) {
+    if (!query) return { score: 0, hits: [] };
+    const t = text.toLowerCase();
+    const q = query.toLowerCase();
+    let ti = 0;
+    let score = 0;
+    let prev = -1;
+    const hits = [];
+    for (const ch of q) {
+        if (ch === " ") continue;
+        const at = t.indexOf(ch, ti);
+        if (at < 0) return null;
+        score += at - prev - 1 + (at === 0 || t[at - 1] === " " ? 0 : 0.5);
+        hits.push(at);
+        prev = at;
+        ti = at + 1;
+    }
+    return { score, hits };
+}
+
+const Highlight = ({ text, hits }) => {
+    if (!hits.length) return text;
+    const set = new Set(hits);
+    return [...text].map((ch, i) => (set.has(i) ? <mark key={i} className="bg-transparent font-semibold text-[var(--cp-accent)]">{ch}</mark> : ch));
+};
+
+const CommandPalette = ({ groups = DEFAULT_GROUPS, placeholder = "Type a command or search…", hotkey = "k", accentColor = "#a3e635", theme = "dark", contained = false, triggerLabel = "Search", defaultOpen = false, onSelect, className = "" }) => {
+    const [open, setOpen] = useState(defaultOpen);
+    const [mounted, setMounted] = useState(defaultOpen);
+    const [shown, setShown] = useState(defaultOpen);
+    const [query, setQuery] = useState("");
+    const [active, setActive] = useState(0);
+    const [done, setDone] = useState(null);
+    const input = useRef(null);
+    const listRef = useRef(null);
+    const bar = useRef(null);
+    const rows = useRef([]);
+    const dark = theme !== "light";
+
+    const results = useMemo(() => {
+        const out = [];
+        groups.forEach((g) => {
+            const items = g.items
+                .map((it) => {
+                    const m = fuzzy(it.label, query) ?? (it.keywords && fuzzy(it.keywords, query) ? { score: 50, hits: [] } : null);
+                    return m && { ...it, ...m };
+                })
+                .filter(Boolean)
+                .sort((a, b) => a.score - b.score);
+            if (items.length) out.push({ heading: g.heading, items });
+        });
+        return out;
+    }, [groups, query]);
+    const flat = useMemo(() => results.flatMap((g) => g.items), [results]);
+
+    // Mount, then show on the next frame so the enter transition runs; hide, then unmount.
+    useEffect(() => {
+        if (open) {
+            setMounted(true);
+            const id = requestAnimationFrame(() => requestAnimationFrame(() => setShown(true)));
+            return () => cancelAnimationFrame(id);
+        }
+        setShown(false);
+        const t = setTimeout(() => setMounted(false), 220);
+        return () => clearTimeout(t);
+    }, [open]);
+
+    useEffect(() => {
+        if (shown) input.current?.focus({ preventScroll: true });
+    }, [shown]);
+
+    useEffect(() => {
+        const onKey = (e) => {
+            if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === hotkey) {
+                e.preventDefault();
+                setOpen((o) => !o);
+            }
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [hotkey]);
+
+    useEffect(() => setActive(0), [query]);
+
+    // Slide the highlight to the active row and keep it in view.
+    useLayoutEffect(() => {
+        const row = rows.current[active];
+        const b = bar.current;
+        if (!row || !b) {
+            if (b) b.style.opacity = "0";
+            return;
+        }
+        b.style.opacity = "1";
+        b.style.transform = `translateY(${row.offsetTop}px)`;
+        b.style.height = `${row.offsetHeight}px`;
+        row.scrollIntoView({ block: "nearest" });
+    }, [active, flat.length, mounted]);
+
+    const close = useCallback(() => {
+        setOpen(false);
+        setTimeout(() => setQuery(""), 220);
+    }, []);
+    const run = (item) => {
+        if (!item) return;
+        onSelect?.(item);
+        setDone(item.label);
+        setTimeout(() => setDone(null), 1600);
+        close();
+    };
+
+    const onKeyDown = (e) => {
+        if (e.key === "ArrowDown") setActive((a) => (flat.length ? (a + 1) % flat.length : 0));
+        else if (e.key === "ArrowUp") setActive((a) => (flat.length ? (a - 1 + flat.length) % flat.length : 0));
+        else if (e.key === "Home") setActive(0);
+        else if (e.key === "End") setActive(Math.max(0, flat.length - 1));
+        else if (e.key === "Enter") run(flat[active]);
+        else if (e.key === "Escape") close();
+        else return;
+        e.preventDefault();
+    };
+
+    const t = dark
+        ? { panel: "border-white/10 bg-neutral-950/90 text-white", muted: "text-white/45", line: "border-white/10", row: "text-white/85", hl: "bg-white/[0.07]", kbd: "border-white/15 bg-white/5 text-white/60", trigger: "border-white/10 bg-neutral-900 text-white/70 hover:text-white" }
+        : { panel: "border-black/10 bg-white/95 text-neutral-900", muted: "text-neutral-400", line: "border-black/10", row: "text-neutral-700", hl: "bg-black/[0.05]", kbd: "border-black/10 bg-black/[0.03] text-neutral-500", trigger: "border-black/10 bg-white text-neutral-500 hover:text-neutral-900" };
+    let n = -1;
+    const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+
+    return (
+        <div className={className} style={{ "--cp-accent": accentColor }}>
+            <button type="button" onClick={() => setOpen(true)} className={`inline-flex w-full max-w-xs items-center gap-2.5 rounded-xl border px-3.5 py-2.5 text-sm transition-colors ${t.trigger}`}>
+                <Search className="h-4 w-4" />
+                <span className="flex-1 text-left">{triggerLabel}</span>
+                <kbd className={`rounded-md border px-1.5 py-0.5 font-mono text-[0.68rem] ${t.kbd}`}>{isMac ? "⌘" : "Ctrl"} {hotkey.toUpperCase()}</kbd>
+            </button>
+            {done && <p className={`mt-3 text-center text-xs ${t.muted}`}>Ran “{done}”</p>}
+
+            {mounted && (
+                <div className={`${contained ? "absolute" : "fixed"} inset-0 z-[300] flex items-start justify-center px-3 pt-[12vh]`} onPointerDown={(e) => e.target === e.currentTarget && close()}>
+                    <div aria-hidden="true" className="absolute inset-0 bg-black/50 backdrop-blur-[2px] transition-opacity duration-200 ease-out" style={{ opacity: shown ? 1 : 0 }} onPointerDown={close} />
+                    <div
+                        role="dialog"
+                        aria-modal="true"
+                        aria-label="Command palette"
+                        className={`relative w-full max-w-lg overflow-hidden rounded-2xl border shadow-[0_30px_80px_-20px_rgba(0,0,0,0.6)] backdrop-blur-xl ${t.panel}`}
+                        style={{ opacity: shown ? 1 : 0, transform: shown ? "none" : "translateY(-10px) scale(0.97)", transition: "opacity 180ms ease-out, transform 260ms cubic-bezier(0.22, 1, 0.36, 1)" }}
+                    >
+                        <div className={`flex items-center gap-3 border-b px-4 ${t.line}`}>
+                            <Search className={`h-4 w-4 shrink-0 ${t.muted}`} />
+                            <input
+                                ref={input}
+                                value={query}
+                                onChange={(e) => setQuery(e.target.value)}
+                                onKeyDown={onKeyDown}
+                                placeholder={placeholder}
+                                role="combobox"
+                                aria-expanded="true"
+                                aria-controls="cp-list"
+                                aria-activedescendant={flat[active] ? `cp-${flat[active].id}` : undefined}
+                                className="h-12 w-full bg-transparent text-[0.95rem] outline-none placeholder:opacity-50"
+                            />
+                            <kbd className={`hidden rounded-md border px-1.5 py-0.5 font-mono text-[0.65rem] sm:block ${t.kbd}`}>ESC</kbd>
+                        </div>
+                        <div ref={listRef} id="cp-list" role="listbox" className="relative max-h-[min(22rem,55vh)] overflow-y-auto overscroll-contain p-2 [scrollbar-width:thin]">
+                            <div ref={bar} aria-hidden="true" className={`pointer-events-none absolute inset-x-2 top-0 rounded-xl ${t.hl}`} style={{ transition: "transform 180ms cubic-bezier(0.22, 1, 0.36, 1), height 180ms ease, opacity 120ms" }}>
+                                <span className="absolute left-0 top-1/2 h-4 w-[3px] -translate-y-1/2 rounded-full bg-[var(--cp-accent)]" />
+                            </div>
+                            {results.length === 0 && <p className={`px-3 py-10 text-center text-sm ${t.muted}`}>No results for “{query}”</p>}
+                            {results.map((g) => (
+                                <div key={g.heading} role="group" aria-label={g.heading}>
+                                    <p className={`px-3 pb-1 pt-2.5 text-[0.68rem] font-semibold uppercase tracking-[0.14em] ${t.muted}`}>{g.heading}</p>
+                                    {g.items.map((it) => {
+                                        n += 1;
+                                        const i = n;
+                                        const Icon = it.icon;
+                                        return (
+                                            <div
+                                                key={it.id}
+                                                id={`cp-${it.id}`}
+                                                ref={(e) => (rows.current[i] = e)}
+                                                role="option"
+                                                aria-selected={i === active}
+                                                onPointerMove={() => i !== active && setActive(i)}
+                                                onClick={() => run(it)}
+                                                className={`relative flex cursor-pointer items-center gap-3 rounded-xl px-3 py-2.5 text-sm ${t.row}`}
+                                            >
+                                                {Icon && <Icon className={`h-4 w-4 shrink-0 transition-colors ${i === active ? "text-[var(--cp-accent)]" : t.muted}`} />}
+                                                <span className="flex-1 truncate">
+                                                    <Highlight text={it.label} hits={it.hits} />
+                                                    {it.hint && <span className={`ml-2 text-xs ${t.muted}`}>{it.hint}</span>}
+                                                </span>
+                                                {it.shortcut && <kbd className={`rounded-md border px-1.5 py-0.5 font-mono text-[0.65rem] ${t.kbd}`}>{isMac ? "⌘" : "Ctrl"} {it.shortcut}</kbd>}
+                                                {i === active && <CornerDownLeft className={`h-3.5 w-3.5 ${t.muted}`} />}
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            ))}
+                        </div>
+                        <div className={`flex items-center gap-4 border-t px-4 py-2.5 text-[0.7rem] ${t.line} ${t.muted}`}>
+                            <span>↑↓ to move</span>
+                            <span>↵ to run</span>
+                            <span className="ml-auto">esc to close</span>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default CommandPalette;

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

@@ -0,0 +1,158 @@
+import React, { useEffect, useRef } from "react";
+import { siExpress, siJavascript, siMongodb, siNextdotjs, siNodedotjs, siReact, siRedux, siTailwindcss, siTypescript, siVite } from "simple-icons";
+
+/*
+ * Crossed Marquee: two tilted bands crossing like an "X" and scrolling in
+ * opposite directions. The front band shows brand tiles and big labels, the
+ * back band a quieter label row. Scrolling the page bursts the bands forward
+ * (or reverses them when you scroll up), then they settle back to a cruise.
+ *
+ * Props: items (strings or { label, icon }), duration = 45 (s per loop),
+ * tilt = 3 (deg), accentColor, bandInk, backColor, tileColor, showBackBand,
+ * reactToScroll, pauseOnHover, className. Colours can be CSS variables.
+ */
+
+const ICONS = { mongodb: siMongodb, expressjs: siExpress, express: siExpress, react: siReact, nodejs: siNodedotjs, javascript: siJavascript, redux: siRedux, tailwindcss: siTailwindcss, tailwind: siTailwindcss, vite: siVite, nextjs: siNextdotjs, typescript: siTypescript };
+const DEFAULT_ITEMS = ["MongoDB", "Express.js", "React", "Node.js", "JavaScript", "Redux", "Tailwind CSS", "Vite"];
+
+const keyOf = (s) => String(s).toLowerCase().replace(/[^a-z0-9]/g, "");
+const wrap = (v) => ((((v + 50) % 50) + 50) % 50) - 50;
+const initials = (s) =>
+    String(s)
+        .split(/[\s.]+/)
+        .filter(Boolean)
+        .slice(0, 2)
+        .map((w) => w[0].toUpperCase())
+        .join("");
+
+const normalise = (it) => (typeof it === "string" ? { label: it, icon: ICONS[keyOf(it)] } : { ...it, icon: it.icon ?? ICONS[keyOf(it.label)] });
+
+const BrandIcon = ({ icon, label }) => {
+    if (icon && typeof icon === "object" && "path" in icon) {
+        return (
+            <svg viewBox="0 0 24 24" className="h-6 w-6 md:h-7 md:w-7" aria-hidden="true">
+                <path d={icon.path} fill={`#${icon.hex}`} />
+            </svg>
+        );
+    }
+    if (icon) return icon;
+    return <span className="text-sm font-black md:text-base">{initials(label)}</span>;
+};
+
+const CrossedMarquee = ({ items = DEFAULT_ITEMS, duration = 45, tilt = 3, accentColor = "#ff5b1f", bandInk = "#14110d", backColor = "#121110", tileColor = "#fffaf2", showBackBand = true, reactToScroll = true, pauseOnHover = false, className = "" }) => {
+    const root = useRef(null);
+    const front = useRef(null);
+    const back = useRef(null);
+    const live = useRef({});
+    live.current = { duration, reactToScroll, pauseOnHover };
+    const list = (items.length ? items : DEFAULT_ITEMS).map(normalise);
+    // Repeat the list so one copy is always wider than the screen.
+    const row = Array.from({ length: Math.max(2, Math.ceil(12 / list.length)) }, () => list).flat();
+
+    useEffect(() => {
+        const el = root.current;
+        const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+        if (reduced) return undefined;
+        const s = { a: 0, b: -25, dir: 1, speed: 1, lastY: window.scrollY, lastT: performance.now(), hover: false };
+        let raf = 0;
+        let last = 0;
+        let visible = true;
+
+        const frame = (now) => {
+            raf = 0;
+            const o = live.current;
+            const dt = last ? Math.min(0.05, (now - last) / 1000) : 1 / 60;
+            last = now;
+            s.speed += (s.dir - s.speed) * 0.05;
+            const k = o.pauseOnHover && s.hover ? 0 : 1;
+            const d = Math.max(1, o.duration);
+            s.a = wrap(s.a - (50 / d) * s.speed * dt * k);
+            s.b = wrap(s.b + (50 / (d * 1.22)) * s.speed * dt * k);
+            if (front.current) front.current.style.transform = `translate3d(${s.a}%, 0, 0)`;
+            if (back.current) back.current.style.transform = `translate3d(${s.b}%, 0, 0)`;
+            if (visible) raf = requestAnimationFrame(frame);
+            else last = 0;
+        };
+        const start = () => {
+            if (!raf && visible) raf = requestAnimationFrame(frame);
+        };
+        const onScroll = () => {
+            if (!live.current.reactToScroll) return;
+            const now = performance.now();
+            const dy = window.scrollY - s.lastY;
+            const dtS = Math.max(0.016, (now - s.lastT) / 1000);
+            s.lastY = window.scrollY;
+            s.lastT = now;
+            if (!dy) return;
+            s.dir = Math.sign(dy);
+            s.speed = s.dir * (1 + Math.min(Math.abs(dy) / dtS / 350, 5));
+        };
+        const onEnter = () => (s.hover = true);
+        const onLeave = () => (s.hover = false);
+        window.addEventListener("scroll", onScroll, { passive: true });
+        el.addEventListener("pointerenter", onEnter);
+        el.addEventListener("pointerleave", onLeave);
+        const io = new IntersectionObserver(([entry]) => {
+            visible = entry.isIntersecting;
+            if (visible) start();
+        });
+        io.observe(el);
+        start();
+        return () => {
+            cancelAnimationFrame(raf);
+            io.disconnect();
+            window.removeEventListener("scroll", onScroll);
+            el.removeEventListener("pointerenter", onEnter);
+            el.removeEventListener("pointerleave", onLeave);
+        };
+    }, []);
+
+    const band = "absolute left-[-5%] right-[-5%] overflow-hidden";
+    return (
+        <div ref={root} aria-label={`Tech stack: ${list.map((i) => i.label).join(", ")}`} className={`relative w-full overflow-hidden pb-24 pt-14 md:pb-32 md:pt-20 ${className}`}>
+            {/* Spacer so the wrapper has the height of the front band. */}
+            <div aria-hidden="true" className="invisible flex items-center py-4 md:py-5">
+                <span className="block h-11 md:h-14" />
+            </div>
+            {showBackBand && (
+                <div aria-hidden="true" className={band} style={{ top: "60%", transform: `translateY(-50%) rotate(${tilt}deg)`, background: backColor, borderBlock: `2px solid ${bandInk}` }}>
+                    <div ref={back} className="flex w-max will-change-transform" style={{ transform: "translate3d(-25%, 0, 0)" }}>
+                        {[0, 1].map((copy) => (
+                            <div key={copy} className="flex shrink-0 items-center py-3 md:py-4">
+                                {row.map((it, i) => (
+                                    <span key={i} className="flex items-center">
+                                        <span className="whitespace-nowrap text-lg font-bold uppercase tracking-tight md:text-2xl" style={{ color: "rgba(255,255,255,.8)" }}>
+                                            {it.label}
+                                        </span>
+                                        <span className="mx-5 block h-2.5 w-2.5 rotate-45 md:mx-8 md:h-3 md:w-3" style={{ background: accentColor }} />
+                                    </span>
+                                ))}
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+            <div aria-hidden="true" className={band} style={{ top: "50%", transform: `translateY(-50%) rotate(${-tilt}deg)`, background: accentColor, borderBlock: `2px solid ${bandInk}`, boxShadow: "0 10px 0 rgb(0 0 0 / .08)" }}>
+                <div ref={front} className="flex w-max will-change-transform">
+                    {[0, 1].map((copy) => (
+                        <div key={copy} className="flex shrink-0 items-center py-4 md:py-5">
+                            {row.map((it, i) => (
+                                <span key={i} className="flex items-center">
+                                    <span className="mr-3 grid h-11 w-11 shrink-0 place-items-center rounded-xl md:mr-4 md:h-14 md:w-14" style={{ background: tileColor, border: `2px solid ${bandInk}`, boxShadow: `4px 4px 0 ${bandInk}`, color: bandInk }}>
+                                        <BrandIcon icon={it.icon} label={it.label} />
+                                    </span>
+                                    <span className="whitespace-nowrap font-extrabold uppercase leading-none tracking-tight" style={{ fontSize: "clamp(1.5rem, 3.4vw, 3rem)", color: bandInk }}>
+                                        {it.label}
+                                    </span>
+                                    <span className="mx-5 block h-2.5 w-2.5 rotate-45 md:mx-8 md:h-3 md:w-3" style={{ background: bandInk }} />
+                                </span>
+                            ))}
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CrossedMarquee;