apex-ui-kit 2.6.0 → 2.8.0

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

@@ -289,7 +289,7 @@ const GooeyNav = ({ items = DEFAULT_ITEMS, initialActive = 0, onChange, accentCo
 
     return (
         <nav className={`relative inline-flex max-w-full ${className}`} aria-label="Main">
-            <div ref={bar} className={`relative flex items-center gap-0.5 rounded-full p-1.5 ${dark ? "bg-neutral-950 ring-1 ring-white/10" : "bg-white shadow-sm ring-1 ring-black/10"}`}>
+            <div ref={bar} className={`relative flex items-center gap-0 rounded-full p-1 sm:gap-0.5 sm:p-1.5 ${dark ? "bg-neutral-950 ring-1 ring-white/10" : "bg-white shadow-sm ring-1 ring-black/10"}`}>
                 <canvas ref={canvas} aria-hidden="true" className="pointer-events-none absolute" style={{ left: -PAD, top: -PAD, display: fallback ? "none" : "block" }} />
                 {fallback && <span ref={fallbackPill} aria-hidden="true" className="pointer-events-none absolute rounded-full" style={{ background: accentColor }} />}
                 {items.map((item, i) => (
@@ -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-3.5 py-2.5 text-[0.95rem] font-medium 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/HorizonGlow/HorizonGlow.jsx

@@ -0,0 +1,259 @@
+import React, { useEffect, useRef } from "react";
+import { Color, Mesh, OrthographicCamera, PlaneGeometry, Scene, ShaderMaterial, Vector2, WebGLRenderer } from "three";
+
+/*
+ * Horizon Glow: a soft, wide light rising from below the bottom edge, fading
+ * from a pale core through an accent band and a mid tone into a deep sky,
+ * drawn in one WebGL shader. A thin luminous arc marks the horizon, faint
+ * volumetric rays climb out of it and specks of dust drift up through the
+ * light. It rises in on mount, breathes slowly and leans toward the pointer;
+ * a filmic tone curve and dithering keep the long gradient silky.
+ */
+
+const PRESETS = {
+    lilac: { sky: "#0d1438", mid: "#6f4c86", accent: "#ff9fd2", core: "#fff1f8" },
+    ocean: { sky: "#020f1c", mid: "#195a78", accent: "#58e1ff", core: "#e9fbff" },
+    ember: { sky: "#100606", mid: "#7a2f1e", accent: "#ff9b54", core: "#fff0dc" },
+    mint: { sky: "#04131a", mid: "#22625a", accent: "#6dffc4", core: "#ecfff6" },
+    mono: { sky: "#08080a", mid: "#45454d", accent: "#c9c9d6", core: "#ffffff" },
+};
+
+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 uRise; uniform vec2 uMouse;
+uniform vec3 uSky; uniform vec3 uMid; uniform vec3 uAccent; uniform vec3 uCore;
+uniform float uSpread; uniform float uIntensity; uniform float uShimmer; uniform float uBreath; uniform float uGrain;
+uniform float uArc; uniform float uRays; uniform float uDust;
+
+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 < 4; i++) { v += a * n2(p); p *= 2.02; a *= 0.5; } return v; }
+
+// Drifting dust: one speck per cell, rising slowly and twinkling.
+float dust(vec2 p, float scale, float speed, float seed){
+  vec2 q = p * scale + vec2(seed, -uTime * speed);
+  vec2 id = floor(q); vec2 f = fract(q) - 0.5;
+  vec2 o = vec2(h2(id + seed), h2(id + seed + 3.1)) - 0.5;
+  float r = length(f - o * 0.7);
+  float tw = 0.5 + 0.5 * sin(uTime * (1.5 + h2(id) * 2.5) + h2(id + 9.0) * 6.28);
+  return smoothstep(0.06, 0.0, r) * step(0.55, h2(id + seed + 7.7)) * tw;
+}
+
+void main(){
+  vec2 uv = gl_FragCoord.xy / uRes;
+  float asp = uRes.x / uRes.y;
+  // Work in height units; wide screens get a wider glow, phones a taller one.
+  vec2 p = vec2((uv.x - 0.5) * asp, uv.y);
+  float width = max(asp, 0.8) * 0.82;
+
+  float rise = uRise;
+  float breath = 1.0 + uBreath * 0.035 * sin(uTime * 0.55) + uBreath * 0.015 * sin(uTime * 1.3 + 1.7);
+  vec2 c = vec2(uMouse.x * 0.06 * asp, mix(-1.1, -0.06, rise) + uMouse.y * 0.025);
+
+  // Elliptical distance from the light source below the edge.
+  vec2 e = (p - c) / vec2(width, 1.0);
+  float d0 = length(e);
+  // A slow shimmer that bends the falloff a little.
+  float s = fbm(vec2(p.x * 1.4, p.y * 1.1 - uTime * 0.035) + uTime * 0.02) - 0.5;
+  float d = d0 + s * 0.12 * uShimmer * smoothstep(1.4, 0.3, d0);
+
+  float reach = uSpread * breath * mix(0.35, 1.0, rise);
+  float t = clamp(d / reach, 0.0, 1.0);
+
+  // Core -> accent band -> mid tone -> sky.
+  vec3 col = mix(uCore, uMid, smoothstep(0.0, 0.62, t));
+  col = mix(col, uSky, smoothstep(0.38, 1.0, t));
+  float band = exp(-pow((t - 0.3) / 0.13, 2.0));
+  col = mix(col, col * 0.55 + uAccent * 0.55, band * 0.45);
+  col += uCore * exp(-d * d * 9.0 / (reach * reach)) * 0.25 * uIntensity;
+
+  // Volumetric rays climbing out of the source.
+  float ang = atan(p.x - c.x, (p.y - c.y) * 1.6);
+  float beams = n2(vec2(ang * 8.0, uTime * 0.07)) * 0.65 + n2(vec2(ang * 21.0, -uTime * 0.05)) * 0.35;
+  col += mix(uAccent, uCore, 0.5) * smoothstep(0.5, 1.0, beams) * exp(-t * 2.4) * smoothstep(0.02, 0.2, t) * 0.28 * uRays;
+
+  // Horizon arc: a thin bright rim where the light meets the edge of the world.
+  float pr = 0.9;
+  vec2 pc = vec2(c.x, c.y + 0.24 - pr);
+  float rd = length((p - pc) / vec2(max(asp, 0.8) * 1.05, 1.0)) - pr;
+  float fade = exp(-abs(p.x - c.x) / (width * 0.9));
+  col += mix(uAccent, uCore, 0.7) * (exp(-abs(rd) * 140.0) * 0.9 + exp(-max(rd, 0.0) * 14.0) * 0.18) * fade * uArc * rise;
+  col *= mix(1.0, 0.82, smoothstep(0.0, -0.08, rd) * uArc);
+
+  // Dust lit by the glow.
+  float lit = exp(-t * 2.2);
+  col += uCore * (dust(p, 9.0, 0.05, 1.0) + dust(p, 16.0, 0.09, 7.0) * 0.7) * lit * 0.55 * uDust * rise;
+
+  col = mix(uSky, col, clamp(uIntensity * (0.25 + 0.75 * rise), 0.0, 1.4));
+  // Darker corners at the top keep text readable.
+  col *= 1.0 - 0.12 * smoothstep(0.45, 1.1, uv.y) * smoothstep(0.1, 0.9, abs(uv.x - 0.5) * 2.0);
+  // Filmic shoulder so the core rolls off instead of clipping.
+  col = col / (1.0 + max(col - 0.85, 0.0));
+
+  col += (h2(gl_FragCoord.xy + fract(uTime * 7.0) * 91.0) - 0.5) * (1.0 + 7.0 * uGrain) / 255.0;
+  gl_FragColor = vec4(col, 1.0);
+}`;
+
+const HorizonGlow = ({
+    preset = "lilac",
+    skyColor,
+    midColor,
+    accentColor,
+    coreColor,
+    spread = 1.3,
+    intensity = 1,
+    duration = 2.4,
+    autoRise = true,
+    breathe = 1,
+    shimmer = 1,
+    arc = 0.7,
+    rays = 1,
+    dust = 1,
+    grain = 0.4,
+    speed = 1,
+    interactive = true,
+    replay = 0,
+    className = "",
+    children,
+}) => {
+    const wrap = useRef(null);
+    const p = PRESETS[preset] ?? PRESETS.lilac;
+    const live = useRef({});
+    live.current = { sky: skyColor ?? p.sky, mid: midColor ?? p.mid, accent: accentColor ?? p.accent, core: coreColor ?? p.core, spread, intensity, duration, autoRise, breathe, shimmer, arc, rays, dust, grain, speed, interactive };
+    const rise = useRef({ start: 0 });
+
+    useEffect(() => {
+        rise.current.start = performance.now();
+    }, [replay, autoRise]);
+
+    useEffect(() => {
+        const el = wrap.current;
+        const renderer = new WebGLRenderer({ antialias: false, alpha: false, powerPreference: "high-performance" });
+        renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.5));
+        Object.assign(renderer.domElement.style, { position: "absolute", inset: "0", width: "100%", height: "100%", display: "block" });
+        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 },
+            uRise: { value: 0 },
+            uMouse: { value: new Vector2() },
+            uSky: { value: new Color() },
+            uMid: { value: new Color() },
+            uAccent: { value: new Color() },
+            uCore: { value: new Color() },
+            uSpread: { value: 1 },
+            uIntensity: { value: 1 },
+            uShimmer: { value: 1 },
+            uBreath: { value: 1 },
+            uGrain: { value: 0.4 },
+            uArc: { value: 0.7 },
+            uRays: { value: 1 },
+            uDust: { value: 1 },
+        };
+        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: 0, y: 0, tx: 0, ty: 0 };
+        let raf = 0;
+        let last = 0;
+        let time = 0;
+        let visible = true;
+
+        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;
+            const t = o.autoRise && !reduced ? Math.min(1, (now - rise.current.start) / (Math.max(0.1, o.duration) * 1000)) : 1;
+            // Ease out with a touch of overshoot-free settle.
+            u.uRise.value = 1 - Math.pow(1 - t, 4);
+            const k = 1 - Math.exp(-dt / 0.6);
+            mouse.x += ((o.interactive ? mouse.tx : 0) - mouse.x) * k;
+            mouse.y += ((o.interactive ? mouse.ty : 0) - mouse.y) * k;
+            u.uMouse.value.set(mouse.x, mouse.y);
+            u.uTime.value = time;
+            u.uSky.value.set(o.sky);
+            u.uMid.value.set(o.mid);
+            u.uAccent.value.set(o.accent);
+            u.uCore.value.set(o.core);
+            u.uSpread.value = o.spread;
+            u.uIntensity.value = o.intensity;
+            u.uShimmer.value = reduced ? 0 : o.shimmer;
+            u.uBreath.value = reduced ? 0 : o.breathe;
+            u.uGrain.value = o.grain;
+            u.uArc.value = o.arc;
+            u.uRays.value = reduced ? o.rays * 0.6 : o.rays;
+            u.uDust.value = reduced ? 0 : o.dust;
+            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 fit = () => {
+            const { width, height } = el.getBoundingClientRect();
+            if (!width || !height) return;
+            renderer.setSize(width, height, false);
+            renderer.getDrawingBufferSize(u.uRes.value);
+            if (!raf) draw(performance.now());
+        };
+
+        const onMove = (e) => {
+            const r = el.getBoundingClientRect();
+            mouse.tx = ((e.clientX - r.left) / r.width) * 2 - 1;
+            mouse.ty = -(((e.clientY - r.top) / r.height) * 2 - 1);
+        };
+        const onLeave = () => {
+            mouse.tx = 0;
+            mouse.ty = 0;
+        };
+        el.addEventListener("pointermove", onMove);
+        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("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 bg-[#0d1438] ${className}`}>
+            {children && <div className="relative z-10 h-full w-full">{children}</div>}
+        </div>
+    );
+};
+
+export default HorizonGlow;

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;