apex-ui-kit 2.9.0 → 2.10.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)
 
-**116 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.
+**118 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
 
-- **116 components** across backgrounds, cards, text effects, navigation, buttons, interactive UI, AI interfaces, loaders and maps.
+- **118 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.
@@ -196,7 +196,7 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Magnetic Button](https://apex-ui.in/components/magnetic-button) | `magnetic-button` |
 | [Star Border](https://apex-ui.in/components/star-border) | `star-border` |
 
-### Interactive (31)
+### Interactive (33)
 
 | Component | CLI name |
 | --- | --- |
@@ -215,6 +215,7 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Elastic Slider](https://apex-ui.in/components/elastic-slider) | `elastic-slider` |
 | [FAQ Accordion](https://apex-ui.in/components/faq-accordion) | `faq-accordion` |
 | [Flip Book](https://apex-ui.in/components/flip-book) | `flip-book` |
+| [Fluid Cursor](https://apex-ui.in/components/fluid-cursor) | `fluid-cursor` |
 | [Glass Lens](https://apex-ui.in/components/glass-lens) | `glass-lens` |
 | [Image Compare](https://apex-ui.in/components/image-compare) | `image-compare` |
 | [Infinite Canvas](https://apex-ui.in/components/infinite-canvas) | `infinite-canvas` |
@@ -227,6 +228,7 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [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` |
+| [Sketch Reveal](https://apex-ui.in/components/sketch-reveal) | `sketch-reveal` |
 | [Stepper](https://apex-ui.in/components/stepper) | `stepper` |
 | [Toast Stack](https://apex-ui.in/components/toast-stack) | `toast-stack` |
 | [ToolTip](https://apex-ui.in/components/tool-tip) | `tooltip` |
@@ -260,8 +262,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.9
+## What's new in 2.10
 
+- New in 2.10: Fluid Cursor (a real-time WebGL fluid sim that trails the cursor) and Sketch Reveal (a photo turns into a glowing sketch and burns away into the next one as you scroll).
 - New in 2.9: Liquid Glass (iOS style WebGL glass), 10 live page templates on the site, Arc Gallery auto scroll, Scroll Stack on the page scroll, Sunrise trees and birds.
 - New in 2.8: Glass Lens (WebGL liquid glass), Dither Waves (WebGL 1-bit background), Infinite Canvas, Image Accordion, Orbit Icons, Command Palette, Crossed Marquee (tech-stack bands with simple-icons) and Theme Switcher (8 themes with a circle reveal).
 - Toast Stack and Radial Menu no longer blink in production builds; Radial Menu, 3D Text Ring, Animated Tabs and Gooey Nav now fit 320px phones.

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

@@ -0,0 +1,418 @@
+import React, { useEffect, useRef } from "react";
+import { Color, HalfFloatType, LinearFilter, Mesh, OrthographicCamera, PlaneGeometry, RGBAFormat, Scene, ShaderMaterial, Vector2, WebGLRenderer, WebGLRenderTarget } from "three";
+
+/*
+ * Fluid Cursor: a real-time fluid simulation that trails the pointer, drawn
+ * in WebGL. Moving the cursor pushes coloured ink through the fluid; it
+ * swirls (vorticity), spreads (pressure) and slowly fades. A click blows a
+ * burst. It sits over its parent as a transparent layer and never blocks
+ * clicks, so content underneath stays usable.
+ *
+ * Props: colors (cycled; a rainbow when empty), simResolution, dyeResolution,
+ * dissipation (how fast the ink fades), velocityDissipation, curl (swirl),
+ * splatRadius, splatForce, idle (soft splashes when nobody moves),
+ * className, children.
+ */
+
+const BASE_VERT = `
+uniform vec2 texelSize;
+varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB;
+void main(){
+  vUv = uv;
+  vL = vUv - vec2(texelSize.x, 0.0);
+  vR = vUv + vec2(texelSize.x, 0.0);
+  vT = vUv + vec2(0.0, texelSize.y);
+  vB = vUv - vec2(0.0, texelSize.y);
+  gl_Position = vec4(position.xy, 0.0, 1.0);
+}`;
+
+const HEAD = `precision highp float;
+varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB;
+`;
+
+const SPLAT = `${HEAD}
+uniform sampler2D uTarget; uniform float aspect; uniform vec3 color; uniform vec2 point; uniform float radius;
+void main(){
+  vec2 p = vUv - point;
+  p.x *= aspect;
+  vec3 splat = exp(-dot(p, p) / radius) * color;
+  gl_FragColor = vec4(texture2D(uTarget, vUv).xyz + splat, 1.0);
+}`;
+
+const ADVECT = `${HEAD}
+uniform sampler2D uVelocity; uniform sampler2D uSource; uniform vec2 velTexel; uniform float dt; uniform float dissipation;
+void main(){
+  vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * velTexel;
+  gl_FragColor = texture2D(uSource, coord) / (1.0 + dissipation * dt);
+}`;
+
+const DIVERGENCE = `${HEAD}
+uniform sampler2D uVelocity;
+void main(){
+  float L = texture2D(uVelocity, vL).x;
+  float R = texture2D(uVelocity, vR).x;
+  float T = texture2D(uVelocity, vT).y;
+  float B = texture2D(uVelocity, vB).y;
+  vec2 C = texture2D(uVelocity, vUv).xy;
+  // Walls: reflect velocity at the edges.
+  if (vL.x < 0.0) L = -C.x;
+  if (vR.x > 1.0) R = -C.x;
+  if (vT.y > 1.0) T = -C.y;
+  if (vB.y < 0.0) B = -C.y;
+  gl_FragColor = vec4(0.5 * (R - L + T - B), 0.0, 0.0, 1.0);
+}`;
+
+const CURL = `${HEAD}
+uniform sampler2D uVelocity;
+void main(){
+  float L = texture2D(uVelocity, vL).y;
+  float R = texture2D(uVelocity, vR).y;
+  float T = texture2D(uVelocity, vT).x;
+  float B = texture2D(uVelocity, vB).x;
+  gl_FragColor = vec4(0.5 * (R - L - T + B), 0.0, 0.0, 1.0);
+}`;
+
+const VORTICITY = `${HEAD}
+uniform sampler2D uVelocity; uniform sampler2D uCurl; uniform float curl; uniform float dt;
+void main(){
+  float L = texture2D(uCurl, vL).x;
+  float R = texture2D(uCurl, vR).x;
+  float T = texture2D(uCurl, vT).x;
+  float B = texture2D(uCurl, vB).x;
+  float C = texture2D(uCurl, vUv).x;
+  vec2 force = 0.5 * vec2(abs(T) - abs(B), abs(R) - abs(L));
+  force /= length(force) + 0.0001;
+  force *= curl * C;
+  force.y *= -1.0;
+  vec2 vel = texture2D(uVelocity, vUv).xy + force * dt;
+  gl_FragColor = vec4(clamp(vel, -1000.0, 1000.0), 0.0, 1.0);
+}`;
+
+const SCALE = `${HEAD}
+uniform sampler2D uTexture; uniform float value;
+void main(){ gl_FragColor = value * texture2D(uTexture, vUv); }`;
+
+const PRESSURE = `${HEAD}
+uniform sampler2D uPressure; uniform sampler2D uDivergence;
+void main(){
+  float L = texture2D(uPressure, vL).x;
+  float R = texture2D(uPressure, vR).x;
+  float T = texture2D(uPressure, vT).x;
+  float B = texture2D(uPressure, vB).x;
+  float div = texture2D(uDivergence, vUv).x;
+  gl_FragColor = vec4((L + R + B + T - div) * 0.25, 0.0, 0.0, 1.0);
+}`;
+
+const GRADIENT = `${HEAD}
+uniform sampler2D uPressure; uniform sampler2D uVelocity;
+void main(){
+  float L = texture2D(uPressure, vL).x;
+  float R = texture2D(uPressure, vR).x;
+  float T = texture2D(uPressure, vT).x;
+  float B = texture2D(uPressure, vB).x;
+  vec2 vel = texture2D(uVelocity, vUv).xy - vec2(R - L, T - B);
+  gl_FragColor = vec4(vel, 0.0, 1.0);
+}`;
+
+// Shaded ink: a little light on the slopes of the dye gives it body.
+const DISPLAY = `${HEAD}
+uniform sampler2D uTexture; uniform vec2 dyeTexel;
+void main(){
+  vec3 c = texture2D(uTexture, vUv).rgb;
+  vec3 lc = texture2D(uTexture, vUv - vec2(dyeTexel.x, 0.0)).rgb;
+  vec3 rc = texture2D(uTexture, vUv + vec2(dyeTexel.x, 0.0)).rgb;
+  vec3 tc = texture2D(uTexture, vUv + vec2(0.0, dyeTexel.y)).rgb;
+  vec3 bc = texture2D(uTexture, vUv - vec2(0.0, dyeTexel.y)).rgb;
+  float dx = length(rc) - length(lc);
+  float dy = length(tc) - length(bc);
+  vec3 n = normalize(vec3(dx, dy, length(dyeTexel)));
+  float diffuse = clamp(dot(n, vec3(0.0, 0.0, 1.0)) + 0.7, 0.7, 1.0);
+  c *= diffuse;
+  float a = clamp(max(c.r, max(c.g, c.b)), 0.0, 1.0);
+  gl_FragColor = vec4(c, a);
+}`;
+
+const hsvToRgb = (h, s, v) => {
+    const i = Math.floor(h * 6);
+    const f = h * 6 - i;
+    const p = v * (1 - s);
+    const q = v * (1 - f * s);
+    const t = v * (1 - (1 - f) * s);
+    return [
+        [v, t, p],
+        [q, v, p],
+        [p, v, t],
+        [p, q, v],
+        [t, p, v],
+        [v, p, q],
+    ][i % 6];
+};
+
+const FluidCursor = ({ colors = [], simResolution = 128, dyeResolution = 1024, dissipation = 1.6, velocityDissipation = 1.2, curl = 18, splatRadius = 0.22, splatForce = 6000, idle = true, className = "", children }) => {
+    const wrap = useRef(null);
+    const live = useRef({});
+    live.current = { colors, dissipation, velocityDissipation, curl, splatRadius, splatForce, idle };
+
+    useEffect(() => {
+        const el = wrap.current;
+        const renderer = new WebGLRenderer({ alpha: true, premultipliedAlpha: true, antialias: false, powerPreference: "high-performance" });
+        if (!renderer.capabilities.isWebGL2 && !renderer.extensions.get("OES_texture_half_float")) {
+            renderer.dispose();
+            return undefined;
+        }
+        renderer.setPixelRatio(1);
+        renderer.autoClear = false;
+        Object.assign(renderer.domElement.style, { position: "absolute", inset: "0", width: "100%", height: "100%", display: "block", pointerEvents: "none" });
+        el.prepend(renderer.domElement);
+
+        const scene = new Scene();
+        const camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
+        const quad = new Mesh(new PlaneGeometry(2, 2));
+        scene.add(quad);
+        const texel = { value: new Vector2() };
+        const mat = (frag, uniforms) => new ShaderMaterial({ vertexShader: BASE_VERT, fragmentShader: frag, uniforms: { texelSize: texel, ...uniforms }, depthTest: false, depthWrite: false });
+        const m = {
+            splat: mat(SPLAT, { uTarget: { value: null }, aspect: { value: 1 }, color: { value: new Color() }, point: { value: new Vector2() }, radius: { value: 0.01 } }),
+            advect: mat(ADVECT, { uVelocity: { value: null }, uSource: { value: null }, velTexel: { value: new Vector2() }, dt: { value: 0.016 }, dissipation: { value: 1 } }),
+            divergence: mat(DIVERGENCE, { uVelocity: { value: null } }),
+            curl: mat(CURL, { uVelocity: { value: null } }),
+            vorticity: mat(VORTICITY, { uVelocity: { value: null }, uCurl: { value: null }, curl: { value: 18 }, dt: { value: 0.016 } }),
+            scale: mat(SCALE, { uTexture: { value: null }, value: { value: 0.8 } }),
+            pressure: mat(PRESSURE, { uPressure: { value: null }, uDivergence: { value: null } }),
+            gradient: mat(GRADIENT, { uPressure: { value: null }, uVelocity: { value: null } }),
+            display: mat(DISPLAY, { uTexture: { value: null }, dyeTexel: { value: new Vector2() } }),
+        };
+        m.display.transparent = true;
+
+        const target = (w, h) => new WebGLRenderTarget(w, h, { type: HalfFloatType, format: RGBAFormat, minFilter: LinearFilter, magFilter: LinearFilter, depthBuffer: false, stencilBuffer: false });
+        const double = (w, h) => {
+            const d = { read: target(w, h), write: target(w, h), w, h };
+            d.swap = () => ([d.read, d.write] = [d.write, d.read]);
+            d.dispose = () => {
+                d.read.dispose();
+                d.write.dispose();
+            };
+            return d;
+        };
+        let fbo = null;
+        const sizeFor = (res, w, h) => {
+            const a = w / h;
+            const min = Math.round(res);
+            const max = Math.round(res * Math.max(a, 1 / a));
+            return a > 1 ? [max, min] : [min, max];
+        };
+        const build = () => {
+            const { width, height } = el.getBoundingClientRect();
+            if (!width || !height) return false;
+            renderer.setSize(width, height, false);
+            fbo?.all.forEach((t) => t.dispose());
+            const [sw, sh] = sizeFor(simResolution, width, height);
+            const [dw, dh] = sizeFor(Math.min(dyeResolution, Math.max(width, height)), width, height);
+            const velocity = double(sw, sh);
+            const dye = double(dw, dh);
+            const pressure = double(sw, sh);
+            const divergence = target(sw, sh);
+            const curlT = target(sw, sh);
+            fbo = { velocity, dye, pressure, divergence, curl: curlT, all: [velocity, dye, pressure, divergence, curlT], aspect: width / height };
+            return true;
+        };
+
+        const pass = (material, out, w, h) => {
+            texel.value.set(1 / w, 1 / h);
+            quad.material = material;
+            renderer.setRenderTarget(out);
+            renderer.render(scene, camera);
+        };
+
+        const splat = (x, y, dx, dy, color) => {
+            const o = live.current;
+            const f = fbo;
+            m.splat.uniforms.aspect.value = f.aspect;
+            m.splat.uniforms.point.value.set(x, y);
+            m.splat.uniforms.radius.value = (o.splatRadius / 100) * (f.aspect > 1 ? f.aspect : 1);
+            m.splat.uniforms.uTarget.value = f.velocity.read.texture;
+            m.splat.uniforms.color.value.setRGB(dx, dy, 0);
+            pass(m.splat, f.velocity.write, f.velocity.w, f.velocity.h);
+            f.velocity.swap();
+            m.splat.uniforms.uTarget.value = f.dye.read.texture;
+            m.splat.uniforms.color.value.setRGB(color[0], color[1], color[2]);
+            pass(m.splat, f.dye.write, f.dye.w, f.dye.h);
+            f.dye.swap();
+        };
+
+        let hue = Math.random();
+        let pick = 0;
+        const nextColor = (strength = 0.3) => {
+            const list = live.current.colors;
+            if (list?.length) {
+                const c = new Color(list[pick++ % list.length]);
+                return [c.r * strength, c.g * strength, c.b * strength];
+            }
+            hue = (hue + 0.07) % 1;
+            return hsvToRgb(hue, 1, 1).map((v) => v * strength);
+        };
+
+        const step = (dt) => {
+            const o = live.current;
+            const f = fbo;
+            const { velocity, dye, pressure } = f;
+            // Swirl.
+            m.curl.uniforms.uVelocity.value = velocity.read.texture;
+            pass(m.curl, f.curl, velocity.w, velocity.h);
+            m.vorticity.uniforms.uVelocity.value = velocity.read.texture;
+            m.vorticity.uniforms.uCurl.value = f.curl.texture;
+            m.vorticity.uniforms.curl.value = o.curl;
+            m.vorticity.uniforms.dt.value = dt;
+            pass(m.vorticity, velocity.write, velocity.w, velocity.h);
+            velocity.swap();
+            // Make it incompressible.
+            m.divergence.uniforms.uVelocity.value = velocity.read.texture;
+            pass(m.divergence, f.divergence, velocity.w, velocity.h);
+            m.scale.uniforms.uTexture.value = pressure.read.texture;
+            m.scale.uniforms.value.value = 0.8;
+            pass(m.scale, pressure.write, pressure.w, pressure.h);
+            pressure.swap();
+            m.pressure.uniforms.uDivergence.value = f.divergence.texture;
+            for (let i = 0; i < 20; i++) {
+                m.pressure.uniforms.uPressure.value = pressure.read.texture;
+                pass(m.pressure, pressure.write, pressure.w, pressure.h);
+                pressure.swap();
+            }
+            m.gradient.uniforms.uPressure.value = pressure.read.texture;
+            m.gradient.uniforms.uVelocity.value = velocity.read.texture;
+            pass(m.gradient, velocity.write, velocity.w, velocity.h);
+            velocity.swap();
+            // Carry velocity and ink along.
+            m.advect.uniforms.velTexel.value.set(1 / velocity.w, 1 / velocity.h);
+            m.advect.uniforms.dt.value = dt;
+            m.advect.uniforms.uVelocity.value = velocity.read.texture;
+            m.advect.uniforms.uSource.value = velocity.read.texture;
+            m.advect.uniforms.dissipation.value = o.velocityDissipation;
+            pass(m.advect, velocity.write, velocity.w, velocity.h);
+            velocity.swap();
+            m.advect.uniforms.uVelocity.value = velocity.read.texture;
+            m.advect.uniforms.uSource.value = dye.read.texture;
+            m.advect.uniforms.dissipation.value = o.dissipation;
+            pass(m.advect, dye.write, dye.w, dye.h);
+            dye.swap();
+        };
+
+        const draw = () => {
+            m.display.uniforms.uTexture.value = fbo.dye.read.texture;
+            m.display.uniforms.dyeTexel.value.set(1 / fbo.dye.w, 1 / fbo.dye.h);
+            texel.value.set(1 / fbo.dye.w, 1 / fbo.dye.h);
+            quad.material = m.display;
+            renderer.setRenderTarget(null);
+            renderer.clear();
+            renderer.render(scene, camera);
+        };
+
+        const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+        const pointer = { x: 0, y: 0, dx: 0, dy: 0, moved: false, inside: false, color: nextColor(), lastMove: 0 };
+        let raf = 0;
+        let last = 0;
+        let visible = true;
+        let nextIdle = 0;
+
+        const frame = (now) => {
+            raf = 0;
+            const o = live.current;
+            const dt = last ? Math.min((now - last) / 1000, 0.016) : 0.016;
+            last = now;
+            if (pointer.moved) {
+                pointer.moved = false;
+                splat(pointer.x, pointer.y, pointer.dx * o.splatForce, pointer.dy * o.splatForce, pointer.color);
+            }
+            // Idle: soft splashes from the edges so the space never looks empty.
+            if (o.idle && now - pointer.lastMove > 2500 && now > nextIdle) {
+                nextIdle = now + 1400 + Math.random() * 1200;
+                const x = Math.random();
+                const y = Math.random() * 0.6 + 0.2;
+                const ang = Math.random() * Math.PI * 2;
+                splat(x, y, Math.cos(ang) * 600, Math.sin(ang) * 600, nextColor(0.35));
+            }
+            step(dt);
+            draw();
+            if (visible) raf = requestAnimationFrame(frame);
+        };
+        const start = () => {
+            if (!raf && visible && !reduced) {
+                last = 0;
+                raf = requestAnimationFrame(frame);
+            }
+        };
+
+        // Listen on the window so the layer can sit over clickable content.
+        const onMove = (e) => {
+            const r = el.getBoundingClientRect();
+            const inside = e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom;
+            if (!inside) {
+                pointer.inside = false;
+                return;
+            }
+            const x = (e.clientX - r.left) / r.width;
+            const y = 1 - (e.clientY - r.top) / r.height;
+            if (!pointer.inside) {
+                pointer.inside = true;
+                pointer.x = x;
+                pointer.y = y;
+                return;
+            }
+            pointer.dx = (x - pointer.x) * (fbo.aspect < 1 ? fbo.aspect : 1);
+            pointer.dy = (y - pointer.y) / (fbo.aspect > 1 ? fbo.aspect : 1);
+            pointer.x = x;
+            pointer.y = y;
+            pointer.moved = Math.abs(pointer.dx) + Math.abs(pointer.dy) > 0;
+            pointer.lastMove = performance.now();
+            if (Math.random() < 0.08) pointer.color = nextColor();
+        };
+        const onDown = (e) => {
+            const r = el.getBoundingClientRect();
+            if (e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom) return;
+            const x = (e.clientX - r.left) / r.width;
+            const y = 1 - (e.clientY - r.top) / r.height;
+            const c = nextColor(0.6);
+            for (let i = 0; i < 6; i++) {
+                const ang = (i / 6) * Math.PI * 2;
+                splat(x, y, Math.cos(ang) * 1400, Math.sin(ang) * 1400, c);
+            }
+            pointer.lastMove = performance.now();
+        };
+        window.addEventListener("pointermove", onMove, { passive: true });
+        window.addEventListener("pointerdown", onDown, { passive: true });
+
+        const ro = new ResizeObserver(() => {
+            if (build()) start();
+        });
+        ro.observe(el);
+        const io = new IntersectionObserver(([entry]) => {
+            visible = entry.isIntersecting;
+            if (visible) start();
+        });
+        io.observe(el);
+        if (build()) start();
+
+        return () => {
+            cancelAnimationFrame(raf);
+            ro.disconnect();
+            io.disconnect();
+            window.removeEventListener("pointermove", onMove);
+            window.removeEventListener("pointerdown", onDown);
+            fbo?.all.forEach((t) => t.dispose());
+            Object.values(m).forEach((x) => x.dispose());
+            quad.geometry.dispose();
+            renderer.dispose();
+            renderer.forceContextLoss();
+            renderer.domElement.remove();
+        };
+        // Resolutions rebuild the simulation; the rest is read live.
+    }, [simResolution, dyeResolution]);
+
+    return (
+        <div ref={wrap} className={`pointer-events-none absolute inset-0 overflow-hidden ${className}`}>
+            {children}
+        </div>
+    );
+};
+
+export default FluidCursor;

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

@@ -0,0 +1,257 @@
+import React, { useEffect, useRef } from "react";
+import { Color, Mesh, OrthographicCamera, PlaneGeometry, Scene, ShaderMaterial, TextureLoader, Vector2, WebGLRenderer } from "three";
+
+/*
+ * Sketch Reveal: one picture turns into a glowing line sketch, then a ragged,
+ * pixelated circle burns outward from the centre and reveals a second
+ * picture, with sparks along the burning edge. Drawn in one WebGL shader
+ * (edge detection + noise). Drive it with the page scroll (the section pins
+ * while it plays), with hover, on a loop, or with your own progress value.
+ *
+ * Props: from, to (image urls), mode ("scroll" | "hover" | "auto" |
+ * "manual"), progress (0..1 for manual), scrollLength (extra scroll in vh
+ * for scroll mode), stickyTop (px, e.g. your header height), edgeColor,
+ * sparkle, center ([x, y] 0..1), duration (seconds per auto loop),
+ * height, className, children (shown on top).
+ */
+
+const photo = (id) => `https://images.unsplash.com/${id}?w=1800&q=80&auto=format&fit=crop`;
+
+const VERT = `varying vec2 vUv; void main(){ vUv = uv; gl_Position = vec4(position.xy, 0.0, 1.0); }`;
+
+const FRAG = `
+precision highp float;
+varying vec2 vUv;
+uniform sampler2D uFrom; uniform sampler2D uTo; uniform vec2 uCoverFrom; uniform vec2 uCoverTo;
+uniform vec2 uRes; uniform float uProgress; uniform float uTime; uniform vec2 uCenter;
+uniform vec3 uEdge; uniform float uSparkle; uniform float uReady;
+
+float h2(vec2 p){ return fract(sin(dot(p, vec2(41.31, 289.97))) * 23758.5453); }
+float n2(vec2 p){
+  vec2 i = floor(p); vec2 f = fract(p); f = f * f * (3.0 - 2.0 * f);
+  return mix(mix(h2(i), h2(i + vec2(1, 0)), f.x), mix(h2(i + vec2(0, 1)), h2(i + vec2(1, 1)), f.x), f.y);
+}
+float fbm(vec2 p){ float v = 0.0; float a = 0.55; for (int i = 0; i < 5; i++) { v += a * n2(p); p = p * 2.07 + 3.1; a *= 0.5; } return v; }
+float luma(vec3 c){ return dot(c, vec3(0.299, 0.587, 0.114)); }
+
+vec2 coverUv(vec2 uv, vec2 k){ return (uv - 0.5) * k + 0.5; }
+
+// Edge strength from a 3x3 Sobel pass over the picture's brightness.
+float edges(vec2 uv){
+  vec2 t = 1.0 / uRes;
+  float tl = luma(texture2D(uFrom, uv + t * vec2(-1.0,  1.0)).rgb);
+  float tc = luma(texture2D(uFrom, uv + t * vec2( 0.0,  1.0)).rgb);
+  float tr = luma(texture2D(uFrom, uv + t * vec2( 1.0,  1.0)).rgb);
+  float ml = luma(texture2D(uFrom, uv + t * vec2(-1.0,  0.0)).rgb);
+  float mr = luma(texture2D(uFrom, uv + t * vec2( 1.0,  0.0)).rgb);
+  float bl = luma(texture2D(uFrom, uv + t * vec2(-1.0, -1.0)).rgb);
+  float bc = luma(texture2D(uFrom, uv + t * vec2( 0.0, -1.0)).rgb);
+  float br = luma(texture2D(uFrom, uv + t * vec2( 1.0, -1.0)).rgb);
+  float gx = -tl - 2.0 * ml - bl + tr + 2.0 * mr + br;
+  float gy = -bl - 2.0 * bc - br + tl + 2.0 * tc + tr;
+  // Keep the strong lines only, so busy textures (leaves, water) stay calm.
+  return smoothstep(0.1, 0.62, length(vec2(gx, gy)));
+}
+
+void main(){
+  vec2 uvA = coverUv(vUv, uCoverFrom);
+  vec2 uvB = coverUv(vUv, uCoverTo);
+  vec3 a = texture2D(uFrom, uvA).rgb;
+  vec3 b = texture2D(uTo, uvB).rgb;
+  float p = uProgress;
+
+  // Stage 1: the first picture drains to a dark line sketch.
+  float sketchK = smoothstep(0.0, 0.42, p);
+  float e = edges(uvA);
+  vec3 sketch = vec3(0.025) + uEdge * e * 0.92 + vec3(luma(a)) * 0.07;
+  vec3 col = mix(a, sketch, sketchK);
+
+  // Stage 2: a ragged, pixelated circle burns outward and shows the second picture.
+  float asp = uRes.x / uRes.y;
+  vec2 d = vUv - uCenter; d.x *= asp;
+  float r = length(d);
+  float maxR = length(vec2(max(uCenter.x, 1.0 - uCenter.x) * asp, max(uCenter.y, 1.0 - uCenter.y)));
+  vec2 cell = floor(gl_FragCoord.xy / 7.0);
+  float ragged = (fbm(cell * 0.09) - 0.5) * 0.22 + (fbm(vec2(atan(d.y, d.x) * 3.0, 1.7)) - 0.5) * 0.18;
+  float front = mix(-0.15, 1.22, smoothstep(0.3, 1.0, p)) * maxR;
+  float dist = r + ragged * maxR;
+  float revealed = smoothstep(front + 0.006, front - 0.006, dist);
+  col = mix(col, b, revealed);
+
+  // Burning edge: a glowing band with flickering sparks just outside the front.
+  float band = smoothstep(0.075 * maxR, 0.0, abs(dist - front)) * step(0.3, p) * (1.0 - smoothstep(0.96, 1.0, p));
+  float flick = step(0.62, h2(cell + floor(uTime * 14.0)));
+  col += uEdge * band * (0.55 + flick * 1.2 * uSparkle);
+  col += uEdge * smoothstep(0.22 * maxR, 0.0, abs(dist - front)) * 0.18 * step(0.3, p) * (1.0 - smoothstep(0.96, 1.0, p));
+
+  col = mix(vec3(0.03), col, uReady);
+  gl_FragColor = vec4(col, 1.0);
+}`;
+
+const SketchReveal = ({
+    from = photo("photo-1464822759023-fed622ff2c3b"),
+    to = photo("photo-1506905925346-21bda4d32df4"),
+    mode = "scroll",
+    progress = 0,
+    scrollLength = 150,
+    stickyTop = 0,
+    edgeColor = "#fff4d6",
+    sparkle = 1,
+    center = [0.5, 0.5],
+    duration = 6,
+    height = "100%",
+    className = "",
+    children,
+}) => {
+    const outer = useRef(null);
+    const stage = useRef(null);
+    const live = useRef({});
+    live.current = { mode, progress, edgeColor, sparkle, center, duration, stickyTop };
+
+    useEffect(() => {
+        const el = stage.current;
+        const renderer = new WebGLRenderer({ antialias: false, alpha: false, powerPreference: "high-performance" });
+        const dpr = Math.min(window.devicePixelRatio || 1, 2);
+        renderer.setPixelRatio(dpr);
+        Object.assign(renderer.domElement.style, { position: "absolute", inset: "0", width: "100%", height: "100%", display: "block" });
+        el.prepend(renderer.domElement);
+        const scene = new Scene();
+        const camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
+        const u = {
+            uFrom: { value: null },
+            uTo: { value: null },
+            uCoverFrom: { value: new Vector2(1, 1) },
+            uCoverTo: { value: new Vector2(1, 1) },
+            uRes: { value: new Vector2(1, 1) },
+            uProgress: { value: 0 },
+            uTime: { value: 0 },
+            uCenter: { value: new Vector2(0.5, 0.5) },
+            uEdge: { value: new Color() },
+            uSparkle: { value: 1 },
+            uReady: { value: 0 },
+        };
+        const material = new ShaderMaterial({ vertexShader: VERT, fragmentShader: FRAG, uniforms: u, depthTest: false, depthWrite: false });
+        const geometry = new PlaneGeometry(2, 2);
+        scene.add(new Mesh(geometry, material));
+
+        const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+        const view = { w: 1, h: 1, aspects: [1, 1] };
+        const s = { p: 0, hover: false, loaded: 0, readyAt: 0 };
+        let raf = 0;
+        let last = 0;
+        let time = 0;
+        let visible = true;
+
+        const cover = (ia) => {
+            const a = view.w / view.h;
+            return ia > a ? [a / ia, 1] : [1, ia / a];
+        };
+        const recover = () => {
+            u.uCoverFrom.value.set(...cover(view.aspects[0]));
+            u.uCoverTo.value.set(...cover(view.aspects[1]));
+        };
+        const loader = new TextureLoader().setCrossOrigin("anonymous");
+        [from, to].forEach((src, i) =>
+            loader.load(src, (t) => {
+                (i ? u.uTo : u.uFrom).value = t;
+                view.aspects[i] = t.image.width / t.image.height;
+                recover();
+                if (++s.loaded === 2) s.readyAt = performance.now();
+                start();
+            }),
+        );
+
+        const fit = () => {
+            const { width, height: hh } = el.getBoundingClientRect();
+            if (!width || !hh) return;
+            view.w = width;
+            view.h = hh;
+            renderer.setSize(width, hh, false);
+            u.uRes.value.set(width * dpr, hh * dpr);
+            recover();
+            start();
+        };
+
+        // Where the section is in its pinned scroll run, 0 to 1.
+        const scrollProgress = () => {
+            const box = outer.current.getBoundingClientRect();
+            const run = box.height - (window.innerHeight - live.current.stickyTop);
+            return run > 0 ? Math.min(1, Math.max(0, (live.current.stickyTop - box.top) / run)) : 0;
+        };
+
+        const frame = (now) => {
+            raf = 0;
+            const o = live.current;
+            const dt = last ? Math.min(0.05, (now - last) / 1000) : 1 / 60;
+            last = now;
+            time += dt;
+            let target;
+            if (o.mode === "scroll") target = scrollProgress();
+            else if (o.mode === "hover") target = s.hover ? 1 : 0;
+            else if (o.mode === "auto") target = reduced ? 1 : 0.5 - 0.5 * Math.cos((time / Math.max(1, o.duration)) * Math.PI * 2);
+            else target = Math.min(1, Math.max(0, o.progress));
+            // Ease toward the target so scroll and hover feel smooth.
+            const k = o.mode === "auto" ? 1 : 1 - Math.exp(-dt / (o.mode === "hover" ? 0.45 : 0.12));
+            s.p += (target - s.p) * k;
+            u.uProgress.value = s.p;
+            u.uTime.value = time;
+            u.uCenter.value.set(o.center[0], 1 - o.center[1]);
+            u.uEdge.value.set(o.edgeColor).convertLinearToSRGB();
+            u.uSparkle.value = o.sparkle;
+            u.uReady.value = s.readyAt ? Math.min(1, (now - s.readyAt) / 500) : 0;
+            renderer.render(scene, camera);
+            if (visible) raf = requestAnimationFrame(frame);
+            else last = 0;
+        };
+        function start() {
+            if (!raf && visible) raf = requestAnimationFrame(frame);
+        }
+
+        const onEnter = () => (s.hover = true);
+        const onLeave = () => (s.hover = false);
+        el.addEventListener("pointerenter", onEnter);
+        el.addEventListener("pointerleave", onLeave);
+        const ro = new ResizeObserver(fit);
+        ro.observe(el);
+        const io = new IntersectionObserver(([entry]) => {
+            visible = entry.isIntersecting;
+            if (visible) start();
+        });
+        io.observe(el);
+        fit();
+
+        return () => {
+            cancelAnimationFrame(raf);
+            ro.disconnect();
+            io.disconnect();
+            el.removeEventListener("pointerenter", onEnter);
+            el.removeEventListener("pointerleave", onLeave);
+            u.uFrom.value?.dispose();
+            u.uTo.value?.dispose();
+            geometry.dispose();
+            material.dispose();
+            renderer.dispose();
+            renderer.forceContextLoss();
+            renderer.domElement.remove();
+        };
+    }, [from, to]);
+
+    const inner = (
+        <div ref={stage} className={`relative w-full overflow-hidden bg-[#08080a] ${mode === "scroll" ? "" : className}`} style={mode === "scroll" ? { position: "sticky", top: stickyTop, height: `calc(100vh - ${stickyTop}px)` } : { height }}>
+            {children && <div className="pointer-events-none relative z-10 h-full w-full [&_a]:pointer-events-auto [&_button]:pointer-events-auto">{children}</div>}
+        </div>
+    );
+
+    // Scroll mode: a tall section whose inner stage pins while the reveal plays.
+    return mode === "scroll" ? (
+        <div ref={outer} className={`relative w-full ${className}`} style={{ height: `calc(100vh - ${stickyTop}px + ${scrollLength}vh)` }}>
+            {inner}
+        </div>
+    ) : (
+        <div ref={outer} className="h-full w-full">
+            {inner}
+        </div>
+    );
+};
+
+export default SketchReveal;

package/dist/cli/index.js

@@ -140,6 +140,8 @@ const componentMap = {
     "crossed-marquee": "CrossedMarquee",
     "theme-switcher": "ThemeSwitcher",
     "liquid-glass": "LiquidGlass",
+    "fluid-cursor": "FluidCursor",
+    "sketch-reveal": "SketchReveal",
     "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.9.0",
+  "version": "2.10.0",
   "license": "MIT",
-  "description": "116 free, animated UI components for React, styled with Tailwind CSS. Add any of them with one CLI command.",
+  "description": "118 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",