apex-ui-kit 2.7.0 → 2.8.0

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

@@ -0,0 +1,274 @@
+import React, { useEffect, useRef } from "react";
+import { Color, Mesh, OrthographicCamera, PlaneGeometry, Scene, ShaderMaterial, SRGBColorSpace, TextureLoader, Vector2, WebGLRenderer } from "three";
+
+/*
+ * Glass Lens: a drop of liquid glass that glides over an image, drawn in
+ * WebGL. It magnifies the middle, bends the picture hard at its rim, splits
+ * the colors a little at the edge, catches a specular highlight and casts a
+ * soft shadow. It follows the pointer on a spring and stretches along the
+ * way it moves, then rounds out again when it stops. When the pointer
+ * leaves it drifts on its own. Drag it on touch screens.
+ */
+
+const DEFAULT_IMAGE = "https://ik.imagekit.io/ny6yinyut/apexui/assets/componentsimage/galaxy-3d.png?tr=f-auto,q-85,w-1600";
+
+const VERT = `void main(){ gl_Position = vec4(position.xy, 0.0, 1.0); }`;
+
+const FRAG = `
+precision highp float;
+uniform sampler2D uTex; uniform vec2 uRes; uniform vec2 uCover; uniform float uReady;
+uniform vec2 uLens; uniform float uRadius; uniform vec2 uStretch; uniform float uAngle;
+uniform float uRefract; uniform float uDisperse; uniform float uFrost; uniform vec3 uTint; uniform float uTintAmt;
+
+vec3 img(vec2 uv){ return texture2D(uTex, (uv - 0.5) * uCover + 0.5).rgb; }
+
+void main(){
+  vec2 px = gl_FragCoord.xy;
+  vec2 uv = px / uRes;
+  vec3 base = img(uv);
+
+  // Lens space: rotate into the direction of travel and squash by the stretch.
+  vec2 rel = px - uLens;
+  float c = cos(uAngle); float s = sin(uAngle);
+  vec2 q = vec2(c * rel.x + s * rel.y, -s * rel.x + c * rel.y) / (uRadius * uStretch);
+  float d = length(q);
+
+  // Soft drop shadow just outside the rim.
+  float shadow = smoothstep(1.45, 0.95, d) * (1.0 - smoothstep(0.98, 1.0, d));
+  vec3 col = base * (1.0 - 0.28 * shadow);
+
+  if (d < 1.0) {
+    float h = sqrt(1.0 - d * d);           // dome height
+    vec2 dir = rel / max(length(rel), 1e-3);
+    // Like a convex lens: the middle is magnified, the rim squeezes in the
+    // picture from further out.
+    float rimK = (1.0 - h) * (1.0 - h);
+    float scaleK = mix(1.0, 0.7, uRefract) + rimK * 1.15 * uRefract;
+    vec2 baseUv = (uLens + rel * scaleK) / uRes;
+    float disp = uDisperse * rimK * 0.006;
+    vec3 g;
+    if (uFrost > 0.0) {
+      vec3 acc = vec3(0.0);
+      float k = uFrost * 0.012;
+      for (int i = 0; i < 8; i++) {
+        float a = float(i) * 0.785398;
+        vec2 o = vec2(cos(a), sin(a)) * k * (0.5 + 0.5 * fract(float(i) * 0.618));
+        acc += vec3(img(baseUv + o + dir * disp).r, img(baseUv + o).g, img(baseUv + o - dir * disp).b);
+      }
+      g = acc / 8.0;
+    } else {
+      g = vec3(img(baseUv + dir * disp).r, img(baseUv).g, img(baseUv - dir * disp).b);
+    }
+    g = mix(g, g * uTint + uTint * 0.08, uTintAmt);
+    // Light from the top left: a tight highlight and a broad sheen.
+    vec3 n = normalize(vec3(q, h * 1.4));
+    vec3 l = normalize(vec3(-0.45, 0.6, 0.65));
+    float spec = pow(max(dot(reflect(-l, n), vec3(0.0, 0.0, 1.0)), 0.0), 48.0);
+    float sheen = pow(max(dot(n, l), 0.0), 3.0) * 0.12;
+    float rim = smoothstep(0.86, 0.995, d);
+    float inner = smoothstep(0.995, 0.9, d) * smoothstep(0.75, 0.97, d);
+    g += vec3(1.0) * (spec * 0.9 + sheen) + vec3(1.0) * rim * 0.22 * (0.6 + 0.4 * q.y) - inner * 0.06;
+    float edge = smoothstep(1.0, 0.985, d);
+    col = mix(col, g, edge);
+  }
+  col = mix(vec3(0.07), col, uReady);
+  gl_FragColor = vec4(col, 1.0);
+}`;
+
+const GlassLens = ({ image = DEFAULT_IMAGE, size = 9, refraction = 0.7, dispersion = 1, frost = 0, tint = "#ffffff", tintAmount = 0, stretch = 1, idle = true, height = "28rem", className = "", children }) => {
+    const wrap = useRef(null);
+    const live = useRef({});
+    live.current = { size, refraction, dispersion, frost, tint, tintAmount, stretch, idle };
+
+    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);
+        renderer.outputColorSpace = SRGBColorSpace;
+        Object.assign(renderer.domElement.style, { position: "absolute", inset: "0", width: "100%", height: "100%", display: "block", touchAction: "none" });
+        el.prepend(renderer.domElement);
+        const scene = new Scene();
+        const camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
+        const u = {
+            uTex: { value: null },
+            uRes: { value: new Vector2(1, 1) },
+            uCover: { value: new Vector2(1, 1) },
+            uReady: { value: 0 },
+            uLens: { value: new Vector2() },
+            uRadius: { value: 100 },
+            uStretch: { value: new Vector2(1, 1) },
+            uAngle: { value: 0 },
+            uRefract: { value: 0.7 },
+            uDisperse: { value: 1 },
+            uFrost: { value: 0 },
+            uTint: { value: new Color(1, 1, 1) },
+            uTintAmt: { 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 view = { w: 1, h: 1, aspect: 1, imgAspect: 1 };
+        // Lens state in CSS pixels, y measured from the bottom like gl_FragCoord.
+        const lens = { x: 0, y: 0, vx: 0, vy: 0, tx: 0, ty: 0, sx: 1, sy: 1, angle: 0, placed: false };
+        const pointer = { inside: false, dragging: false, lastMove: 0 };
+        let raf = 0;
+        let last = 0;
+        let time = 0;
+        let visible = true;
+        let readyAt = 0;
+
+        const cover = () => {
+            const a = view.aspect;
+            const ia = view.imgAspect;
+            u.uCover.value.set(ia > a ? a / ia : 1, ia > a ? 1 : ia / a);
+        };
+        new TextureLoader().setCrossOrigin("anonymous").load(image, (t) => {
+            t.colorSpace = SRGBColorSpace;
+            u.uTex.value = t;
+            view.imgAspect = t.image.width / t.image.height;
+            cover();
+            readyAt = performance.now();
+            start();
+        });
+
+        const fit = () => {
+            const { width, height: hh } = el.getBoundingClientRect();
+            if (!width || !hh) return;
+            view.w = width;
+            view.h = hh;
+            view.aspect = width / hh;
+            renderer.setSize(width, hh, false);
+            u.uRes.value.set(width * dpr, hh * dpr);
+            cover();
+            if (!lens.placed) {
+                lens.x = lens.tx = width * 0.5;
+                lens.y = lens.ty = hh * 0.5;
+                lens.placed = true;
+            }
+            start();
+        };
+
+        const frame = (now) => {
+            raf = 0;
+            const o = live.current;
+            const dt = last ? Math.min(0.05, (now - last) / 1000) : 1 / 60;
+            last = now;
+            time += dt;
+            // Idle drift when nobody is steering it.
+            if (o.idle && !pointer.inside && !pointer.dragging && !reduced && now - pointer.lastMove > 900) {
+                lens.tx = view.w * (0.5 + 0.28 * Math.sin(time * 0.45));
+                lens.ty = view.h * (0.5 + 0.22 * Math.sin(time * 0.7 + 1.2));
+            }
+            // Spring toward the target (slightly underdamped for a liquid feel).
+            const k = reduced ? 400 : 140;
+            const c = 2 * Math.sqrt(k) * 0.82;
+            lens.vx += (k * (lens.tx - lens.x) - c * lens.vx) * dt;
+            lens.vy += (k * (lens.ty - lens.y) - c * lens.vy) * dt;
+            lens.x += lens.vx * dt;
+            lens.y += lens.vy * dt;
+            const speed = Math.hypot(lens.vx, lens.vy);
+            const goal = 1 + Math.min(0.32, speed / 2600) * o.stretch;
+            lens.sx += (goal - lens.sx) * (1 - Math.exp(-dt / 0.08));
+            lens.sy = 1 / Math.sqrt(lens.sx);
+            if (speed > 30) {
+                const want = Math.atan2(lens.vy, lens.vx);
+                let delta = want - lens.angle;
+                delta = Math.atan2(Math.sin(delta), Math.cos(delta));
+                lens.angle += delta * (1 - Math.exp(-dt / 0.06));
+            }
+
+            // size is in rem; never more than ~40% of the short side.
+            const r = Math.min(Math.min(view.w, view.h) * 0.4, o.size * 16);
+            u.uRadius.value = r * dpr;
+            u.uLens.value.set(lens.x * dpr, (view.h - lens.y) * dpr);
+            u.uStretch.value.set(lens.sx, lens.sy);
+            u.uAngle.value = -lens.angle;
+            u.uRefract.value = o.refraction;
+            u.uDisperse.value = o.dispersion;
+            u.uFrost.value = o.frost;
+            u.uTint.value.set(o.tint);
+            u.uTintAmt.value = o.tintAmount;
+            u.uReady.value = readyAt ? Math.min(1, (now - readyAt) / 500) : 0;
+            renderer.render(scene, camera);
+
+            const moving = speed > 0.5 || Math.abs(lens.tx - lens.x) > 0.3 || Math.abs(lens.ty - lens.y) > 0.3 || Math.abs(lens.sx - 1) > 0.002;
+            const idling = o.idle && !pointer.inside && !reduced;
+            if (visible && (moving || idling || u.uReady.value < 1)) raf = requestAnimationFrame(frame);
+            else last = 0;
+        };
+        function start() {
+            if (!raf && visible) raf = requestAnimationFrame(frame);
+        }
+
+        const local = (e) => {
+            const r = el.getBoundingClientRect();
+            return [e.clientX - r.left, e.clientY - r.top];
+        };
+        const onMove = (e) => {
+            if (e.pointerType === "touch" && !pointer.dragging) return;
+            [lens.tx, lens.ty] = local(e);
+            pointer.inside = true;
+            pointer.lastMove = performance.now();
+            start();
+        };
+        const onDown = (e) => {
+            if (e.pointerType !== "touch") return;
+            e.preventDefault();
+            pointer.dragging = true;
+            el.setPointerCapture(e.pointerId);
+            [lens.tx, lens.ty] = local(e);
+            start();
+        };
+        const onUp = () => {
+            pointer.dragging = false;
+            pointer.lastMove = performance.now();
+        };
+        const onLeave = (e) => {
+            if (e.pointerType === "touch") return;
+            pointer.inside = false;
+            pointer.lastMove = performance.now();
+            start();
+        };
+        el.addEventListener("pointermove", onMove);
+        el.addEventListener("pointerdown", onDown);
+        el.addEventListener("pointerup", onUp);
+        el.addEventListener("pointercancel", onUp);
+        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();
+
+        return () => {
+            cancelAnimationFrame(raf);
+            ro.disconnect();
+            io.disconnect();
+            el.removeEventListener("pointermove", onMove);
+            el.removeEventListener("pointerdown", onDown);
+            el.removeEventListener("pointerup", onUp);
+            el.removeEventListener("pointercancel", onUp);
+            el.removeEventListener("pointerleave", onLeave);
+            u.uTex.value?.dispose();
+            geometry.dispose();
+            material.dispose();
+            renderer.dispose();
+            renderer.forceContextLoss();
+            renderer.domElement.remove();
+        };
+    }, [image]);
+
+    return (
+        <div ref={wrap} className={`relative w-full cursor-none select-none overflow-hidden bg-[#111] ${className}`} style={{ height }}>
+            {children && <div className="pointer-events-none relative z-10 h-full w-full">{children}</div>}
+        </div>
+    );
+};
+
+export default GlassLens;

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

