apex-ui-kit 2.4.0 → 2.5.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,9 +240,9 @@ 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.5
 
-- 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.
 - Hold to Confirm follows a delete flow with an `UndoNotice` that counts down before the action is final.

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/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.5.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",