apex-ui-kit 2.6.0 → 2.8.0

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;

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

@@ -0,0 +1,207 @@
+import React, { useEffect, useRef } from "react";
+import { Color, Mesh, OrthographicCamera, PlaneGeometry, Scene, ShaderMaterial, Vector2, Vector3, WebGLRenderer } from "three";
+
+/*
+ * Dither Waves: slow flowing waves turned into crisp two-tone pixel art with
+ * ordered (Bayer) dithering, drawn in one WebGL shader. The pointer drops
+ * ripples that spread through the pattern. Pick the two colors, the pixel
+ * size and the matrix (4x4 is chunkier, 8x8 smoother).
+ */
+
+const VERT = `void main(){ gl_Position = vec4(position.xy, 0.0, 1.0); }`;
+
+const FRAG = `
+precision highp float;
+uniform vec2 uRes; uniform float uTime; uniform float uPixel; uniform float uScale; uniform float uContrast;
+uniform vec3 uInk; uniform vec3 uPaper; uniform float uMatrix;
+uniform vec3 uRipples[6]; // x, y in pixels, start time
+uniform float uRipple; uniform vec2 uMouse; uniform float uHover;
+
+float bayer2(vec2 a){ a = floor(a); return fract(a.x / 2.0 + a.y * a.y * 0.75); }
+float bayer4(vec2 a){ return bayer2(0.5 * a) * 0.25 + bayer2(a); }
+float bayer8(vec2 a){ return bayer4(0.5 * a) * 0.25 + bayer2(a); }
+
+float h2(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
+float n2(vec2 p){
+  vec2 i = floor(p); vec2 f = fract(p); vec2 u = f * f * (3.0 - 2.0 * f);
+  return mix(mix(h2(i), h2(i + vec2(1, 0)), u.x), mix(h2(i + vec2(0, 1)), h2(i + vec2(1, 1)), u.x), u.y);
+}
+float fbm(vec2 p){ float v = 0.0; float a = 0.5; for (int i = 0; i < 5; i++) { v += a * n2(p); p = p * 2.03 + 11.7; a *= 0.5; } return v; }
+
+void main(){
+  // Snap to the pixel grid first so the whole field reads as chunky pixels.
+  vec2 cell = floor(gl_FragCoord.xy / uPixel);
+  vec2 px = (cell + 0.5) * uPixel;
+  vec2 p = px / uRes.y * uScale;
+  float t = uTime;
+
+  // Domain-warped waves drifting diagonally.
+  vec2 w = vec2(fbm(p * 0.9 + vec2(t * 0.06, -t * 0.04)), fbm(p * 0.9 + vec2(-t * 0.05, t * 0.07) + 5.2));
+  float v = fbm(p + w * 1.6 + vec2(t * 0.03, 0.0));
+  v += 0.18 * sin(p.x * 1.3 + p.y * 0.7 - t * 0.6 + w.x * 4.0);
+
+  // Ripples from the pointer.
+  float rip = 0.0;
+  for (int i = 0; i < 6; i++) {
+    vec3 r = uRipples[i];
+    float age = t - r.z;
+    if (r.z > 0.0 && age < 3.5) {
+      float dist = length(px - r.xy) / uRes.y;
+      float front = age * 0.45;
+      rip += sin((dist - front) * 38.0) * exp(-abs(dist - front) * 14.0) * exp(-age * 0.9);
+    }
+  }
+  v += rip * 0.22 * uRipple;
+  // A soft glow under the pointer.
+  v += uHover * 0.18 * exp(-length(px - uMouse) / uRes.y * 7.0);
+
+  v = clamp((v - 0.5) * uContrast + 0.5, 0.0, 1.0);
+  float threshold = uMatrix > 6.0 ? bayer8(cell) : bayer4(cell);
+  float on = step(threshold, v);
+  gl_FragColor = vec4(mix(uPaper, uInk, on), 1.0);
+}`;
+
+const DitherWaves = ({ ink = "#c8f560", paper = "#0b0d0a", pixelSize = 3, matrix = 8, scale = 2.4, contrast = 1.35, speed = 1, ripple = 1, interactive = true, className = "", children }) => {
+    const wrap = useRef(null);
+    const live = useRef({});
+    live.current = { ink, paper, pixelSize, matrix, scale, contrast, speed, ripple, interactive };
+
+    useEffect(() => {
+        const el = wrap.current;
+        const renderer = new WebGLRenderer({ antialias: false, alpha: false, powerPreference: "high-performance" });
+        const dpr = Math.min(window.devicePixelRatio || 1, 2);
+        renderer.setPixelRatio(dpr);
+        Object.assign(renderer.domElement.style, { position: "absolute", inset: "0", width: "100%", height: "100%", display: "block", imageRendering: "pixelated" });
+        el.prepend(renderer.domElement);
+        const scene = new Scene();
+        const camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
+        const u = {
+            uRes: { value: new Vector2(1, 1) },
+            uTime: { value: 0 },
+            uPixel: { value: 3 },
+            uScale: { value: 2.4 },
+            uContrast: { value: 1.35 },
+            uInk: { value: new Color() },
+            uPaper: { value: new Color() },
+            uMatrix: { value: 8 },
+            uRipples: { value: Array.from({ length: 6 }, () => new Vector3()) },
+            uRipple: { value: 1 },
+            uMouse: { value: new Vector2(-9999, -9999) },
+            uHover: { value: 0 },
+        };
+        const material = new ShaderMaterial({ vertexShader: VERT, fragmentShader: FRAG, uniforms: u, depthTest: false, depthWrite: false });
+        const geometry = new PlaneGeometry(2, 2);
+        scene.add(new Mesh(geometry, material));
+
+        const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+        const mouse = { x: -9999, y: -9999, hover: 0, in: false, lastDrop: 0, lx: 0, ly: 0 };
+        let slot = 0;
+        let raf = 0;
+        let last = 0;
+        let time = 1;
+        let visible = true;
+        let h = 1;
+
+        const fit = () => {
+            const { width, height } = el.getBoundingClientRect();
+            if (!width || !height) return;
+            h = height;
+            renderer.setSize(width, height, false);
+            u.uRes.value.set(width * dpr, height * dpr);
+            if (!raf) draw(performance.now());
+        };
+        const drop = (x, y) => {
+            const r = u.uRipples.value[slot];
+            r.set(x * dpr, (h - y) * dpr, time);
+            slot = (slot + 1) % 6;
+        };
+        const draw = (now) => {
+            const o = live.current;
+            const dt = last ? Math.min(0.05, (now - last) / 1000) : 1 / 60;
+            last = now;
+            time += dt * o.speed;
+            mouse.hover += ((o.interactive && mouse.in ? 1 : 0) - mouse.hover) * (1 - Math.exp(-dt / 0.25));
+            u.uTime.value = time;
+            u.uPixel.value = Math.max(1, o.pixelSize) * dpr;
+            u.uScale.value = o.scale;
+            u.uContrast.value = o.contrast;
+            // The shader writes these straight to the screen, so keep them in sRGB.
+            u.uInk.value.set(o.ink).convertLinearToSRGB();
+            u.uPaper.value.set(o.paper).convertLinearToSRGB();
+            u.uMatrix.value = o.matrix;
+            u.uRipple.value = o.interactive ? o.ripple : 0;
+            u.uMouse.value.set(mouse.x * dpr, (h - mouse.y) * dpr);
+            u.uHover.value = mouse.hover;
+            renderer.render(scene, camera);
+        };
+        const loop = (now) => {
+            raf = 0;
+            draw(now);
+            if (visible && !reduced) raf = requestAnimationFrame(loop);
+        };
+        const start = () => {
+            if (!raf && visible && !reduced) {
+                last = 0;
+                raf = requestAnimationFrame(loop);
+            }
+        };
+
+        const local = (e) => {
+            const r = el.getBoundingClientRect();
+            return [e.clientX - r.left, e.clientY - r.top];
+        };
+        const onMove = (e) => {
+            [mouse.x, mouse.y] = local(e);
+            mouse.in = true;
+            // Moving drops a ripple every so often, spaced by distance.
+            if (live.current.interactive && Math.hypot(mouse.x - mouse.lx, mouse.y - mouse.ly) > 90 && time - mouse.lastDrop > 0.25) {
+                drop(mouse.x, mouse.y);
+                mouse.lastDrop = time;
+                mouse.lx = mouse.x;
+                mouse.ly = mouse.y;
+            }
+        };
+        const onDown = (e) => {
+            if (!live.current.interactive) return;
+            const [x, y] = local(e);
+            drop(x, y);
+        };
+        const onLeave = () => {
+            mouse.in = false;
+        };
+        el.addEventListener("pointermove", onMove);
+        el.addEventListener("pointerdown", onDown);
+        el.addEventListener("pointerleave", onLeave);
+        const ro = new ResizeObserver(fit);
+        ro.observe(el);
+        const io = new IntersectionObserver(([entry]) => {
+            visible = entry.isIntersecting;
+            if (visible) start();
+        });
+        io.observe(el);
+        fit();
+        start();
+
+        return () => {
+            cancelAnimationFrame(raf);
+            ro.disconnect();
+            io.disconnect();
+            el.removeEventListener("pointermove", onMove);
+            el.removeEventListener("pointerdown", onDown);
+            el.removeEventListener("pointerleave", onLeave);
+            geometry.dispose();
+            material.dispose();
+            renderer.dispose();
+            renderer.forceContextLoss();
+            renderer.domElement.remove();
+        };
+    }, []);
+
+    return (
+        <div ref={wrap} className={`relative h-full w-full overflow-hidden ${className}`} style={{ background: paper }}>
+            {children && <div className="relative z-10 h-full w-full">{children}</div>}
+        </div>
+    );
+};
+
+export default DitherWaves;

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

