apex-ui-kit 2.3.2 → 2.4.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)
 
-**90 free, animated React components for Tailwind CSS.** Pick one, add it with a single command, and the source lands in your project so you can read it and change anything.
+**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.
 
 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
 
-- **90 components** across backgrounds, cards, text effects, navigation, buttons, interactive UI, AI interfaces, loaders and maps.
+- **93 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,7 +99,7 @@ Every component's props, variants and copy-ready code are on its docs page.
 
 ## Components
 
-### Backgrounds (11)
+### Backgrounds (12)
 
 | Component | CLI name |
 | --- | --- |
@@ -112,6 +112,7 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Luminous Particle Ocean](https://apex-ui.in/components/luminous-particle-ocean) | `luminous-particle-ocean` |
 | [Orbs Background](https://apex-ui.in/components/orbs-background) | `orbs-background` |
 | [Rain Background](https://apex-ui.in/components/rain-background) | `rain-background` |
+| [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` |
 
@@ -181,7 +182,7 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Animated Switches](https://apex-ui.in/components/animated-switches) | `animated-switch` |
 | [Star Border](https://apex-ui.in/components/star-border) | `star-border` |
 
-### Interactive (20)
+### Interactive (22)
 
 | Component | CLI name |
 | --- | --- |
@@ -198,8 +199,10 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [FAQ Accordion](https://apex-ui.in/components/faq-accordion) | `faq-accordion` |
 | [Flip Book](https://apex-ui.in/components/flip-book) | `flip-book` |
 | [Image Compare](https://apex-ui.in/components/image-compare) | `image-compare` |
+| [Liquid Blob 3D](https://apex-ui.in/components/liquid-blob-3d) | `liquid-blob-3d` |
 | [Magnet Lines](https://apex-ui.in/components/magnet-lines) | `magnet-lines` |
 | [Magnetic Cursor](https://apex-ui.in/components/magnetic-cursor) | `magnetic-cursor` |
+| [Particle Morph](https://apex-ui.in/components/particle-morph) | `particle-morph` |
 | [Pointer Follower](https://apex-ui.in/components/pointer-follower) | `pointer-follower` |
 | [Receipt Printer](https://apex-ui.in/components/receipt-printer) | `receipt-printer` |
 | [Stepper](https://apex-ui.in/components/stepper) | `stepper` |
@@ -234,10 +237,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.3
+## What's new in 2.4
 
-- 21 new components, including 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.
+- 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.
 - 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.
 - 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/LiquidBlob3D/LiquidBlob3D.jsx

@@ -0,0 +1,174 @@
+import React, { useEffect, useRef } from "react";
+import { Color, IcosahedronGeometry, Mesh, PerspectiveCamera, Scene, ShaderMaterial, WebGLRenderer } from "three";
+
+/*
+ * Liquid Blob 3D: a glossy blob whose surface flows with 3D noise, shaded
+ * with an iridescent fresnel rim. It leans toward the pointer and ripples
+ * harder while hovered. One mesh, one shader, no textures, so it stays
+ * light. Pauses when off screen and frees the GPU on unmount.
+ */
+
+const NOISE = `
+vec3 mod289(vec3 x){return x-floor(x*(1./289.))*289.;}
+vec4 mod289(vec4 x){return x-floor(x*(1./289.))*289.;}
+vec4 permute(vec4 x){return mod289(((x*34.)+1.)*x);}
+vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-.85373472095314*r;}
+float snoise(vec3 v){
+  const vec2 C=vec2(1./6.,1./3.);const vec4 D=vec4(0.,.5,1.,2.);
+  vec3 i=floor(v+dot(v,C.yyy));vec3 x0=v-i+dot(i,C.xxx);
+  vec3 g=step(x0.yzx,x0.xyz);vec3 l=1.-g;vec3 i1=min(g.xyz,l.zxy);vec3 i2=max(g.xyz,l.zxy);
+  vec3 x1=x0-i1+C.xxx;vec3 x2=x0-i2+C.yyy;vec3 x3=x0-D.yyy;i=mod289(i);
+  vec4 p=permute(permute(permute(i.z+vec4(0.,i1.z,i2.z,1.))+i.y+vec4(0.,i1.y,i2.y,1.))+i.x+vec4(0.,i1.x,i2.x,1.));
+  float n_=.142857142857;vec3 ns=n_*D.wyz-D.xzx;vec4 j=p-49.*floor(p*ns.z*ns.z);
+  vec4 x_=floor(j*ns.z);vec4 y_=floor(j-7.*x_);vec4 x=x_*ns.x+ns.yyyy;vec4 y=y_*ns.x+ns.yyyy;vec4 h=1.-abs(x)-abs(y);
+  vec4 b0=vec4(x.xy,y.xy);vec4 b1=vec4(x.zw,y.zw);vec4 s0=floor(b0)*2.+1.;vec4 s1=floor(b1)*2.+1.;vec4 sh=-step(h,vec4(0.));
+  vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;
+  vec3 p0=vec3(a0.xy,h.x);vec3 p1=vec3(a0.zw,h.y);vec3 p2=vec3(a1.xy,h.z);vec3 p3=vec3(a1.zw,h.w);
+  vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));p0*=norm.x;p1*=norm.y;p2*=norm.z;p3*=norm.w;
+  vec4 m=max(.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.);m=m*m;
+  return 42.*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));
+}`;
+
+const VERT = `
+uniform float uTime; uniform float uAmp; uniform float uFreq;
+varying vec3 vNormal; varying vec3 vView; varying float vNoise;
+${NOISE}
+float field(vec3 p){ return snoise(p * uFreq + vec3(uTime * .3)) + .18 * snoise(p * uFreq * 2. - vec3(uTime * .2)); }
+void main(){
+  float n = field(normal);
+  vNoise = n;
+  vec3 pos = position + normal * n * uAmp;
+  // Rebuild the normal from two nearby displaced points so the shading follows the waves.
+  vec3 t = normalize(cross(normal, abs(normal.y) < .99 ? vec3(0.,1.,0.) : vec3(1.,0.,0.)));
+  vec3 b = normalize(cross(normal, t));
+  float e = .01;
+  vec3 n1 = normalize(normal + t * e); vec3 n2 = normalize(normal + b * e);
+  vec3 p1 = n1 * (1. + field(n1) * uAmp); vec3 p2 = n2 * (1. + field(n2) * uAmp);
+  vec3 nrm = normalize(cross(p1 - pos, p2 - pos));
+  if (dot(nrm, normal) < 0.) nrm = -nrm;
+  vec4 mv = modelViewMatrix * vec4(pos, 1.);
+  vView = -mv.xyz;
+  vNormal = normalize(normalMatrix * nrm);
+  gl_Position = projectionMatrix * mv;
+}`;
+
+const FRAG = `
+uniform vec3 uC1; uniform vec3 uC2; uniform vec3 uC3;
+varying vec3 vNormal; varying vec3 vView; varying float vNoise;
+void main(){
+  vec3 n = normalize(vNormal); vec3 v = normalize(vView);
+  float fr = pow(1. - max(dot(n, v), 0.), 2.4);
+  vec3 col = mix(uC1, uC2, smoothstep(-.7, .7, vNoise));
+  col = mix(col, uC3, fr * .9);
+  vec3 l = normalize(vec3(.45, .8, .6));
+  float diff = max(dot(n, l), 0.);
+  float spec = pow(max(dot(reflect(-l, n), v), 0.), 40.);
+  col = col * (.55 + .55 * diff) + spec * .8 + fr * .25;
+  gl_FragColor = vec4(col, 1.);
+}`;
+
+const LiquidBlob3D = ({ colors = ["#a3e635", "#22d3ee", "#a78bfa"], size = 22, speed = 1, distortion = 0.24, detail = 48, interactive = true, className = "" }) => {
+    const mount = useRef(null);
+    const opts = useRef({ colors, speed, distortion, interactive });
+    opts.current = { colors, speed, distortion, interactive };
+
+    useEffect(() => {
+        const el = mount.current;
+        const renderer = new WebGLRenderer({ antialias: true, alpha: true, powerPreference: "high-performance" });
+        renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
+        el.appendChild(renderer.domElement);
+        renderer.domElement.style.display = "block";
+
+        const scene = new Scene();
+        const camera = new PerspectiveCamera(35, 1, 0.1, 50);
+        camera.position.z = 4.2;
+        const uniforms = {
+            uTime: { value: 0 },
+            uAmp: { value: distortion },
+            uFreq: { value: 0.85 },
+            uC1: { value: new Color(colors[0]) },
+            uC2: { value: new Color(colors[1] ?? colors[0]) },
+            uC3: { value: new Color(colors[2] ?? colors[1] ?? colors[0]) },
+        };
+        const geometry = new IcosahedronGeometry(1, detail);
+        const material = new ShaderMaterial({ vertexShader: VERT, fragmentShader: FRAG, uniforms });
+        const mesh = new Mesh(geometry, material);
+        scene.add(mesh);
+
+        const resize = () => {
+            const { width, height } = el.getBoundingClientRect();
+            if (!width || !height) return;
+            renderer.setSize(width, height, false);
+            renderer.domElement.style.width = "100%";
+            renderer.domElement.style.height = "100%";
+            camera.aspect = width / height;
+            camera.updateProjectionMatrix();
+        };
+        const ro = new ResizeObserver(resize);
+        ro.observe(el);
+        resize();
+
+        const pointer = { x: 0, y: 0, hover: 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;
+            pointer.hover = 1;
+        };
+        const onLeave = () => {
+            pointer.x = 0;
+            pointer.y = 0;
+            pointer.hover = 0;
+        };
+        el.addEventListener("pointermove", onMove);
+        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();
+        let amp = distortion;
+        const frame = (now) => {
+            raf = requestAnimationFrame(frame);
+            const dt = Math.min(0.05, (now - last) / 1000);
+            last = now;
+            if (!visible) return;
+            const o = opts.current;
+            uniforms.uTime.value += dt * o.speed * (reduced ? 0.15 : 1);
+            const targetAmp = o.distortion * (o.interactive && pointer.hover ? 1.55 : 1);
+            amp += (targetAmp - amp) * 0.06;
+            uniforms.uAmp.value = amp;
+            uniforms.uC1.value.set(o.colors[0]);
+            uniforms.uC2.value.set(o.colors[1] ?? o.colors[0]);
+            uniforms.uC3.value.set(o.colors[2] ?? o.colors[1] ?? o.colors[0]);
+            const tx = o.interactive ? pointer.y * 0.5 : 0;
+            const ty = o.interactive ? pointer.x * 0.7 : 0;
+            mesh.rotation.x += (tx - mesh.rotation.x) * 0.05;
+            mesh.rotation.y += (ty + uniforms.uTime.value * 0.15 - mesh.rotation.y) * 0.05;
+            renderer.render(scene, camera);
+        };
+        raf = requestAnimationFrame(frame);
+
+        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();
+        };
+        // Colors, speed and distortion are read live from opts; only geometry detail rebuilds.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [detail]);
+
+    return <div ref={mount} className={`relative touch-none ${className}`} style={{ width: `min(${size}rem, 90vw)`, aspectRatio: "1" }} aria-hidden="true" />;
+};
+
+export default LiquidBlob3D;

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

@@ -52,7 +52,7 @@ function useProgress(progress, duration, loop, onComplete) {
         if (controlled && progress >= 100) doneRef.current?.();
     }, [controlled, progress]);
 
-    return Math.max(0, Math.min(100, controlled ? progress : auto));
+    return Math.round(Math.max(0, Math.min(100, controlled ? progress : auto)));
 }
 
 function Bar({ value, color, track }) {
@@ -64,11 +64,11 @@ function Bar({ value, color, track }) {
 }
 
 // Progress row shared by the game variants.
-function Footer({ value, color, track }) {
+function Footer({ value, color, track, statusText }) {
     return (
         <div className="mt-5 w-full">
             <div className="mb-2 flex items-center justify-between text-[0.75rem]">
-                <span className="opacity-60">{messageFor(value)}…</span>
+                <span className="opacity-60">{statusText ?? `${messageFor(value)}…`}</span>
                 <span className="font-mono font-semibold tabular-nums">{value}%</span>
             </div>
             <Bar value={value} color={color} track={track} />
@@ -160,7 +160,7 @@ function Blocks({ value, color, track, moving }) {
 
 const ORB_LIFE = 1.5; // seconds before an orb escapes
 
-function CatchGame({ value, color, track, dark }) {
+function CatchGame({ value, color, track, dark, statusText }) {
     const [score, setScore] = useState(0);
     const [best, setBest] = useState(0);
     const [combo, setCombo] = useState(0);
@@ -287,14 +287,14 @@ function CatchGame({ value, color, track, dark }) {
                     </div>
                 ))}
             </motion.div>
-            <Footer value={value} color={color} track={track} />
+            <Footer value={value} color={color} track={track} statusText={statusText} />
         </div>
     );
 }
 
 /* --------------------------------------------------------------- Runner game */
 
-function RunnerGame({ value, color, track, dark }) {
+function RunnerGame({ value, color, track, dark, statusText }) {
     const canvasRef = useRef(null);
     const jumpRef = useRef(() => {});
     const [score, setScore] = useState(0);
@@ -542,7 +542,7 @@ function RunnerGame({ value, color, track, dark }) {
                     )}
                 </AnimatePresence>
             </div>
-            <Footer value={value} color={color} track={track} />
+            <Footer value={value} color={color} track={track} statusText={statusText} />
         </div>
     );
 }
@@ -552,7 +552,7 @@ function RunnerGame({ value, color, track, dark }) {
 const LANES = 3;
 const TRAFFIC = ["#f43f5e", "#38bdf8", "#f59e0b", "#a78bfa", "#e5e7eb"];
 
-function RacerGame({ value, color, track, dark }) {
+function RacerGame({ value, color, track, dark, statusText }) {
     const canvasRef = useRef(null);
     const moveRef = useRef(() => {});
     const [score, setScore] = useState(0);
@@ -752,7 +752,7 @@ function RacerGame({ value, color, track, dark }) {
                     )}
                 </AnimatePresence>
             </div>
-            <Footer value={value} color={color} track={track} />
+            <Footer value={value} color={color} track={track} statusText={statusText} />
         </div>
     );
 }
@@ -767,13 +767,14 @@ const LoadingScreen = ({
     title = "Loading",
     fullScreen = false,
     onComplete,
+    statusText,
     className = "",
 }) => {
     const moving = !useReducedMotion();
     const value = useProgress(progress, duration, loop, onComplete);
     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 };
+    const shared = { value, color: accentColor, track, moving, dark, statusText };
     const game = variant === "catch" || variant === "runner" || variant === "racer";
 
     return (

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

@@ -0,0 +1,78 @@
+import { useEffect, useRef, useState } from "react";
+
+/*
+ * Real loading progress for <LoadingScreen progress={...} />.
+ *
+ * Give it the things your page needs before it can show, and it loads them
+ * and reports how many are done:
+ *
+ *   const { progress, loaded, total, done } = useLoadProgress([
+ *       "/hero.jpg",                         // images are decoded
+ *       "/data/products.json",               // anything else is fetched
+ *       () => import("./Dashboard.jsx"),     // or any function returning a promise
+ *   ]);
+ *   <LoadingScreen variant="runner" progress={progress} statusText={`${loaded} of ${total} loaded`} />
+ *
+ * Items load in parallel; progress is the share that has finished (0 to 100),
+ * so the bar and the number always match what really happened. A failed item
+ * still counts as finished (see `errors`) so the screen never gets stuck.
+ * Pass a stable list (define it outside the component or memoize it).
+ */
+
+const IMAGE = /\.(png|jpe?g|gif|webp|avif|svg)(\?|#|$)/i;
+
+function loadItem(item) {
+    if (typeof item === "function") return Promise.resolve().then(item);
+    if (item && typeof item.then === "function") return item;
+    if (typeof item === "string") {
+        if (IMAGE.test(item)) {
+            return new Promise((resolve, reject) => {
+                const img = new Image();
+                img.onload = () => (img.decode ? img.decode().then(resolve, resolve) : resolve());
+                img.onerror = reject;
+                img.src = item;
+            });
+        }
+        return fetch(item).then((r) => {
+            if (!r.ok) throw new Error(`${r.status} ${item}`);
+            return r.blob();
+        });
+    }
+    return Promise.resolve();
+}
+
+export function useLoadProgress(items, { enabled = true } = {}) {
+    const list = useRef(items);
+    list.current = items;
+    const total = items.length;
+    const key = `${total}|${items.map((i) => (typeof i === "string" ? i : typeof i)).join("|")}`;
+    const [state, setState] = useState(() => ({ loaded: 0, total, errors: 0, progress: total ? 0 : 100, done: !total }));
+
+    useEffect(() => {
+        if (!enabled) return undefined;
+        const work = list.current;
+        const count = work.length;
+        if (!count) {
+            setState({ loaded: 0, total: 0, errors: 0, progress: 100, done: true });
+            return undefined;
+        }
+        let cancelled = false;
+        let loaded = 0;
+        let errors = 0;
+        setState({ loaded: 0, total: count, errors: 0, progress: 0, done: false });
+        const finish = (ok) => {
+            if (cancelled) return;
+            loaded += 1;
+            if (!ok) errors += 1;
+            setState({ loaded, total: count, errors, progress: Math.round((loaded / count) * 100), done: loaded === count });
+        };
+        work.forEach((item) => loadItem(item).then(() => finish(true), () => finish(false)));
+        return () => {
+            cancelled = true;
+        };
+    }, [key, enabled]);
+
+    return state;
+}
+
+export default useLoadProgress;

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

@@ -0,0 +1,216 @@
+import React, { useEffect, useRef, useState } from "react";
+import { AdditiveBlending, BufferAttribute, BufferGeometry, Color, PerspectiveCamera, Points, Scene, ShaderMaterial, WebGLRenderer } from "three";
+
+/*
+ * Particle Morph: thousands of glowing particles that flow between shapes:
+ * sphere, cube, torus, DNA helix and a wave. It morphs on a timer or when
+ * you click, drifts with the pointer, and each particle takes a slightly
+ * different path so the change looks like a swarm, not a snap. One draw
+ * call; pauses off screen and frees the GPU on unmount.
+ */
+
+const SHAPES = {
+    sphere: (i, n) => {
+        // Fibonacci sphere: even spacing.
+        const y = 1 - (i / (n - 1)) * 2;
+        const r = Math.sqrt(1 - y * y);
+        const t = i * 2.399963;
+        return [Math.cos(t) * r * 1.6, y * 1.6, Math.sin(t) * r * 1.6];
+    },
+    cube: () => {
+        const s = 1.25;
+        const p = [(Math.random() * 2 - 1) * s, (Math.random() * 2 - 1) * s, (Math.random() * 2 - 1) * s];
+        p[Math.floor(Math.random() * 3)] = Math.sign(Math.random() - 0.5) * s;
+        return p;
+    },
+    torus: () => {
+        const u = Math.random() * Math.PI * 2;
+        const v = Math.random() * Math.PI * 2;
+        const R = 1.3;
+        const r = 0.45;
+        return [(R + r * Math.cos(v)) * Math.cos(u), r * Math.sin(v), (R + r * Math.cos(v)) * Math.sin(u)];
+    },
+    helix: (i, n) => {
+        const t = (i / n) * Math.PI * 8;
+        const y = (i / n) * 3.4 - 1.7;
+        const strand = i % 3;
+        if (strand === 2) {
+            // Rungs between the two strands.
+            const k = Math.random();
+            const a = Math.round(t / 0.6) * 0.6;
+            return [Math.cos(a) * 0.8 * (1 - 2 * k), y, Math.sin(a) * 0.8 * (1 - 2 * k)];
+        }
+        const a = t + strand * Math.PI;
+        return [Math.cos(a) * 0.8, y, Math.sin(a) * 0.8];
+    },
+    wave: (i, n) => {
+        const side = Math.ceil(Math.sqrt(n));
+        const x = ((i % side) / side) * 4 - 2;
+        const z = (Math.floor(i / side) / side) * 4 - 2;
+        return [x, Math.sin(x * 2) * Math.cos(z * 2) * 0.35, z];
+    },
+};
+
+const VERT = `
+attribute float aSeed;
+uniform float uTime; uniform float uSize; uniform float uDpr;
+varying float vSeed;
+void main(){
+  vSeed = aSeed;
+  vec3 p = position;
+  p += 0.012 * vec3(sin(uTime * 1.3 + aSeed * 30.), cos(uTime * 1.1 + aSeed * 20.), sin(uTime * .9 + aSeed * 40.));
+  vec4 mv = modelViewMatrix * vec4(p, 1.);
+  gl_PointSize = uSize * uDpr * (0.6 + aSeed * 0.8) * (11. / -mv.z);
+  gl_Position = projectionMatrix * mv;
+}`;
+
+const FRAG = `
+uniform vec3 uC1; uniform vec3 uC2;
+varying float vSeed;
+void main(){
+  float d = length(gl_PointCoord - .5);
+  float a = smoothstep(.5, .0, d) * .85;
+  vec3 col = mix(uC1, uC2, vSeed);
+  gl_FragColor = vec4(col * a, a);
+}`;
+
+const ORDER = ["sphere", "cube", "torus", "helix", "wave"];
+
+const ParticleMorph = ({ shapes = ORDER, count = 6000, colors = ["#a3e635", "#22d3ee"], interval = 3500, pointSize = 3, autoPlay = true, height = 26, className = "" }) => {
+    const mount = useRef(null);
+    const api = useRef(null);
+    const [index, setIndex] = useState(0);
+    const list = shapes.filter((s) => SHAPES[s]);
+    const opts = useRef({ colors, pointSize });
+    opts.current = { colors, pointSize };
+
+    useEffect(() => {
+        const el = mount.current;
+        const renderer = new WebGLRenderer({ antialias: false, alpha: true, powerPreference: "high-performance" });
+        const dpr = Math.min(window.devicePixelRatio || 1, 2);
+        renderer.setPixelRatio(dpr);
+        el.appendChild(renderer.domElement);
+        renderer.domElement.style.display = "block";
+        const scene = new Scene();
+        const camera = new PerspectiveCamera(40, 1, 0.1, 50);
+        camera.position.z = 6;
+
+        const n = count;
+        const pos = new Float32Array(n * 3);
+        const seeds = new Float32Array(n);
+        const targets = list.map((s) => {
+            const arr = new Float32Array(n * 3);
+            for (let i = 0; i < n; i++) arr.set(SHAPES[s](i, n), i * 3);
+            return arr;
+        });
+        pos.set(targets[0]);
+        for (let i = 0; i < n; i++) seeds[i] = Math.random();
+        const geometry = new BufferGeometry();
+        geometry.setAttribute("position", new BufferAttribute(pos, 3));
+        geometry.setAttribute("aSeed", new BufferAttribute(seeds, 1));
+        const uniforms = { uTime: { value: 0 }, uSize: { value: pointSize }, uDpr: { value: dpr }, uC1: { value: new Color(colors[0]) }, uC2: { value: new Color(colors[1] ?? colors[0]) } };
+        const material = new ShaderMaterial({ vertexShader: VERT, fragmentShader: FRAG, uniforms, transparent: true, depthWrite: false, blending: AdditiveBlending });
+        const points = new Points(geometry, material);
+        scene.add(points);
+
+        const resize = () => {
+            const { width, height: h } = el.getBoundingClientRect();
+            if (!width || !h) return;
+            renderer.setSize(width, h, false);
+            renderer.domElement.style.width = "100%";
+            renderer.domElement.style.height = "100%";
+            camera.aspect = width / h;
+            // Keep the shape in frame on narrow screens.
+            camera.position.z = width / h < 1 ? 6 / Math.max(0.55, width / h) : 6;
+            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);
+        let visible = true;
+        const io = new IntersectionObserver(([entry]) => (visible = entry.isIntersecting));
+        io.observe(el);
+
+        let target = targets[0];
+        // Per-particle speed so the swarm flows rather than snapping.
+        const rate = new Float32Array(n);
+        for (let i = 0; i < n; i++) rate[i] = 0.025 + seeds[i] * 0.05;
+        api.current = { go: (k) => (target = targets[((k % targets.length) + targets.length) % targets.length]) };
+
+        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;
+            uniforms.uTime.value += dt;
+            uniforms.uSize.value = opts.current.pointSize;
+            uniforms.uC1.value.set(opts.current.colors[0]);
+            uniforms.uC2.value.set(opts.current.colors[1] ?? opts.current.colors[0]);
+            for (let i = 0; i < n * 3; i++) pos[i] += (target[i] - pos[i]) * rate[(i / 3) | 0] * (dt * 60);
+            geometry.attributes.position.needsUpdate = true;
+            points.rotation.y += dt * 0.15;
+            points.rotation.x += (pointer.y * 0.4 - points.rotation.x) * 0.04;
+            points.rotation.z += (-pointer.x * 0.15 - points.rotation.z) * 0.04;
+            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();
+            api.current = null;
+        };
+        // Rebuild only when the particle set changes; colors and size are live.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [count, list.join(",")]);
+
+    useEffect(() => {
+        api.current?.go(index);
+    }, [index]);
+
+    useEffect(() => {
+        if (!autoPlay) return undefined;
+        const id = setInterval(() => setIndex((i) => i + 1), interval);
+        return () => clearInterval(id);
+    }, [autoPlay, interval]);
+
+    const current = list[((index % list.length) + list.length) % list.length];
+    return (
+        <div className={`relative flex w-full flex-col items-center gap-4 ${className}`}>
+            <div ref={mount} className="w-full cursor-pointer touch-none" style={{ height: `${height}rem` }} onClick={() => setIndex((i) => i + 1)} aria-hidden="true" />
+            <div className="flex flex-wrap justify-center gap-1.5" role="group" aria-label="Shape">
+                {list.map((s, i) => (
+                    <button
+                        key={s}
+                        type="button"
+                        onClick={() => setIndex(i)}
+                        aria-pressed={current === s}
+                        className={`rounded-full px-3 py-1 text-xs font-medium capitalize transition-colors ${current === s ? "text-black" : "opacity-60 hover:opacity-100"}`}
+                        style={current === s ? { background: colors[0] } : undefined}
+                    >
+                        {s}
+                    </button>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default ParticleMorph;

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

@@ -16,14 +16,21 @@ const DEFAULT_PLANS = [
 
 function Price({ value, currency }) {
     return (
-        <span className="relative inline-flex h-[1.1em] overflow-hidden align-bottom tabular-nums">
-            <AnimatePresence mode="popLayout" initial={false}>
+        // Old and new numbers share one grid cell (no layout popping, no flicker);
+        // an invisible copy of the current value sets the width.
+        <span className="relative inline-grid h-[1.1em] overflow-hidden align-bottom tabular-nums">
+            <span aria-hidden="true" className="invisible col-start-1 row-start-1">
+                {currency}
+                {value}
+            </span>
+            <AnimatePresence initial={false}>
                 <motion.span
                     key={value}
+                    className="col-start-1 row-start-1"
                     initial={{ y: "100%", opacity: 0 }}
-                    animate={{ y: 0, opacity: 1 }}
+                    animate={{ y: "0%", opacity: 1 }}
                     exit={{ y: "-100%", opacity: 0 }}
-                    transition={{ type: "spring", stiffness: 380, damping: 30 }}
+                    transition={{ type: "spring", stiffness: 380, damping: 32 }}
                 >
                     {currency}
                     {value}

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

@@ -0,0 +1,158 @@
+import React, { useEffect, useRef } from "react";
+import { Color, DoubleSide, Mesh, PerspectiveCamera, PlaneGeometry, Scene, ShaderMaterial, WebGLRenderer } from "three";
+
+/*
+ * Retro Grid 3D: a synthwave landscape. Glowing grid lines run over rolling
+ * hills that scroll toward you, with a flat road down the middle and a
+ * striped sun on the horizon. Two planes and two small shaders, so it's
+ * cheap to run as a hero background. Put your content on top as children.
+ */
+
+const NOISE = `
+float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
+float noise(vec2 p){ vec2 i = floor(p); vec2 f = fract(p); vec2 u = f * f * (3. - 2. * f);
+  return mix(mix(hash(i), hash(i + vec2(1., 0.)), u.x), mix(hash(i + vec2(0., 1.)), hash(i + vec2(1., 1.)), u.x), u.y); }`;
+
+const GROUND_VERT = `
+uniform float uTime; uniform float uSpeed; uniform float uHeight;
+varying vec2 vGrid; varying float vDepth; varying float vH;
+${NOISE}
+void main(){
+  vec3 p = position;
+  float z = p.y - uTime * uSpeed;           // plane is rotated, so y is depth
+  float road = smoothstep(1.2, 3.2, abs(p.x)); // flat strip in the middle
+  float h = (noise(vec2(p.x * .35, z * .35)) * .7 + noise(vec2(p.x * .9, z * .9)) * .3) * uHeight * road;
+  p.z += h;
+  vH = h / max(uHeight, .001);
+  vGrid = vec2(p.x, z);
+  vec4 mv = modelViewMatrix * vec4(p, 1.);
+  vDepth = -mv.z;
+  gl_Position = projectionMatrix * mv;
+}`;
+
+const GROUND_FRAG = `
+uniform vec3 uLine; uniform vec3 uGround; uniform float uFog;
+varying vec2 vGrid; varying float vDepth; varying float vH;
+void main(){
+  vec2 g = abs(fract(vGrid) - .5) / fwidth(vGrid);
+  float line = 1. - min(min(g.x, g.y), 1.);
+  vec3 col = mix(uGround, uGround * 1.6, vH);
+  col += uLine * line * 1.4;
+  float fog = smoothstep(uFog * .25, uFog, vDepth);
+  gl_FragColor = vec4(col, 1. - fog);
+}`;
+
+const SUN_VERT = `varying vec2 vUv; void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.); }`;
+const SUN_FRAG = `
+uniform vec3 uTop; uniform vec3 uBottom; uniform float uTime;
+varying vec2 vUv;
+void main(){
+  vec2 c = vUv - .5;
+  float d = length(c);
+  float disc = smoothstep(.5, .49, d);
+  // Horizontal gaps in the lower half that widen toward the bottom and drift down.
+  float y = vUv.y;
+  float t = clamp((.55 - y) / .55, 0., 1.);
+  float gap = y < .55 ? step(1. - t * .75, fract(y * 16. + uTime * .3)) : 0.;
+  vec3 col = mix(uBottom, uTop, y);
+  float glow = smoothstep(.75, .3, d) * .35;
+  float a = disc * (1. - gap);
+  gl_FragColor = vec4(col * (a + glow), a + glow * .6);
+}`;
+
+const RetroGrid3D = ({ lineColor = "#e879f9", groundColor = "#0b0618", sunColors = ["#fde047", "#f43f5e"], skyColors = ["#1e0b3a", "#05020d"], speed = 1.2, hills = 1.4, showSun = true, height = "100%", children, className = "" }) => {
+    const mount = useRef(null);
+    const opts = useRef({ lineColor, groundColor, sunColors, speed, hills });
+    opts.current = { lineColor, groundColor, sunColors, speed, hills };
+
+    useEffect(() => {
+        const el = mount.current;
+        const renderer = new WebGLRenderer({ antialias: true, alpha: true, powerPreference: "high-performance" });
+        renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.75));
+        el.appendChild(renderer.domElement);
+        Object.assign(renderer.domElement.style, { display: "block", position: "absolute", inset: "0" });
+        const scene = new Scene();
+        const camera = new PerspectiveCamera(60, 1, 0.1, 80);
+        camera.position.set(0, 1.25, 5);
+        camera.lookAt(0, 1.0, -10);
+
+        const gUniforms = { uTime: { value: 0 }, uSpeed: { value: speed }, uHeight: { value: hills }, uLine: { value: new Color(lineColor) }, uGround: { value: new Color(groundColor) }, uFog: { value: 34 } };
+        const groundGeo = new PlaneGeometry(40, 60, 80, 120);
+        const groundMat = new ShaderMaterial({ vertexShader: GROUND_VERT, fragmentShader: GROUND_FRAG, uniforms: gUniforms, transparent: true });
+        const ground = new Mesh(groundGeo, groundMat);
+        ground.rotation.x = -Math.PI / 2;
+        ground.position.z = -22;
+        scene.add(ground);
+
+        const sUniforms = { uTop: { value: new Color(sunColors[0]) }, uBottom: { value: new Color(sunColors[1] ?? sunColors[0]) }, uTime: { value: 0 } };
+        const sunGeo = new PlaneGeometry(14, 14);
+        const sunMat = new ShaderMaterial({ vertexShader: SUN_VERT, fragmentShader: SUN_FRAG, uniforms: sUniforms, transparent: true, depthWrite: false, side: DoubleSide });
+        const sun = new Mesh(sunGeo, sunMat);
+        sun.position.set(0, 4.2, -48);
+        sun.visible = showSun;
+        scene.add(sun);
+
+        const resize = () => {
+            const { width, height: h } = el.getBoundingClientRect();
+            if (!width || !h) return;
+            renderer.setSize(width, h, false);
+            renderer.domElement.style.width = "100%";
+            renderer.domElement.style.height = "100%";
+            camera.aspect = width / h;
+            camera.fov = width / h < 0.8 ? 75 : 60;
+            camera.updateProjectionMatrix();
+        };
+        const ro = new ResizeObserver(resize);
+        ro.observe(el);
+        resize();
+
+        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;
+            gUniforms.uTime.value += dt * (reduced ? 0.1 : 1);
+            sUniforms.uTime.value = gUniforms.uTime.value;
+            gUniforms.uSpeed.value = o.speed;
+            gUniforms.uHeight.value = o.hills;
+            gUniforms.uLine.value.set(o.lineColor);
+            gUniforms.uGround.value.set(o.groundColor);
+            sUniforms.uTop.value.set(o.sunColors[0]);
+            sUniforms.uBottom.value.set(o.sunColors[1] ?? o.sunColors[0]);
+            renderer.render(scene, camera);
+        };
+        raf = requestAnimationFrame(frame);
+
+        return () => {
+            cancelAnimationFrame(raf);
+            ro.disconnect();
+            io.disconnect();
+            groundGeo.dispose();
+            groundMat.dispose();
+            sunGeo.dispose();
+            sunMat.dispose();
+            renderer.dispose();
+            renderer.forceContextLoss();
+            renderer.domElement.remove();
+        };
+        // Colors, speed and hills are read live from opts.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [showSun]);
+
+    return (
+        <div className={`relative isolate w-full overflow-hidden ${className}`} style={{ height, background: `linear-gradient(to bottom, ${skyColors[1] ?? skyColors[0]} 0%, ${skyColors[0]} 55%, ${groundColor} 100%)` }}>
+            <div ref={mount} aria-hidden="true" className="absolute inset-0 -z-10" />
+            {children && <div className="relative flex h-full w-full items-center justify-center">{children}</div>}
+        </div>
+    );
+};
+
+export default RetroGrid3D;

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

@@ -17,6 +17,8 @@ const ShinyText = ({ text = "Shipping soon, join the waitlist", as = "span", spe
     const band = Math.min(16, Math.max(4, spread));
     return (
         <Tag
+            // A new key restarts the loop, so speed / pause changes apply right away.
+            key={`${speed}-${pause}-${still}`}
             className={`inline-block bg-clip-text text-transparent ${className}`}
             style={{
                 backgroundImage: `linear-gradient(100deg, ${color} ${50 - band}%, ${shineColor} 50%, ${color} ${50 + band}%)`,

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

@@ -16,13 +16,14 @@ const StarBorder = ({ as = "button", color = "#a3e635", speed = 5, thickness = 1
         animate: reduced ? undefined : { x: dir > 0 ? ["-35%", "35%"] : ["35%", "-35%"], opacity: [0, 1, 1, 0] },
         transition: { duration: speed, ease: "linear", repeat: Infinity, times: [0, 0.15, 0.85, 1] },
     });
+    // Keyed on speed below: a looping animation keeps its old duration otherwise.
     const top = star(-1);
     const bottom = star(1);
 
     return (
         <Tag className={`group relative inline-block overflow-hidden rounded-[1.1rem] ${className}`} style={{ padding: `${thickness}px 0` }} {...(as === "button" ? { type: "button" } : {})} {...rest}>
-            <motion.span aria-hidden="true" className="pointer-events-none absolute -bottom-[11px] left-[-100%] h-1/2 w-[300%] opacity-70" style={{ background: bottom.background }} animate={bottom.animate} transition={bottom.transition} />
-            <motion.span aria-hidden="true" className="pointer-events-none absolute -top-[10px] left-[-100%] h-1/2 w-[300%] opacity-70" style={{ background: top.background }} animate={top.animate} transition={top.transition} />
+            <motion.span key={`b-${speed}`} aria-hidden="true" className="pointer-events-none absolute -bottom-[11px] left-[-100%] h-1/2 w-[300%] opacity-70" style={{ background: bottom.background }} animate={bottom.animate} transition={bottom.transition} />
+            <motion.span key={`t-${speed}`} aria-hidden="true" className="pointer-events-none absolute -top-[10px] left-[-100%] h-1/2 w-[300%] opacity-70" style={{ background: top.background }} animate={top.animate} transition={top.transition} />
             <span className={`relative z-[1] block rounded-[1.1rem] border px-7 py-3.5 text-center text-[0.95rem] font-semibold transition-colors ${dark ? "border-white/10 bg-gradient-to-b from-neutral-900 to-black text-white group-hover:border-white/20" : "border-black/10 bg-gradient-to-b from-white to-neutral-100 text-neutral-900 group-hover:border-black/20"}`}>
                 {children}
             </span>

package/dist/cli/index.js

@@ -114,6 +114,9 @@ const componentMap = {
     "bounce-cards": "BounceCards",
     "card-swap-3d": "CardSwap3D",
     "gooey-nav": "GooeyNav",
+    "liquid-blob-3d": "LiquidBlob3D",
+    "particle-morph": "ParticleMorph",
+    "retro-grid-3d": "RetroGrid3D",
     "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.3.2",
+  "version": "2.4.0",
   "license": "MIT",
-  "description": "90 free, animated React components for Tailwind CSS. Add any of them to your project with one CLI command.",
+  "description": "93 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",