@@ -299,7 +299,7 @@ const GooeyNav = ({ items = DEFAULT_ITEMS, initialActive = 0, onChange, accentCo
                         href={item.href}
                         onClick={(e) => select(i, e)}
                         aria-current={i === active ? "page" : undefined}
-                        className={`relative z-[1] shrink-0 rounded-full px-2.5 py-2 text-[0.82rem] font-medium sm:py-2.5 sm:text-[0.95rem] outline-none transition-colors duration-300 focus-visible:ring-2 focus-visible:ring-current/30 sm:px-5 ${i === active ? "text-neutral-950" : dark ? "text-white/65 hover:text-white" : "text-neutral-500 hover:text-neutral-900"}`}
+                        className={`relative z-[1] shrink-0 rounded-full px-2.5 py-2 text-[0.82rem] font-medium max-[380px]:px-2 max-[380px]:text-[0.76rem] sm:py-2.5 sm:text-[0.95rem] outline-none transition-colors duration-300 focus-visible:ring-2 focus-visible:ring-current/30 sm:px-5 ${i === active ? "text-neutral-950" : dark ? "text-white/65 hover:text-white" : "text-neutral-500 hover:text-neutral-900"}`}
                     >
                         {item.label}
                     </a>

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

@@ -0,0 +1,116 @@
+import React, { useEffect, useRef, useState } from "react";
+
+/*
+ * Image Accordion: a row of image panels where the active one opens wide and
+ * the rest fold into slim strips with their titles turned sideways. Hover,
+ * focus or tap a panel to open it; it can also cycle on its own. Below
+ * 520px of width it stacks vertically and the panels grow in height instead,
+ * so it fits phones. The panels animate flex-grow with one easing curve, so
+ * the open and close always move together.
+ */
+
+const IK = "https://ik.imagekit.io/ny6yinyut/apexui/assets/componentsimage";
+const DEFAULT_ITEMS = [
+    { image: `${IK}/galaxy-3d.png?tr=f-auto,q-80,w-1100`, title: "Galaxy 3D", description: "A turning spiral galaxy for hero sections." },
+    { image: `${IK}/sunrise-background.png?tr=f-auto,q-80,w-1100`, title: "Sunrise", description: "A sun rising between two mountain ranges." },
+    { image: `${IK}/liquid-blob-3d.png?tr=f-auto,q-80,w-1100`, title: "Liquid Blob", description: "A glossy blob that ripples toward the pointer." },
+    { image: `${IK}/warp-tunnel.png?tr=f-auto,q-80,w-1100`, title: "Warp Tunnel", description: "Hold to boost into hyperspace." },
+    { image: `${IK}/horizon-glow-v2.png?tr=f-auto,q-80,w-1100`, title: "Horizon Glow", description: "Soft light rising from below the edge." },
+];
+
+const EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
+
+const ImageAccordion = ({ items = DEFAULT_ITEMS, defaultActive = 0, autoPlay = 0, openRatio = 4, radius = 1.25, gap = 0.6, duration = 700, height = "26rem", onChange, className = "" }) => {
+    const list = items.length ? items : DEFAULT_ITEMS;
+    const [active, setActive] = useState(Math.min(defaultActive, list.length - 1));
+    const [vertical, setVertical] = useState(false);
+    const root = useRef(null);
+    const hovering = useRef(false);
+
+    const open = (i) => {
+        setActive((cur) => {
+            if (cur !== i) onChange?.(i);
+            return i;
+        });
+    };
+
+    // Stack vertically when the box is narrow (a container check, not the viewport).
+    useEffect(() => {
+        const el = root.current;
+        const ro = new ResizeObserver(([entry]) => setVertical(entry.contentRect.width < 520));
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
+
+    useEffect(() => {
+        if (!autoPlay) return undefined;
+        const id = setInterval(() => {
+            if (!hovering.current) setActive((cur) => (cur + 1) % list.length);
+        }, autoPlay * 1000);
+        return () => clearInterval(id);
+    }, [autoPlay, list.length]);
+
+    return (
+        <div
+            ref={root}
+            role="tablist"
+            aria-orientation={vertical ? "vertical" : "horizontal"}
+            onPointerEnter={() => (hovering.current = true)}
+            onPointerLeave={() => (hovering.current = false)}
+            className={`flex w-full ${vertical ? "flex-col" : "flex-row"} ${className}`}
+            style={{ height: vertical ? `max(${height}, ${list.length * 3.4 + openRatio * 3}rem)` : height, gap: `${gap}rem` }}
+        >
+            {list.map((item, i) => {
+                const on = i === active;
+                return (
+                    <button
+                        key={i}
+                        type="button"
+                        role="tab"
+                        aria-selected={on}
+                        aria-label={item.title}
+                        onPointerEnter={(e) => e.pointerType === "mouse" && open(i)}
+                        onFocus={() => open(i)}
+                        onClick={() => open(i)}
+                        className="group relative min-h-0 min-w-0 overflow-hidden text-left text-white outline-none focus-visible:ring-2 focus-visible:ring-white/70"
+                        style={{ flexGrow: on ? openRatio : 1, flexBasis: 0, borderRadius: `${radius}rem`, transition: `flex-grow ${duration}ms ${EASE}` }}
+                    >
+                        <img
+                            src={item.image}
+                            alt=""
+                            draggable={false}
+                            className="absolute inset-0 h-full w-full object-cover"
+                            style={{ transform: on ? "scale(1)" : "scale(1.12)", filter: on ? "none" : "saturate(0.6) brightness(0.75)", transition: `transform ${duration * 1.4}ms ${EASE}, filter ${duration}ms ${EASE}` }}
+                        />
+                        <span aria-hidden="true" className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
+
+                        {/* Folded: the title runs along the strip. */}
+                        <span
+                            aria-hidden="true"
+                            className="absolute whitespace-nowrap text-sm font-semibold tracking-wide"
+                            style={{
+                                ...(vertical ? { left: "1rem", top: "50%", transform: "translateY(-50%)" } : { left: "50%", bottom: "1.25rem", transform: "translateX(-50%) rotate(-90deg)", transformOrigin: "center", translate: "0 -2.5rem" }),
+                                opacity: on ? 0 : 0.9,
+                                transition: `opacity ${duration * 0.5}ms ease`,
+                            }}
+                        >
+                            {item.title}
+                        </span>
+
+                        {/* Open: title and text rise in once the panel has room. */}
+                        <span
+                            className="absolute inset-x-0 bottom-0 block p-[clamp(1rem,3cqw,1.75rem)]"
+                            style={{ opacity: on ? 1 : 0, transform: on ? "none" : "translateY(0.75rem)", transition: `opacity ${duration * 0.6}ms ${EASE} ${on ? duration * 0.35 : 0}ms, transform ${duration * 0.8}ms ${EASE} ${on ? duration * 0.3 : 0}ms` }}
+                        >
+                            <span className="block font-mono text-[0.7rem] tracking-[0.2em] text-white/60">{String(i + 1).padStart(2, "0")}</span>
+                            <span className="mt-1 block text-[clamp(1.2rem,2.4vw,1.9rem)] font-bold leading-tight">{item.title}</span>
+                            {item.description && <span className="mt-1 block max-w-sm text-sm text-white/75">{item.description}</span>}
+                        </span>
+                    </button>
+                );
+            })}
+        </div>
+    );
+};
+
+export default ImageAccordion;