@@ -0,0 +1,92 @@
+import React, { useEffect, useMemo, useRef } from "react";
+
+/*
+ * Edge Blur: a soft, progressive blur along one edge of a scrolling area,
+ * the way content melts under an app's top bar or fades out at the end of a
+ * list. It stacks a few backdrop-blur layers; each one doubles the blur of
+ * the last and is masked to an overlapping band, so the blur grows smoothly
+ * toward the edge instead of in steps. Optionally fades into a tint, and can
+ * hide itself when the scroll reaches that edge.
+ */
+
+const DIR = { top: "to top", bottom: "to bottom", left: "to left", right: "to right" };
+const len = (v) => (typeof v === "number" ? `${v}px` : v);
+
+// The nearest thing that scrolls along this axis: a sibling, or the parent.
+function findScroller(el, vertical) {
+    const scrolls = (node) => {
+        const s = getComputedStyle(node);
+        return /(auto|scroll)/.test(vertical ? s.overflowY : s.overflowX);
+    };
+    const parent = el.parentElement;
+    if (!parent) return null;
+    return [...parent.children].find((c) => c !== el && scrolls(c)) || (scrolls(parent) ? parent : null);
+}
+
+const EdgeBlur = ({ edge = "bottom", size = "6rem", blur = 16, steps = 6, tint = "transparent", hideAtEnd = false, scroller, fixed = false, zIndex = 10, className = "" }) => {
+    const ref = useRef(null);
+    const side = DIR[edge] ? edge : "bottom";
+    const vertical = side === "top" || side === "bottom";
+    const count = Math.max(2, Math.min(10, Math.round(steps)));
+
+    // Layer i covers the band [i, i + 2] / count and blurs blur / 2^(count - 1 - i).
+    const layers = useMemo(
+        () =>
+            Array.from({ length: count }, (_, i) => {
+                const a = (i / count) * 100;
+                const b = ((i + 1) / count) * 100;
+                const c = ((i + 2) / count) * 100;
+                const amount = blur / Math.pow(2, count - 1 - i);
+                const last = i === count - 1;
+                const mask = `linear-gradient(${DIR[side]}, transparent ${a.toFixed(1)}%, #000 ${b.toFixed(1)}%${last ? "" : `, #000 ${Math.min(100, c).toFixed(1)}%, transparent ${Math.min(100, c + 100 / count).toFixed(1)}%`})`;
+                return { filter: `blur(${amount.toFixed(2)}px)`, mask };
+            }),
+        [count, blur, side],
+    );
+
+    useEffect(() => {
+        const el = ref.current;
+        if (!hideAtEnd || !el) {
+            if (el) el.style.opacity = "";
+            return undefined;
+        }
+        const target = scroller?.current ?? scroller ?? findScroller(el, vertical);
+        if (!target) return undefined;
+        const start = side === "top" || side === "left";
+        const update = () => {
+            const pos = vertical ? target.scrollTop : target.scrollLeft;
+            const max = vertical ? target.scrollHeight - target.clientHeight : target.scrollWidth - target.clientWidth;
+            const room = start ? pos : max - pos;
+            const reach = Math.max(1, vertical ? el.offsetHeight : el.offsetWidth);
+            el.style.opacity = String(Math.max(0, Math.min(1, room / reach)));
+        };
+        update();
+        target.addEventListener("scroll", update, { passive: true });
+        const ro = new ResizeObserver(update);
+        ro.observe(target);
+        return () => {
+            target.removeEventListener("scroll", update);
+            ro.disconnect();
+        };
+    }, [hideAtEnd, scroller, side, vertical]);
+
+    const box = {
+        position: fixed ? "fixed" : "absolute",
+        zIndex,
+        pointerEvents: "none",
+        transition: "opacity 0.25s ease-out",
+        [side]: 0,
+        ...(vertical ? { left: 0, right: 0, height: len(size) } : { top: 0, bottom: 0, width: len(size) }),
+    };
+
+    return (
+        <div ref={ref} aria-hidden="true" className={className} style={box}>
+            {layers.map((l, i) => (
+                <div key={i} className="absolute inset-0" style={{ backdropFilter: l.filter, WebkitBackdropFilter: l.filter, maskImage: l.mask, WebkitMaskImage: l.mask }} />
+            ))}
+            {tint !== "transparent" && <div className="absolute inset-0" style={{ background: `linear-gradient(${DIR[side]}, transparent, ${tint})` }} />}
+        </div>
+    );
+};
+
+export default EdgeBlur;

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

