apex-ui-kit 2.4.0 → 2.6.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)
 
-**93 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.
+**96 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
 
-- **93 components** across backgrounds, cards, text effects, navigation, buttons, interactive UI, AI interfaces, loaders and maps.
+- **96 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,13 +99,14 @@ Every component's props, variants and copy-ready code are on its docs page.
 
 ## Components
 
-### Backgrounds (12)
+### Backgrounds (14)
 
 | 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` |
 | [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` |
 | [Kinetic Threads Background](https://apex-ui.in/components/kinetic-threads-background) | `kinetic-threads-background` |
 | [Lens Flare Background](https://apex-ui.in/components/lens-flare-background) | `lens-flare-background` |
 | [Liquid Gradient](https://apex-ui.in/components/liquid-gradient) | `liquid-gradient` |
@@ -115,8 +116,9 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Retro Grid 3D](https://apex-ui.in/components/retro-grid-3d) | `retro-grid-3d` |
 | [Ripple Background](https://apex-ui.in/components/ripple-background) | `ripple-background` |
 | [Smoke Background](https://apex-ui.in/components/smoke-background) | `smoke-background` |
+| [Warp Tunnel](https://apex-ui.in/components/warp-tunnel) | `warp-tunnel` |
 
-### Cards (17)
+### Cards (18)
 
 | Component | CLI name |
 | --- | --- |
@@ -124,6 +126,7 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Card Stack](https://apex-ui.in/components/card-stack) | `card-stack` |
 | [Card Swap 3D](https://apex-ui.in/components/card-swap-3d) | `card-swap-3d` |
 | [Cards](https://apex-ui.in/components/cards) | `basic-card`, `meteor-card` |
+| [Distortion Image](https://apex-ui.in/components/distortion-image) | `distortion-image` |
 | [Folder](https://apex-ui.in/components/folder) | `folder` |
 | [Glare Card](https://apex-ui.in/components/glare-card) | `glare-card` |
 | [Holo Card](https://apex-ui.in/components/holo-card) | `holo-card` |
@@ -237,11 +240,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.4
+## What's new in 2.6
 
-- 24 new components, including three.js 3D (Liquid Blob 3D, Particle Morph, Retro Grid 3D), 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.
+- 27 new components, including WebGL and three.js (Galaxy 3D, Warp Tunnel, Distortion Image, Liquid Blob 3D, Particle Morph, Retro Grid 3D), 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.
 - AI Model Prompt now exports `DEFAULT_LLM_MODELS` and an index file, so you can import both from the folder.
-- Loading Screens show real progress: `useLoadProgress` loads your images, files or code and drives the bar and the count.
+- 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.
 - Hold to Confirm follows a delete flow with an `UndoNotice` that counts down before the action is final.
 - Sliders and drag components no longer stop midway when the page text gets selected.
 - Stepper and Animated Tabs keep a steady height, Shiny Text loops seamlessly, Cube Gallery is a real 3D cube and Flip Book is a hardcover book you can drag.

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

@@ -0,0 +1,136 @@
+import React, { useEffect, useRef } from "react";
+import { Mesh, OrthographicCamera, PlaneGeometry, Scene, ShaderMaterial, SRGBColorSpace, TextureLoader, Vector2, WebGLRenderer } from "three";
+
+/*
+ * Distortion Image: an image drawn in WebGL that ripples where the pointer
+ * moves. The ripple bends the picture, splits it into red / green / blue
+ * fringes and fades out smoothly when the pointer leaves. Image is "cover"
+ * fitted like CSS object-fit. Pauses off screen, frees the GPU on unmount.
+ */
+
+const VERT = `varying vec2 vUv; void main(){ vUv = uv; gl_Position = vec4(position.xy, 0., 1.); }`;
+
+const FRAG = `
+uniform sampler2D uTex; uniform vec2 uPointer; uniform float uHover; uniform float uTime;
+uniform float uStrength; uniform float uRgb; uniform vec2 uCover; uniform float uAspect;
+varying vec2 vUv;
+void main(){
+  // object-fit: cover
+  vec2 uv = (vUv - .5) * uCover + .5;
+  vec2 d = vUv - uPointer; d.x *= uAspect;
+  float dist = length(d);
+  float wave = sin(dist * 28. - uTime * 6.) * exp(-dist * 5.) * uHover;
+  vec2 dir = dist > 0. ? normalize(d) : vec2(0.);
+  vec2 offset = dir * wave * .03 * uStrength;
+  float split = uRgb * uHover * exp(-dist * 4.) * .012;
+  float r = texture2D(uTex, uv + offset + dir * split).r;
+  float g = texture2D(uTex, uv + offset).g;
+  float b = texture2D(uTex, uv + offset - dir * split).b;
+  gl_FragColor = vec4(r, g, b, 1.);
+}`;
+
+const DistortionImage = ({ src = "https://ik.imagekit.io/ny6yinyut/apexui/assets/doctorStrange.png?tr=f-auto,q-85,w-1000", alt = "", strength = 1, rgbSplit = 1, aspectRatio = "4 / 5", width = 22, rounded = "1.25rem", className = "" }) => {
+    const mount = useRef(null);
+    const opts = useRef({ strength, rgbSplit });
+    opts.current = { strength, rgbSplit };
+
+    useEffect(() => {
+        const el = mount.current;
+        const renderer = new WebGLRenderer({ antialias: false, alpha: true, powerPreference: "high-performance" });
+        renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
+        renderer.outputColorSpace = SRGBColorSpace;
+        Object.assign(renderer.domElement.style, { display: "block", width: "100%", height: "100%" });
+        el.appendChild(renderer.domElement);
+        const scene = new Scene();
+        const camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
+        const uniforms = {
+            uTex: { value: null },
+            uPointer: { value: new Vector2(0.5, 0.5) },
+            uHover: { value: 0 },
+            uTime: { value: 0 },
+            uStrength: { value: strength },
+            uRgb: { value: rgbSplit },
+            uCover: { value: new Vector2(1, 1) },
+            uAspect: { value: 1 },
+        };
+        const geometry = new PlaneGeometry(2, 2);
+        const material = new ShaderMaterial({ vertexShader: VERT, fragmentShader: FRAG, uniforms });
+        scene.add(new Mesh(geometry, material));
+
+        let imgAspect = 1;
+        const fit = () => {
+            const { width, height } = el.getBoundingClientRect();
+            if (!width || !height) return;
+            renderer.setSize(width, height, false);
+            const box = width / height;
+            uniforms.uAspect.value = box;
+            // Scale UVs so the image covers the box without stretching.
+            uniforms.uCover.value.set(box < imgAspect ? box / imgAspect : 1, box < imgAspect ? 1 : imgAspect / box);
+        };
+        let texture = null;
+        let disposed = false;
+        new TextureLoader().setCrossOrigin("anonymous").load(src, (t) => {
+            if (disposed) return t.dispose();
+            t.colorSpace = SRGBColorSpace;
+            texture = t;
+            imgAspect = t.image.width / t.image.height;
+            uniforms.uTex.value = t;
+            fit();
+        });
+        const ro = new ResizeObserver(fit);
+        ro.observe(el);
+        fit();
+
+        const target = { x: 0.5, y: 0.5, hover: 0 };
+        const onMove = (e) => {
+            const r = el.getBoundingClientRect();
+            target.x = (e.clientX - r.left) / r.width;
+            target.y = 1 - (e.clientY - r.top) / r.height;
+            target.hover = 1;
+        };
+        const onLeave = () => (target.hover = 0);
+        el.addEventListener("pointermove", onMove);
+        el.addEventListener("pointerleave", onLeave);
+        let visible = true;
+        const io = new IntersectionObserver(([entry]) => (visible = entry.isIntersecting));
+        io.observe(el);
+
+        let raf = 0;
+        let last = performance.now();
+        const frame = (now) => {
+            raf = requestAnimationFrame(frame);
+            const dt = Math.min(0.05, (now - last) / 1000);
+            last = now;
+            if (!visible || !uniforms.uTex.value) return;
+            uniforms.uTime.value += dt;
+            uniforms.uPointer.value.x += (target.x - uniforms.uPointer.value.x) * 0.12;
+            uniforms.uPointer.value.y += (target.y - uniforms.uPointer.value.y) * 0.12;
+            uniforms.uHover.value += (target.hover - uniforms.uHover.value) * 0.06;
+            uniforms.uStrength.value = opts.current.strength;
+            uniforms.uRgb.value = opts.current.rgbSplit;
+            renderer.render(scene, camera);
+        };
+        raf = requestAnimationFrame(frame);
+
+        return () => {
+            disposed = true;
+            cancelAnimationFrame(raf);
+            ro.disconnect();
+            io.disconnect();
+            el.removeEventListener("pointermove", onMove);
+            el.removeEventListener("pointerleave", onLeave);
+            texture?.dispose();
+            geometry.dispose();
+            material.dispose();
+            renderer.dispose();
+            renderer.forceContextLoss();
+            renderer.domElement.remove();
+        };
+        // Strength and RGB split are read live from opts; only a new image reloads.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [src]);
+
+    return <div ref={mount} role="img" aria-label={alt} className={`relative overflow-hidden bg-neutral-900 ${className}`} style={{ width: `min(${width}rem, 88vw)`, aspectRatio, borderRadius: rounded }} />;
+};
+
+export default DistortionImage;

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

@@ -0,0 +1,152 @@
+import React, { useEffect, useRef } from "react";
+import { AdditiveBlending, BufferAttribute, BufferGeometry, Color, PerspectiveCamera, Points, Scene, ShaderMaterial, WebGLRenderer } from "three";
+
+/*
+ * Galaxy 3D: a spiral galaxy of glowing stars that slowly turns, tilted so
+ * you see its arms in depth. Colors blend from a hot core to cool arm tips,
+ * and the camera drifts with the pointer for a soft parallax. One draw call;
+ * the spin runs in the shader, so the CPU does almost nothing per frame.
+ * Put your content on top as children.
+ */
+
+const VERT = `
+attribute float aSize; attribute vec3 aColor; attribute float aRadius; attribute float aAngle; attribute float aHeight;
+uniform float uTime; uniform float uSpeed; uniform float uDpr; uniform float uSize;
+varying vec3 vColor;
+void main(){
+  // Inner stars orbit faster than outer ones.
+  float a = aAngle + uTime * uSpeed * (0.6 / (0.35 + aRadius));
+  vec3 p = vec3(cos(a) * aRadius, aHeight, sin(a) * aRadius);
+  vec4 mv = modelViewMatrix * vec4(p, 1.);
+  gl_PointSize = aSize * uSize * uDpr * (18. / -mv.z);
+  gl_Position = projectionMatrix * mv;
+  vColor = aColor;
+}`;
+
+const FRAG = `
+varying vec3 vColor;
+void main(){
+  float d = length(gl_PointCoord - .5);
+  float a = pow(smoothstep(.5, 0., d), 1.8);
+  gl_FragColor = vec4(vColor * a * 1.35, a);
+}`;
+
+const Galaxy3D = ({ count = 30000, arms = 4, spin = 1.2, colors = ["#fde68a", "#a78bfa", "#22d3ee"], speed = 1, starSize = 1, tilt = 0.9, height = "100%", children, className = "" }) => {
+    const mount = useRef(null);
+    const opts = useRef({ speed, starSize });
+    opts.current = { speed, starSize };
+
+    useEffect(() => {
+        const el = mount.current;
+        const renderer = new WebGLRenderer({ antialias: false, alpha: true, powerPreference: "high-performance" });
+        const dpr = Math.min(window.devicePixelRatio || 1, 1.75);
+        renderer.setPixelRatio(dpr);
+        Object.assign(renderer.domElement.style, { display: "block", position: "absolute", inset: "0", width: "100%", height: "100%" });
+        el.appendChild(renderer.domElement);
+        const scene = new Scene();
+        const camera = new PerspectiveCamera(55, 1, 0.1, 100);
+
+        const radius = new Float32Array(count);
+        const angle = new Float32Array(count);
+        const heightArr = new Float32Array(count);
+        const sizes = new Float32Array(count);
+        const cols = new Float32Array(count * 3);
+        const inner = new Color(colors[0]);
+        const mid = new Color(colors[1] ?? colors[0]);
+        const outer = new Color(colors[2] ?? colors[1] ?? colors[0]);
+        const c = new Color();
+        const R = 5;
+        for (let i = 0; i < count; i++) {
+            const r = Math.pow(Math.random(), 1.6) * R;
+            const arm = ((i % arms) / arms) * Math.PI * 2;
+            // Scatter around the arm, tighter in the core.
+            const scatter = (Math.random() - 0.5) * (0.35 + r * 0.12);
+            radius[i] = r + (Math.random() - 0.5) * 0.25;
+            angle[i] = arm + r * spin + scatter;
+            heightArr[i] = (Math.random() - 0.5) * 0.35 * Math.exp(-r * 0.45);
+            sizes[i] = 0.5 + Math.random() * 1.6 * (r < 0.6 ? 1.8 : 1);
+            const t = r / R;
+            if (t < 0.5) c.copy(inner).lerp(mid, t * 2);
+            else c.copy(mid).lerp(outer, (t - 0.5) * 2);
+            cols.set([c.r, c.g, c.b], i * 3);
+        }
+        const geometry = new BufferGeometry();
+        geometry.setAttribute("position", new BufferAttribute(new Float32Array(count * 3), 3));
+        geometry.setAttribute("aRadius", new BufferAttribute(radius, 1));
+        geometry.setAttribute("aAngle", new BufferAttribute(angle, 1));
+        geometry.setAttribute("aHeight", new BufferAttribute(heightArr, 1));
+        geometry.setAttribute("aSize", new BufferAttribute(sizes, 1));
+        geometry.setAttribute("aColor", new BufferAttribute(cols, 3));
+        geometry.boundingSphere = null;
+        const uniforms = { uTime: { value: 0 }, uSpeed: { value: speed }, uDpr: { value: dpr }, uSize: { value: starSize } };
+        const material = new ShaderMaterial({ vertexShader: VERT, fragmentShader: FRAG, uniforms, transparent: true, depthWrite: false, blending: AdditiveBlending });
+        const points = new Points(geometry, material);
+        points.frustumCulled = false;
+        points.rotation.x = tilt;
+        scene.add(points);
+
+        const resize = () => {
+            const { width, height: h } = el.getBoundingClientRect();
+            if (!width || !h) return;
+            renderer.setSize(width, h, false);
+            camera.aspect = width / h;
+            camera.updateProjectionMatrix();
+        };
+        const ro = new ResizeObserver(resize);
+        ro.observe(el);
+        resize();
+
+        const pointer = { x: 0, y: 0 };
+        const onMove = (e) => {
+            const r = el.getBoundingClientRect();
+            pointer.x = ((e.clientX - r.left) / r.width) * 2 - 1;
+            pointer.y = ((e.clientY - r.top) / r.height) * 2 - 1;
+        };
+        el.addEventListener("pointermove", onMove);
+        const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+        let visible = true;
+        const io = new IntersectionObserver(([entry]) => (visible = entry.isIntersecting));
+        io.observe(el);
+
+        let raf = 0;
+        let last = performance.now();
+        const cam = { x: 0, y: 2.2 };
+        const frame = (now) => {
+            raf = requestAnimationFrame(frame);
+            const dt = Math.min(0.05, (now - last) / 1000);
+            last = now;
+            if (!visible) return;
+            uniforms.uTime.value += dt * (reduced ? 0.1 : 1);
+            uniforms.uSpeed.value = opts.current.speed;
+            uniforms.uSize.value = opts.current.starSize;
+            cam.x += (pointer.x * 1.2 - cam.x) * 0.03;
+            cam.y += (2.2 - pointer.y * 0.8 - cam.y) * 0.03;
+            camera.position.set(cam.x, cam.y, 7.5);
+            camera.lookAt(0, 0, 0);
+            renderer.render(scene, camera);
+        };
+        raf = requestAnimationFrame(frame);
+
+        return () => {
+            cancelAnimationFrame(raf);
+            ro.disconnect();
+            io.disconnect();
+            el.removeEventListener("pointermove", onMove);
+            geometry.dispose();
+            material.dispose();
+            renderer.dispose();
+            renderer.forceContextLoss();
+            renderer.domElement.remove();
+        };
+        // Star layout rebuilds on these; speed and size are read live.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [count, arms, spin, tilt, colors.join(",")]);
+
+    return (
+        <div ref={mount} className={`relative isolate w-full overflow-hidden bg-[radial-gradient(ellipse_at_center,#0b1026_0%,#02030a_70%)] ${className}`} style={{ height }}>
+            {children && <div className="pointer-events-none relative z-10 flex h-full w-full items-center justify-center [&>*]:pointer-events-auto">{children}</div>}
+        </div>
+    );
+};
+
+export default Galaxy3D;

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

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import { AnimatePresence, motion, useAnimationControls, useReducedMotion } from "framer-motion";
+import { usePageProgress } from "./usePageProgress.js";
 
 /*
  * Loading Screen: five ways to wait.
@@ -9,50 +10,27 @@ import { AnimatePresence, motion, useAnimationControls, useReducedMotion } from
  *  catch    – a mini game: tap the orb before its ring runs out and build a combo
  *  runner   – a mini game: jump the neon pillars (Space / ↑ / tap) while things load
  *  racer    – a mini game: steer through traffic (← → / tap a side) while things load
- * Pass `progress` (0–100) yourself, or leave it out and it runs on its own.
+ * By default it shows the real page load: the bar and the count follow the
+ * images, scripts, styles and fonts the page is actually loading, and it
+ * hides itself once everything has loaded (autoHide). Pass `progress`
+ * (0 to 100) to drive it yourself instead.
  */
 
-const MESSAGES = ["Warming up the engines", "Fetching your components", "Polishing pixels", "Almost there"];
+const MESSAGES = ["Starting up", "Loading page", "Loading content", "Almost ready"];
 const messageFor = (v) => MESSAGES[Math.min(MESSAGES.length - 1, Math.floor(v / (100 / MESSAGES.length)))];
 
-// Simulated progress that eases toward 100 over `duration` ms, then calls onComplete.
-function useProgress(progress, duration, loop, onComplete) {
-    const [auto, setAuto] = useState(0);
+// Real progress: your own `progress` when given, otherwise the page's real load.
+function useProgress(progress, onComplete) {
+    const controlled = typeof progress === "number";
+    const page = usePageProgress(!controlled);
+    const value = Math.round(Math.max(0, Math.min(100, controlled ? progress : page.progress)));
     const doneRef = useRef(onComplete);
     doneRef.current = onComplete;
-    const controlled = typeof progress === "number";
-
-    useEffect(() => {
-        if (controlled) return undefined;
-        let raf = 0;
-        let start = performance.now();
-        let fired = false;
-        const tick = (now) => {
-            const t = Math.min(1, Math.max(0, (now - start) / duration));
-            // Fast start, slow middle, quick finish — the way real loads feel.
-            const eased = t < 0.85 ? 0.92 * (1 - Math.pow(1 - t / 0.85, 2.2)) : 0.92 + 0.08 * ((t - 0.85) / 0.15);
-            setAuto(Math.round(eased * 100));
-            if (t >= 1) {
-                if (!fired) {
-                    fired = true;
-                    doneRef.current?.();
-                }
-                if (loop) {
-                    start = now + 900;
-                    fired = false;
-                } else return;
-            }
-            raf = requestAnimationFrame(tick);
-        };
-        raf = requestAnimationFrame(tick);
-        return () => cancelAnimationFrame(raf);
-    }, [controlled, duration, loop]);
-
+    const complete = value >= 100 && (controlled || page.done);
     useEffect(() => {
-        if (controlled && progress >= 100) doneRef.current?.();
-    }, [controlled, progress]);
-
-    return Math.round(Math.max(0, Math.min(100, controlled ? progress : auto)));
+        if (complete) doneRef.current?.();
+    }, [complete]);
+    return { value, complete };
 }
 
 function Bar({ value, color, track }) {
@@ -108,8 +86,8 @@ function Orbit({ value, color, moving }) {
     );
 }
 
-function ProgressView({ value, color, track, moving }) {
-    const message = messageFor(value);
+function ProgressView({ value, color, track, moving, statusText }) {
+    const message = statusText ?? `${messageFor(value)}…`;
     return (
         <div className="w-[min(22rem,80vw)]">
             <p className="font-mono text-[clamp(3.5rem,12vw,5.5rem)] font-bold leading-none tabular-nums tracking-tight">
@@ -122,7 +100,7 @@ function ProgressView({ value, color, track, moving }) {
             <div className="mt-3 h-5 overflow-hidden text-sm opacity-70">
                 <AnimatePresence mode="wait" initial={false}>
                     <motion.p key={message} initial={{ y: 14, opacity: 0 }} animate={{ y: 0, opacity: 1 }} exit={{ y: -14, opacity: 0 }} transition={{ duration: moving ? 0.25 : 0 }}>
-                        {message}…
+                        {message}
                     </motion.p>
                 </AnimatePresence>
             </div>
@@ -760,30 +738,39 @@ function RacerGame({ value, color, track, dark, statusText }) {
 const LoadingScreen = ({
     variant = "orbit",
     progress,
-    duration = 6000,
-    loop = true,
     accentColor = "#a3e635",
     theme = "dark",
     title = "Loading",
     fullScreen = false,
+    autoHide = true,
     onComplete,
     statusText,
     className = "",
 }) => {
     const moving = !useReducedMotion();
-    const value = useProgress(progress, duration, loop, onComplete);
+    const { value, complete } = useProgress(progress, onComplete);
+    const [gone, setGone] = useState(false);
     const dark = theme !== "light";
     const track = dark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)";
-    const shared = { value, color: accentColor, track, moving, dark, statusText };
+    // Page-style status ("Loading page…", "Almost ready…"), or your own text.
+    const status = statusText ?? (complete ? "Page ready" : undefined);
+    const shared = { value, color: accentColor, track, moving, dark, statusText: status };
     const game = variant === "catch" || variant === "runner" || variant === "racer";
+    const hiding = autoHide && complete;
 
+    if (gone) return null;
     return (
-        <div
+        <motion.div
             data-loading-screen=""
             role="status"
             aria-live="polite"
+            aria-busy={!complete}
             aria-label={`${title} ${value}%`}
-            className={`flex flex-col items-center justify-center gap-6 p-6 sm:p-8 ${fullScreen ? "fixed inset-0 z-[100]" : "relative h-full w-full"} ${dark ? "bg-neutral-950 text-white" : "bg-white text-neutral-900"} ${className}`}
+            initial={false}
+            animate={{ opacity: hiding ? 0 : 1 }}
+            transition={{ duration: 0.45, delay: hiding ? 0.35 : 0 }}
+            onAnimationComplete={() => hiding && setGone(true)}
+            className={`flex flex-col items-center justify-center gap-6 p-6 sm:p-8 ${fullScreen ? "fixed inset-0 z-[100]" : "relative h-full w-full"} ${hiding ? "pointer-events-none" : ""} ${dark ? "bg-neutral-950 text-white" : "bg-white text-neutral-900"} ${className}`}
             style={dark ? { backgroundImage: `radial-gradient(60% 50% at 50% 40%, ${accentColor}14, transparent 70%)` } : undefined}
         >
             {game && (
@@ -798,8 +785,13 @@ const LoadingScreen = ({
             {variant === "catch" && <CatchGame {...shared} />}
             {variant === "runner" && <RunnerGame {...shared} />}
             {variant === "racer" && <RacerGame {...shared} />}
-            {!game && variant !== "progress" && <p className="text-[0.7rem] font-semibold uppercase tracking-[0.3em] opacity-50">{title}</p>}
-        </div>
+            {!game && variant !== "progress" && (
+                <p className="text-center">
+                    <span className="block text-[0.7rem] font-semibold uppercase tracking-[0.3em] opacity-50">{title}</span>
+                    <span className="mt-1.5 block text-[0.75rem] opacity-60">{status ?? `${messageFor(value)}…`}</span>
+                </p>
+            )}
+        </motion.div>
     );
 };
 

package/dist/ApexUI-Kit/templates/LoadingScreen/usePageProgress.js

@@ -0,0 +1,135 @@
+import { useEffect, useState } from "react";
+
+/*
+ * Real page-load progress, used by <LoadingScreen /> when you don't pass
+ * your own `progress`. It counts what the page is actually loading:
+ *
+ *  - every <img> still loading (including ones added later),
+ *  - scripts, stylesheets, fonts and fetches as the browser finishes them,
+ *  - web fonts (document.fonts.ready) and the window "load" event.
+ *
+ * `progress` is finished / total (0 to 100) and only reaches 100 once the
+ * page has fully loaded and nothing new has started for a moment, so the
+ * bar and the count always match what really happened.
+ */
+
+const SETTLE_MS = 350;
+
+export function usePageProgress(enabled = true) {
+    const [state, setState] = useState({ loaded: 0, total: 0, done: false });
+
+    useEffect(() => {
+        if (!enabled || typeof window === "undefined") return undefined;
+        let loaded = 0;
+        let total = 0;
+        let waitingForPage = document.readyState !== "complete";
+        let settle = 0;
+        let finished = false;
+        const seen = new WeakSet();
+        const cleanups = [];
+
+        const update = () => {
+            if (finished) return;
+            const idle = !waitingForPage && loaded >= total;
+            setState({ loaded, total, done: false });
+            clearTimeout(settle);
+            if (idle) {
+                // Wait a moment: a page often starts a few more requests right after load.
+                settle = setTimeout(() => {
+                    if (!waitingForPage && loaded >= total) {
+                        finished = true;
+                        setState({ loaded, total: Math.max(total, loaded), done: true });
+                    }
+                }, SETTLE_MS);
+            }
+        };
+        const add = (n = 1) => {
+            total += n;
+            update();
+        };
+        const finish = () => {
+            loaded += 1;
+            update();
+        };
+
+        // Only what is still loading (or starts) after the loader appears is counted,
+        // so the bar runs from 0 to 100 for this load.
+        // Images: pending ones count until they load or fail.
+        const trackImage = (img) => {
+            if (seen.has(img)) return;
+            seen.add(img);
+            if (img.complete) return;
+            add();
+            const end = () => {
+                img.removeEventListener("load", end);
+                img.removeEventListener("error", end);
+                finish();
+            };
+            img.addEventListener("load", end);
+            img.addEventListener("error", end);
+            cleanups.push(() => {
+                img.removeEventListener("load", end);
+                img.removeEventListener("error", end);
+            });
+        };
+        Array.from(document.images).forEach(trackImage);
+        const mo = new MutationObserver((list) => {
+            for (const m of list) {
+                m.addedNodes.forEach((n) => {
+                    if (n.nodeType !== 1) return;
+                    if (n.tagName === "IMG") trackImage(n);
+                    else n.querySelectorAll?.("img").forEach(trackImage);
+                });
+            }
+        });
+        mo.observe(document.documentElement, { childList: true, subtree: true });
+
+        // Other files (scripts, CSS, fonts, fetch) are counted as the browser finishes them.
+        let po;
+        if (typeof PerformanceObserver !== "undefined") {
+            po = new PerformanceObserver((list) => {
+                const fresh = list.getEntries().filter((e) => e.initiatorType !== "img");
+                if (!fresh.length) return;
+                total += fresh.length;
+                loaded += fresh.length;
+                update();
+            });
+            try {
+                po.observe({ type: "resource", buffered: false });
+            } catch {
+                po = undefined;
+            }
+        }
+
+        // The page itself.
+        if (waitingForPage) {
+            total += 1;
+            const onLoad = () => {
+                waitingForPage = false;
+                finish();
+            };
+            window.addEventListener("load", onLoad, { once: true });
+            cleanups.push(() => window.removeEventListener("load", onLoad));
+        }
+        // Web fonts.
+        if (document.fonts && document.fonts.status !== "loaded") {
+            total += 1;
+            document.fonts.ready.then(finish, finish);
+        }
+        update();
+
+        return () => {
+            finished = true;
+            clearTimeout(settle);
+            mo.disconnect();
+            po?.disconnect();
+            cleanups.forEach((fn) => fn());
+        };
+    }, [enabled]);
+
+    const total = Math.max(1, state.total);
+    const progress = state.done ? 100 : Math.min(99, Math.round((state.loaded / total) * 100));
+    return { progress, loaded: state.loaded, total: state.total, done: state.done };
+}
+
+export default usePageProgress;

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

@@ -0,0 +1,141 @@
+import React, { useEffect, useRef } from "react";
+import { Color, Mesh, OrthographicCamera, PlaneGeometry, Scene, ShaderMaterial, Vector2, WebGLRenderer } from "three";
+
+/*
+ * Warp Tunnel: a hyperspace tunnel drawn entirely in one fragment shader.
+ * Glowing rings and streaks rush toward you and the tunnel bends toward the
+ * pointer. Hold the mouse (or touch) to boost into warp speed. Cheap: one
+ * full-screen triangle pair, no geometry to update. Content goes on top.
+ */
+
+const VERT = `varying vec2 vUv; void main(){ vUv = uv; gl_Position = vec4(position.xy, 0., 1.); }`;
+
+const FRAG = `
+uniform float uTime; uniform vec2 uRes; uniform vec2 uBend; uniform float uBoost;
+uniform vec3 uC1; uniform vec3 uC2; uniform float uDensity;
+varying vec2 vUv;
+float hash(vec2 p){ return fract(sin(dot(p, vec2(41.3, 289.1))) * 45758.5453); }
+void main(){
+  vec2 p = (vUv - .5) * vec2(uRes.x / uRes.y, 1.);
+  p -= uBend * .25 * length(p);                 // bend toward the pointer
+  float r = length(p);
+  float a = atan(p.y, p.x);
+  float depth = .35 / max(r, .001) + uTime;    // tunnel coordinate
+  // Rings rushing forward
+  float rings = smoothstep(.92, 1., sin(depth * 6.2831 * .5 * uDensity) * .5 + .5);
+  // Streaks: random angular slices that flicker along the tunnel
+  float slice = floor(a / 6.2831 * 64.);
+  float h = hash(vec2(slice, floor(depth * 2.)));
+  float streak = step(.82, h) * smoothstep(.0, .8, fract(depth * 2.)) * (1. - fract(depth * 2.));
+  float glow = (rings * .8 + streak * (1.2 + uBoost * 2.)) * smoothstep(.0, .25, r);
+  vec3 col = mix(uC1, uC2, .5 + .5 * sin(a * 2. + depth * .6));
+  float core = smoothstep(.5, .0, r) * (.25 + uBoost * .5);
+  vec3 c = col * glow * (1.4 - r) + col * core;
+  c *= smoothstep(1.2, .2, r);                 // vignette
+  gl_FragColor = vec4(c, 1.);
+}`;
+
+const WarpTunnel = ({ colors = ["#a3e635", "#8b5cf6"], speed = 1, density = 1, interactive = true, height = "100%", children, className = "" }) => {
+    const mount = useRef(null);
+    const opts = useRef({ colors, speed, density, interactive });
+    opts.current = { colors, speed, density, interactive };
+
+    useEffect(() => {
+        const el = mount.current;
+        const renderer = new WebGLRenderer({ antialias: false, powerPreference: "high-performance" });
+        renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.5));
+        Object.assign(renderer.domElement.style, { display: "block", position: "absolute", inset: "0", width: "100%", height: "100%" });
+        el.appendChild(renderer.domElement);
+        const scene = new Scene();
+        const camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
+        const uniforms = {
+            uTime: { value: 0 },
+            uRes: { value: new Vector2(1, 1) },
+            uBend: { value: new Vector2(0, 0) },
+            uBoost: { value: 0 },
+            uC1: { value: new Color(colors[0]) },
+            uC2: { value: new Color(colors[1] ?? colors[0]) },
+            uDensity: { value: density },
+        };
+        const geometry = new PlaneGeometry(2, 2);
+        const material = new ShaderMaterial({ vertexShader: VERT, fragmentShader: FRAG, uniforms });
+        scene.add(new Mesh(geometry, material));
+
+        const resize = () => {
+            const { width, height: h } = el.getBoundingClientRect();
+            if (!width || !h) return;
+            renderer.setSize(width, h, false);
+            uniforms.uRes.value.set(width, h);
+        };
+        const ro = new ResizeObserver(resize);
+        ro.observe(el);
+        resize();
+
+        const target = { x: 0, y: 0, boost: 0 };
+        const onMove = (e) => {
+            const r = el.getBoundingClientRect();
+            target.x = ((e.clientX - r.left) / r.width) * 2 - 1;
+            target.y = -(((e.clientY - r.top) / r.height) * 2 - 1);
+        };
+        const onDown = () => (target.boost = 1);
+        const onUp = () => (target.boost = 0);
+        const onLeave = () => {
+            target.x = 0;
+            target.y = 0;
+            target.boost = 0;
+        };
+        el.addEventListener("pointermove", onMove);
+        el.addEventListener("pointerdown", onDown);
+        el.addEventListener("pointerup", onUp);
+        el.addEventListener("pointerleave", onLeave);
+        const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+        let visible = true;
+        const io = new IntersectionObserver(([entry]) => (visible = entry.isIntersecting));
+        io.observe(el);
+
+        let raf = 0;
+        let last = performance.now();
+        const frame = (now) => {
+            raf = requestAnimationFrame(frame);
+            const dt = Math.min(0.05, (now - last) / 1000);
+            last = now;
+            if (!visible) return;
+            const o = opts.current;
+            const active = o.interactive ? target : { x: 0, y: 0, boost: 0 };
+            uniforms.uBoost.value += (active.boost - uniforms.uBoost.value) * 0.05;
+            uniforms.uTime.value += dt * o.speed * (reduced ? 0.15 : 1) * (1 + uniforms.uBoost.value * 3);
+            uniforms.uBend.value.x += (active.x - uniforms.uBend.value.x) * 0.05;
+            uniforms.uBend.value.y += (active.y - uniforms.uBend.value.y) * 0.05;
+            uniforms.uC1.value.set(o.colors[0]);
+            uniforms.uC2.value.set(o.colors[1] ?? o.colors[0]);
+            uniforms.uDensity.value = o.density;
+            renderer.render(scene, camera);
+        };
+        raf = requestAnimationFrame(frame);
+
+        return () => {
+            cancelAnimationFrame(raf);
+            ro.disconnect();
+            io.disconnect();
+            el.removeEventListener("pointermove", onMove);
+            el.removeEventListener("pointerdown", onDown);
+            el.removeEventListener("pointerup", onUp);
+            el.removeEventListener("pointerleave", onLeave);
+            geometry.dispose();
+            material.dispose();
+            renderer.dispose();
+            renderer.forceContextLoss();
+            renderer.domElement.remove();
+        };
+        // Everything visual is read live from opts.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return (
+        <div ref={mount} className={`relative isolate w-full touch-none select-none overflow-hidden bg-black ${className}`} style={{ height }}>
+            {children && <div className="pointer-events-none relative z-10 flex h-full w-full items-center justify-center [&>*]:pointer-events-auto">{children}</div>}
+        </div>
+    );
+};
+
+export default WarpTunnel;

package/dist/cli/index.js

@@ -117,6 +117,9 @@ const componentMap = {
     "liquid-blob-3d": "LiquidBlob3D",
     "particle-morph": "ParticleMorph",
     "retro-grid-3d": "RetroGrid3D",
+    "distortion-image": "DistortionImage",
+    "galaxy-3d": "Galaxy3D",
+    "warp-tunnel": "WarpTunnel",
     "water-drop-reveal": "MaskView",
 };
 // Packages only some components need, installed on top of the shared ones.

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "apex-ui-kit",
-  "version": "2.4.0",
+  "version": "2.6.0",
   "license": "MIT",
-  "description": "93 free, animated UI components for React, styled with Tailwind CSS. Add any of them with one CLI command.",
+  "description": "96 free, animated UI components for React, styled with Tailwind CSS. Add any of them with one CLI command.",
   "homepage": "https://apex-ui.in",
   "repository": {
     "type": "git",