apex-ui-kit 2.8.0 → 2.10.0

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/ApexUI-Kit/templates/SunriseBackground/SunriseBackground.jsx

@@ -23,6 +23,7 @@ precision highp float;
 uniform vec2 uRes; uniform float uTime; uniform float uRise; uniform vec2 uMouse;
 uniform vec3 uSun; uniform vec3 uSkyTop; uniform vec3 uSkyLow; uniform vec3 uMount;
 uniform float uRays; uniform float uStars; uniform float uHaze; uniform float uSunSize; uniform float uSunHeight;
+uniform float uTrees; uniform float uBirds;
 
 float h1(float x){ return fract(sin(x * 127.1) * 43758.5453); }
 float h2(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
@@ -47,6 +48,23 @@ float range(float x, float c, float w, float peak, float base, float amp, float
   return base + s * peak + (crag(x * freq + seed) - 0.45) * amp * (0.35 + s);
 }
 
+// A pine silhouette: three stacked tiers, each wider at its base, on a short trunk.
+// dx / dy are measured from the foot of the tree, h is its height (all in screen units).
+float pine(float dx, float dy, float h){
+  if (h <= 0.0) return 0.0;
+  float t = dy / h;
+  if (t < 0.0 || t > 1.0) return 0.0;
+  float aa = 0.0015;
+  float trunk = smoothstep(h * 0.035 + aa, h * 0.035 - aa, abs(dx)) * step(t, 0.14);
+  float tiers = 3.0;
+  float k = floor(min((t - 0.1) / 0.9, 0.999) * tiers);
+  float local = fract(min((t - 0.1) / 0.9, 0.999) * tiers);
+  float base = 0.36 * h * (1.0 - k / tiers * 0.62);
+  float w = base * (1.0 - local * 0.78);
+  float crown = smoothstep(w + aa, w - aa, abs(dx)) * step(0.1, t);
+  return max(trunk, crown);
+}
+
 void main(){
   vec2 uv = gl_FragCoord.xy / uRes;
   float asp = uRes.x / uRes.y;
@@ -114,6 +132,46 @@ void main(){
   cn += uSun * exp(-max(hn - y, 0.0) * 120.0) * toSun * 0.9;
   col = mix(col, cn, mn);
 
+  // Pines along the near ridge, thinning out toward the valley so the sun stays clear.
+  // Sizes are in screen-height units so a tree keeps its shape on any screen.
+  float unit = 0.5 * clamp(asp, 0.7, 2.2);       // one xn unit in height units
+  float tx = (xn + mx * 0.05) * 26.0;
+  float tcell = floor(tx);
+  float cellW = unit / 26.0;
+  float jitter = (h1(tcell + 1.9) - 0.5) * 0.3;
+  float dx = (fract(tx) - 0.5 - jitter) * cellW;
+  float pres = step(0.3, h1(tcell + 3.1)) * smoothstep(0.1, 0.42, abs(xn));
+  float ht = min(0.022 + 0.04 * h1(tcell + 7.7), cellW * 1.25) * pres * uTrees;
+  float trees = pine(dx, y - hn + 0.004, ht);
+  col = mix(col, uMount * 0.6 + uSun * toSun * 0.05, trees * (1.0 - mn));
+
+  // A few big pines framing the bottom corners.
+  float tx2 = (xn + mx * 0.08) * 6.0;
+  float cell2 = floor(tx2);
+  float cellW2 = unit / 6.0;
+  float dx2 = (fract(tx2) - 0.5) * cellW2;
+  float ht2 = min(0.16 + 0.1 * h1(cell2 + 1.3), cellW2 * 1.3) * step(0.35, h1(cell2 + 4.4)) * smoothstep(0.62, 0.78, abs(xn)) * uTrees;
+  col = mix(col, uMount * 0.38, pine(dx2, y + 0.015, ht2));
+
+  // A small flock crossing the sky, wings flapping out of step.
+  if (uBirds > 0.0) {
+    float lap = fract(uTime * 0.03 + 0.38);
+    vec2 flock = vec2(mix(-asp * 0.5 - 0.25, asp * 0.5 + 0.25, lap), 0.66 + 0.035 * sin(uTime * 0.31));
+    for (int i = 0; i < 7; i++) {
+      float fi = float(i);
+      if (fi >= uBirds * 7.0) break;
+      float side = mod(fi, 2.0) * 2.0 - 1.0;
+      float rank = floor((fi + 1.0) / 2.0);
+      vec2 bpos = flock + vec2(-rank * 0.045, -rank * 0.022 * side) + vec2(0.006 * sin(uTime * 1.3 + fi), 0.008 * sin(uTime * 0.9 + fi * 1.7));
+      float size = 0.016 * (1.0 - rank * 0.08);
+      vec2 r = q - bpos;
+      float flap = 0.15 + 0.75 * (0.5 + 0.5 * sin(uTime * 9.0 + fi * 1.9));
+      float dist = abs(r.y - abs(r.x) * flap + size * 0.15) - 0.0006;
+      float bird = smoothstep(0.0024, 0.0008, dist) * step(abs(r.x), size);
+      col = mix(col, uMount * 0.45, bird * smoothstep(0.2, 0.5, rise));
+    }
+  }
+
   // Low fog over everything and light bleeding over the ridges.
   col += haze * exp(-y * 7.0) * 0.12 * uHaze * rise;
   col += uSun * exp(-d * 3.0) * 0.18 * rise;
@@ -132,7 +190,9 @@ const SunriseBackground = ({
     mountainColor,
     duration = 6,
     autoRise = true,
-    sunHeight = 0.36,
+    sunHeight = 0.28,
+    trees = true,
+    birds = 1,
     sunSize = 0.075,
     rays = 1,
     stars = 1,
@@ -158,6 +218,8 @@ const SunriseBackground = ({
         rays,
         stars,
         haze,
+        trees,
+        birds,
         speed,
         interactive,
     };
@@ -189,7 +251,9 @@ const SunriseBackground = ({
             uStars: { value: 1 },
             uHaze: { value: 1 },
             uSunSize: { value: 0.075 },
-            uSunHeight: { value: 0.3 },
+            uSunHeight: { value: 0.28 },
+            uTrees: { value: 1 },
+            uBirds: { value: 1 },
         };
         const material = new ShaderMaterial({ vertexShader: VERT, fragmentShader: FRAG, uniforms: u, depthTest: false, depthWrite: false });
         const geometry = new PlaneGeometry(2, 2);
@@ -229,6 +293,8 @@ const SunriseBackground = ({
             u.uRays.value = o.rays;
             u.uStars.value = o.stars;
             u.uHaze.value = o.haze;
+            u.uTrees.value = o.trees ? 1 : 0;
+            u.uBirds.value = reduced ? 0 : Math.max(0, Math.min(1, o.birds));
             u.uSunSize.value = o.sunSize;
             u.uSunHeight.value = o.sunHeight;
             renderer.render(scene, camera);

package/dist/cli/index.js

@@ -139,6 +139,9 @@ const componentMap = {
     "command-palette": "CommandPalette",
     "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.8.0",
+  "version": "2.10.0",
   "license": "MIT",
-  "description": "115 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",