@@ -91,7 +91,10 @@ const FlipClock = ({ mode = "seconds", target, seconds = 3 * 86400 + 4 * 3600 +
     const ink = dark ? "#fafafa" : "#18181b";
 
     return (
-        <div role="timer" aria-live="off" aria-label={parts.map(([l, v]) => `${v} ${l}`).join(", ")} className={`inline-flex items-start gap-[0.35em] font-mono font-bold ${className}`} style={{ fontSize: `${size}rem` }}>
+        // The clock is sized in em; on narrow screens the font shrinks with the
+        // container (cqw) so every unit fits instead of being cut off.
+        <div className="flex w-full justify-center" style={{ containerType: "inline-size" }}>
+        <div role="timer" aria-live="off" aria-label={parts.map(([l, v]) => `${v} ${l}`).join(", ")} className={`inline-flex items-start gap-[0.35em] font-mono font-bold ${className}`} style={{ fontSize: `min(${size}rem, ${(100 / (parts.length * 2.55)).toFixed(2)}cqw)` }}>
             {parts.map(([label, value], i) => (
                 <React.Fragment key={label}>
                     {i > 0 && (
@@ -115,6 +118,7 @@ const FlipClock = ({ mode = "seconds", target, seconds = 3 * 86400 + 4 * 3600 +
                 </React.Fragment>
             ))}
         </div>
+        </div>
     );
 };