apex-ui-kit 2.8.0 → 2.9.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)
 
-**115 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.
+**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.
 
 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
 
-- **115 components** across backgrounds, cards, text effects, navigation, buttons, interactive UI, AI interfaces, loaders and maps.
+- **116 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 (30)
+### Interactive (31)
 
 | Component | CLI name |
 | --- | --- |
@@ -219,6 +219,7 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Image Compare](https://apex-ui.in/components/image-compare) | `image-compare` |
 | [Infinite Canvas](https://apex-ui.in/components/infinite-canvas) | `infinite-canvas` |
 | [Liquid Blob 3D](https://apex-ui.in/components/liquid-blob-3d) | `liquid-blob-3d` |
+| [Liquid Glass](https://apex-ui.in/components/liquid-glass) | `liquid-glass` |
 | [Magnet Lines](https://apex-ui.in/components/magnet-lines) | `magnet-lines` |
 | [Magnetic Cursor](https://apex-ui.in/components/magnetic-cursor) | `magnetic-cursor` |
 | [Marquee 3D](https://apex-ui.in/components/marquee-3d) | `marquee-3d` |
@@ -259,8 +260,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.8
+## What's new in 2.9
 
+- 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.
 - 38 new components since 2.6, including WebGL and three.js (Sunrise Background, Horizon Glow, Circular Carousel, Arc Gallery, Galaxy 3D, Warp Tunnel, Wireframe Knot 3D, Marquee 3D, Distortion Image, Liquid Blob 3D, Particle Morph, Retro Grid 3D), Scroll Stack, Particle Text, Edge Blur, Magnetic Button, Radial Menu, 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.

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

@@ -3,9 +3,10 @@ import { Mesh, OrthographicCamera, PlaneGeometry, Scene, ShaderMaterial, SRGBCol
 
 /*
  * Arc Gallery: an endless row of image cards laid along a gentle arc and
- * drawn in WebGL. Drag, flick or scroll the wheel to move it; it eases to a
- * stop and settles on a card. While it moves the cards ripple slightly,
- * the edges fade out, and a title sits under each card. Arrow keys step.
+ * drawn in WebGL. It drifts on its own (pausing on hover); drag, flick or
+ * swipe sideways to move it and it eases to a stop on a card. While it
+ * moves the cards ripple and bow, the edges fade out, and a title sits under
+ * each card. Arrow keys step. Vertical wheel scrolling is left to the page.
  */
 
 const IK = "https://ik.imagekit.io/ny6yinyut/apexui/assets";
@@ -54,13 +55,13 @@ void main(){
   gl_FragColor = vec4(col, edge * f * uReady);
 }`;
 
-const ArcGallery = ({ items = DEFAULT_ITEMS, bend = 1, cardHeight = 0.62, aspectRatio = 0.78, gap = 0.22, cornerRadius = 0.05, wave = 1, pull = 1, fadeEdges = 0.14, ease = 0.08, snap = true, showTitles = true, height = "26rem", onChange, className = "" }) => {
+const ArcGallery = ({ items = DEFAULT_ITEMS, bend = 1, cardHeight = 0.62, aspectRatio = 0.78, gap = 0.22, cornerRadius = 0.05, wave = 1, pull = 1, fadeEdges = 0.14, ease = 0.08, snap = true, autoScroll = 40, pauseOnHover = true, showTitles = true, height = "26rem", onChange, className = "" }) => {
     const wrap = useRef(null);
     const labels = useRef([]);
     const api = useRef(null);
     const [active, setActive] = useState(0);
     const live = useRef({});
-    live.current = { bend, wave, pull, fadeEdges, ease, snap, onChange };
+    live.current = { bend, wave, pull, fadeEdges, ease, snap, autoScroll, pauseOnHover, onChange };
     const list = items.length ? items : DEFAULT_ITEMS;
     const key = list.map((i) => i.image).join("|");
 
@@ -84,7 +85,6 @@ const ArcGallery = ({ items = DEFAULT_ITEMS, bend = 1, cardHeight = 0.62, aspect
         const textures = list.map((item) => {
             const entry = { tex: null, aspect: 1, at: 0 };
             loader.load(item.image, (t) => {
-                t.colorSpace = SRGBColorSpace;
                 entry.tex = t;
                 entry.aspect = t.image.width / t.image.height;
                 entry.at = performance.now();
@@ -116,7 +116,8 @@ const ArcGallery = ({ items = DEFAULT_ITEMS, bend = 1, cardHeight = 0.62, aspect
             return { mesh, m };
         };
 
-        const s = { scroll: 0, target: 0, vel: 0, pull: 0, drag: null, time: 0 };
+        const s = { scroll: 0, target: 0, vel: 0, pull: 0, drag: null, time: 0, hover: false, hold: 0 };
+        const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
         let cardW = 1;
         let cardH = 1;
         let spacing = 1;
@@ -172,6 +173,10 @@ const ArcGallery = ({ items = DEFAULT_ITEMS, bend = 1, cardHeight = 0.62, aspect
             const o = live.current;
             const dt = last ? Math.min(0.05, (now - last) / 1000) : 1 / 60;
             last = now;
+            // Auto scroll drifts the row along, pausing while hovered, dragged or
+            // just after someone moved it by hand.
+            const auto = o.autoScroll && !reduced && !s.drag && !(o.pauseOnHover && s.hover) && now > s.hold;
+            if (auto) s.target += o.autoScroll * dt;
             const before = s.scroll;
             const follow = 1 - Math.pow(1 - Math.min(1, Math.max(0.01, o.ease)), dt * 60);
             s.scroll += (s.target - s.scroll) * follow;
@@ -185,7 +190,7 @@ const ArcGallery = ({ items = DEFAULT_ITEMS, bend = 1, cardHeight = 0.62, aspect
             const pullGoal = Math.max(-1, Math.min(1, s.vel / (spacing * 7))) * 0.32 * o.pull;
             s.pull += (pullGoal - s.pull) * (1 - Math.exp(-dt / 0.12));
             if (Math.abs(s.pull) < 0.0005 && !pullGoal) s.pull = 0;
-            let busy = s.pull !== 0 || s.scroll !== s.target || s.vel !== 0 || !!s.drag;
+            let busy = auto || s.pull !== 0 || s.scroll !== s.target || s.vel !== 0 || !!s.drag;
 
             const first = Math.floor((s.scroll - view.w / 2) / spacing) - 1;
             slots.forEach((slot, k) => {
@@ -251,6 +256,7 @@ const ArcGallery = ({ items = DEFAULT_ITEMS, bend = 1, cardHeight = 0.62, aspect
         const onDown = (e) => {
             if (e.button !== 0) return;
             s.drag = { x: e.clientX, start: s.target, moved: false, samples: [] };
+            wake();
         };
         const onMove = (e) => {
             const g = s.drag;
@@ -269,6 +275,7 @@ const ArcGallery = ({ items = DEFAULT_ITEMS, bend = 1, cardHeight = 0.62, aspect
         const onUp = (e) => {
             const g = s.drag;
             s.drag = null;
+            s.hold = performance.now() + 1800;
             if (!g) return;
             if (g.moved && g.samples.length > 1) {
                 const a = g.samples[0];
@@ -286,10 +293,12 @@ const ArcGallery = ({ items = DEFAULT_ITEMS, bend = 1, cardHeight = 0.62, aspect
             settle();
         };
         const onWheel = (e) => {
-            const d = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
-            if (!d) return;
+            // Only sideways wheel / trackpad swipes move the row; vertical
+            // scrolling belongs to the page.
+            if (Math.abs(e.deltaX) <= Math.abs(e.deltaY)) return;
             e.preventDefault();
-            s.target += d * 1.2;
+            s.target += e.deltaX * 1.2;
+            s.hold = performance.now() + 1800;
             clearTimeout(snapTimer);
             snapTimer = setTimeout(settle, 140);
             wake();
@@ -299,6 +308,13 @@ const ArcGallery = ({ items = DEFAULT_ITEMS, bend = 1, cardHeight = 0.62, aspect
         canvas.addEventListener("pointerup", onUp);
         canvas.addEventListener("pointercancel", onUp);
         canvas.addEventListener("wheel", onWheel, { passive: false });
+        const onEnter = () => (s.hover = true);
+        const onLeave = () => {
+            s.hover = false;
+            wake();
+        };
+        canvas.addEventListener("pointerenter", onEnter);
+        canvas.addEventListener("pointerleave", onLeave);
         const io = new IntersectionObserver(([entry]) => {
             visible = entry.isIntersecting;
             wake();
@@ -316,6 +332,8 @@ const ArcGallery = ({ items = DEFAULT_ITEMS, bend = 1, cardHeight = 0.62, aspect
             canvas.removeEventListener("pointerup", onUp);
             canvas.removeEventListener("pointercancel", onUp);
             canvas.removeEventListener("wheel", onWheel);
+            canvas.removeEventListener("pointerenter", onEnter);
+            canvas.removeEventListener("pointerleave", onLeave);
             textures.forEach((t) => t.tex?.dispose());
             slots.forEach((slot) => slot.m.dispose());
             geometry.dispose();

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

@@ -124,7 +124,6 @@ const CircularCarousel = ({
                 },
             });
             loader.load(item.src, (t) => {
-                t.colorSpace = SRGBColorSpace;
                 m.uniforms.uTex.value = t;
                 const ia = t.image.width / t.image.height;
                 // Cover crop: show the middle of the image at the card's shape.

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

@@ -92,8 +92,9 @@ const FlipClock = ({ mode = "seconds", target, seconds = 3 * 86400 + 4 * 3600 +
 
     return (
         // The clock is sized in em; on narrow screens the font shrinks with the
-        // container (cqw) so every unit fits instead of being cut off.
-        <div className="flex w-full justify-center" style={{ containerType: "inline-size" }}>
+        // container (cqw) so every unit fits instead of being cut off. The min
+        // width keeps it from collapsing inside a shrink-to-fit parent.
+        <div className="flex w-full justify-center" style={{ containerType: "inline-size", minWidth: `min(${(size * parts.length * 2.55).toFixed(2)}rem, 92vw)` }}>
         <div role="timer" aria-live="off" aria-label={parts.map(([l, v]) => `${v} ${l}`).join(", ")} className={`inline-flex items-start gap-[0.35em] font-mono font-bold ${className}`} style={{ fontSize: `min(${size}rem, ${(100 / (parts.length * 2.55)).toFixed(2)}cqw)` }}>
             {parts.map(([label, value], i) => (
                 <React.Fragment key={label}>

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

@@ -6,24 +6,31 @@ function cn(...classes) {
 import React, { useRef } from "react";
 import { motion, useMotionValue, useSpring, useMotionTemplate } from "framer-motion";
 const bgHexa = 'https://ik.imagekit.io/ny6yinyut/apexui/assets/bg-hexa.jpg?tr=f-auto,q-80';
-export default function GlareCardDemo() {
-    return (
-        <GlareCard className="flex flex-col items-center justify-center bg-gradient-to-br from-gray-900 via-slate-800 to-[#181825] p-8 border border-slate-800 shadow-2xl relative overflow-hidden group group-hover:scale-100 transition-transform duration-300 ease-in-out">
-            {/* Background Image */}
-            <img
-                src={bgHexa}
-                alt="bg"
-                className="absolute inset-0 w-full h-full object-cover opacity-30 pointer-events-none select-none z-0"
-                draggable="false"
-            />
-            <div className="flex items-center justify-center w-20 h-20 rounded-md bg-gradient-to-br from-[#23233a] to-[#181825] border-2 border-[#a855f7]/60 shadow-xl mb-4 z-10 group">
-                <span className="text-5xl font-extrabold text-[#a855f7] drop-shadow-[0_2px_12px_#a855f7aa]">A</span>
-            </div>
-            <p className="text-slate-200 font-extrabold text-2xl mt-2 tracking-wide z-10">ApexUI</p>
-        </GlareCard>
-    );
-}
-
+// Shown when no children are passed (the look from the docs preview).
+const DEMO_CLASS = "flex flex-col items-center justify-center bg-gradient-to-br from-gray-900 via-slate-800 to-[#181825] p-8 border border-slate-800 shadow-2xl relative overflow-hidden group group-hover:scale-100 transition-transform duration-300 ease-in-out";
+const DemoContent = () => (
+    <>
+        <img src={bgHexa} alt="bg" className="absolute inset-0 w-full h-full object-cover opacity-30 pointer-events-none select-none z-0" draggable="false" />
+        <div className="flex items-center justify-center w-20 h-20 rounded-md bg-gradient-to-br from-[#23233a] to-[#181825] border-2 border-[#a855f7]/60 shadow-xl mb-4 z-10 group">
+            <span className="text-5xl font-extrabold text-[#a855f7] drop-shadow-[0_2px_12px_#a855f7aa]">A</span>
+        </div>
+        <p className="text-slate-200 font-extrabold text-2xl mt-2 tracking-wide z-10">ApexUI</p>
+    </>
+);
+
+// Default export: renders your children inside the card, or the demo when there are none.
+export default function GlareCardDefault({ children, className = "", ...rest }) {
+    return children ? (
+        <GlareCard className={className} {...rest}>
+            {children}
+        </GlareCard>
+    ) : (
+        <GlareCard className={`${DEMO_CLASS} ${className}`} {...rest}>
+            <DemoContent />
+        </GlareCard>
+    );
+}
+
 export function GlareCard({
     children,
     className = "",

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

@@ -126,7 +126,6 @@ const GlassLens = ({ image = DEFAULT_IMAGE, size = 9, refraction = 0.7, dispersi
             u.uCover.value.set(ia > a ? a / ia : 1, ia > a ? 1 : ia / a);
         };
         new TextureLoader().setCrossOrigin("anonymous").load(image, (t) => {
-            t.colorSpace = SRGBColorSpace;
             u.uTex.value = t;
             view.imgAspect = t.image.width / t.image.height;
             cover();

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

@@ -0,0 +1,444 @@
+import React, { useEffect, useRef } from "react";
+import { Color, Mesh, OrthographicCamera, PlaneGeometry, Scene, ShaderMaterial, TextureLoader, Vector2, Vector4, WebGLRenderer } from "three";
+import { CloudSun, Compass, Home, Music2, Plus, Search, User } from "lucide-react";
+
+/*
+ * Liquid Glass: iOS style glass panels over a wallpaper, drawn in one WebGL
+ * shader. Each panel bends the picture at its rounded edges, frosts it a
+ * little inside, splits colours along the rim and catches a specular edge
+ * light. Panels are draggable, wobble like jelly while they move, and melt
+ * into each other when they get close. Content inside each panel is plain
+ * HTML that rides along with it.
+ *
+ * Props: items ({ id, x, y, offset?, width, maxWidth?, height, radius, content }[],
+ * up to 4; x / y place the centre as 0..1 of the box, offset nudges x in px,
+ * a width of 1 or less is a share of the box width), children (shown under
+ * the glass, e.g. hero text), image (wallpaper; a soft animated gradient when empty),
+ * refraction, frost, chroma, vibrancy, tint, tintAmount, merge (px of liquid
+ * blending),
+ * draggable, height, className.
+ */
+
+const VERT = `void main(){ gl_Position = vec4(position.xy, 0.0, 1.0); }`;
+
+const FRAG = `
+precision highp float;
+uniform vec2 uRes; uniform float uTime; uniform float uDpr;
+uniform sampler2D uTex; uniform float uHasTex; uniform vec2 uCover;
+uniform vec4 uBox[4]; uniform float uRad[4]; uniform float uCount;
+uniform float uRefract; uniform float uFrost; uniform float uChroma; uniform vec3 uTint; uniform float uTintAmt; uniform float uMerge;
+uniform vec2 uLight; uniform float uVibrancy;
+
+float sdBox(vec2 p, vec2 b, float r){ vec2 q = abs(p) - b + r; return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - r; }
+float smin(float a, float b, float k){ float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0); return mix(b, a, h) - k * h * (1.0 - h); }
+
+float scene(vec2 p){
+  float d = 1e5;
+  for (int i = 0; i < 4; i++) {
+    if (float(i) >= uCount) break;
+    float s = sdBox(p - uBox[i].xy, uBox[i].zw, uRad[i]);
+    d = smin(d, s, max(uMerge, 0.001));
+  }
+  return d;
+}
+
+// Half-size (shorter side) of the panel closest to p, for a bevel that suits it.
+float nearestSize(vec2 p){
+  float best = 1e5; float size = 30.0;
+  for (int i = 0; i < 4; i++) {
+    if (float(i) >= uCount) break;
+    float s = sdBox(p - uBox[i].xy, uBox[i].zw, uRad[i]);
+    if (s < best) { best = s; size = min(uBox[i].z, uBox[i].w); }
+  }
+  return size;
+}
+
+// Default wallpaper: drifting colour blobs with fine stripes so the bending shows.
+vec3 wallpaper(vec2 uv){
+  float t = uTime * 0.06;
+  vec2 a = vec2(0.25 + 0.15 * sin(t * 2.1), 0.3 + 0.2 * cos(t * 1.7));
+  vec2 b = vec2(0.75 + 0.12 * cos(t * 1.3), 0.65 + 0.15 * sin(t * 2.3));
+  vec2 c = vec2(0.5 + 0.25 * sin(t * 0.9 + 2.0), 0.15 + 0.1 * cos(t * 1.1));
+  vec2 asp = vec2(uRes.x / uRes.y, 1.0);
+  vec3 col = vec3(0.06, 0.07, 0.12);
+  col += vec3(1.0, 0.36, 0.42) * exp(-length((uv - a) * asp) * 3.2) * 0.95;
+  col += vec3(0.25, 0.45, 1.0) * exp(-length((uv - b) * asp) * 2.8) * 0.95;
+  col += vec3(1.0, 0.75, 0.25) * exp(-length((uv - c) * asp) * 3.6) * 0.8;
+  float stripes = smoothstep(0.35, 0.5, abs(fract((uv.x * asp.x + uv.y) * 14.0) - 0.5));
+  col *= 0.88 + 0.12 * stripes;
+  return col;
+}
+
+vec3 bg(vec2 px){
+  vec2 uv = px / uRes;
+  if (uHasTex > 0.5) return texture2D(uTex, (uv - 0.5) * uCover + 0.5).rgb;
+  return wallpaper(uv);
+}
+
+void main(){
+  vec2 p = gl_FragCoord.xy;
+  float d = scene(p);
+  vec3 base = bg(p);
+
+  // Two soft shadows under the glass: a tight contact one and a wide ambient one.
+  float sd = scene(p + vec2(0.0, 6.0 * uDpr));
+  float sd2 = scene(p + vec2(0.0, 18.0 * uDpr));
+  float outside = step(0.0, d);
+  vec3 col = base * (1.0 - outside * (0.22 * exp(-max(sd, 0.0) / (8.0 * uDpr)) + 0.18 * exp(-max(sd2, 0.0) / (34.0 * uDpr))));
+
+  if (d < 1.5 * uDpr) {
+    vec2 e = vec2(1.0, 0.0);
+    vec2 n = normalize(vec2(scene(p + e.xy) - scene(p - e.xy), scene(p + e.yx) - scene(p - e.yx)) + 1e-6);
+    // The rim curves over about half of the short side, like a real slab of glass.
+    float bevel = clamp(nearestSize(p) * 0.55, 10.0 * uDpr, 34.0 * uDpr);
+    float depth = clamp(-d / bevel, 0.0, 1.0);       // 0 at the rim, 1 on the flat top
+    // A rounded edge profile: the steeper the surface, the more it bends light.
+    float x = 1.0 - depth;
+    float h = sqrt(max(1.0 - x * x, 0.0));
+    float slope = x / max(h, 0.08);
+    vec2 off = n * min(slope, 6.0) * uRefract * bevel * 0.32;
+    vec3 g = vec3(0.0);
+    float f = uFrost * 5.0 * uDpr;
+    for (int i = 0; i < 9; i++) {
+      float a = float(i) * 2.399;
+      vec2 o = f > 0.0 ? vec2(cos(a), sin(a)) * f * sqrt(float(i) / 9.0) : vec2(0.0);
+      vec2 q = p + off + o;
+      vec2 ch = n * x * x * uChroma * 2.5 * uDpr;
+      g += vec3(bg(q + ch).r, bg(q).g, bg(q - ch).b);
+    }
+    g /= 9.0;
+    // Vibrancy: what shows through gets a little richer and brighter.
+    float luma = dot(g, vec3(0.299, 0.587, 0.114));
+    g = mix(vec3(luma), g, 1.0 + 0.35 * uVibrancy) * (1.0 + 0.07 * uVibrancy) + 0.02 * uVibrancy;
+    g = mix(g, uTint, uTintAmt);
+
+    // Light follows the pointer, like tilting a phone.
+    vec2 L = normalize(uLight);
+    float facing = max(dot(n, L), 0.0);
+    float away = max(dot(n, -L), 0.0);
+    // Fresnel: the curved edge reflects more than the flat top.
+    g = mix(g, vec3(1.0), pow(x, 3.0) * 0.18);
+    // A crisp specular line on the rim, strongest facing the light, with a
+    // fainter bounce on the opposite edge.
+    float line = smoothstep(1.6 * uDpr, 0.0, abs(d + 0.9 * uDpr));
+    g += line * (0.75 * pow(facing, 1.5) + 0.32 * pow(away, 2.0) + 0.06);
+    // A broad glint just inside the lit edge.
+    g += smoothstep(0.55, 1.0, x) * pow(facing, 3.0) * 0.22;
+    // Inner shadow along the far edge gives the slab some thickness.
+    g *= 1.0 - smoothstep(0.6, 1.0, x) * pow(away, 1.5) * 0.18;
+    float mask = smoothstep(0.75 * uDpr, -0.75 * uDpr, d);
+    col = mix(col, g, mask);
+  }
+  gl_FragColor = vec4(col, 1.0);
+}`;
+
+const Tab = ({ icon: Icon, label, active }) => (
+    <span className={`flex flex-1 flex-col items-center gap-0.5 rounded-full py-1.5 text-[0.62rem] font-semibold ${active ? "bg-white/25 text-white" : "text-white/85"}`}>
+        <Icon className="h-[18px] w-[18px]" strokeWidth={2.2} />
+        {label}
+    </span>
+);
+
+const DEFAULT_ITEMS = [
+    {
+        id: "bar",
+        x: 0.5,
+        y: 0.84,
+        width: 300,
+        height: 62,
+        radius: 31,
+        offset: -36,
+        content: (
+            <div className="flex h-full items-center gap-1 px-2">
+                <Tab icon={Home} label="Home" active />
+                <Tab icon={Compass} label="Explore" />
+                <Tab icon={Music2} label="Music" />
+                <Tab icon={User} label="Profile" />
+            </div>
+        ),
+    },
+    {
+        id: "search",
+        x: 0.5,
+        y: 0.84,
+        width: 62,
+        height: 62,
+        radius: 31,
+        offset: 155,
+        content: (
+            <div className="grid h-full place-items-center text-white">
+                <Search className="h-5 w-5" strokeWidth={2.4} />
+            </div>
+        ),
+    },
+    {
+        id: "widget",
+        x: 0.3,
+        y: 0.3,
+        width: 170,
+        height: 150,
+        radius: 34,
+        content: (
+            <div className="flex h-full flex-col justify-between p-4 text-white">
+                <div className="flex items-center justify-between text-xs font-semibold text-white/85">
+                    Cupertino <CloudSun className="h-5 w-5" />
+                </div>
+                <div>
+                    <p className="text-4xl font-light leading-none">24°</p>
+                    <p className="mt-1 text-[0.7rem] text-white/80">Partly cloudy · H 27° L 18°</p>
+                </div>
+            </div>
+        ),
+    },
+    {
+        id: "add",
+        x: 0.74,
+        y: 0.3,
+        width: 64,
+        height: 64,
+        radius: 22,
+        content: (
+            <div className="grid h-full place-items-center text-white">
+                <Plus className="h-6 w-6" strokeWidth={2.4} />
+            </div>
+        ),
+    },
+];
+
+const LiquidGlass = ({ items = DEFAULT_ITEMS, children, image, refraction = 1, frost = 0.2, chroma = 1, vibrancy = 1, tint = "#ffffff", tintAmount = 0.06, merge = 18, draggable = true, height = "32rem", className = "" }) => {
+    const wrap = useRef(null);
+    const panels = useRef([]);
+    const live = useRef({});
+    live.current = { refraction, frost, chroma, vibrancy, tint, tintAmount, merge, draggable };
+    const list = items.slice(0, 4);
+
+    useEffect(() => {
+        const el = wrap.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 = {
+            uRes: { value: new Vector2(1, 1) },
+            uTime: { value: 0 },
+            uDpr: { value: dpr },
+            uTex: { value: null },
+            uHasTex: { value: 0 },
+            uCover: { value: new Vector2(1, 1) },
+            uBox: { value: Array.from({ length: 4 }, () => new Vector4()) },
+            uRad: { value: [0, 0, 0, 0] },
+            uCount: { value: 0 },
+            uRefract: { value: 1 },
+            uFrost: { value: 0.2 },
+            uLight: { value: new Vector2(-0.6, 0.8) },
+            uVibrancy: { value: 1 },
+            uChroma: { value: 1 },
+            uTint: { value: new Color(1, 1, 1) },
+            uTintAmt: { value: 0.08 },
+            uMerge: { value: 18 },
+        };
+        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, imgAspect: 1 };
+        // Panel state in CSS px: target (tx, ty), spring position, velocity, press.
+        const st = list.map((it) => ({ it, tx: 0, ty: 0, x: 0, y: 0, vx: 0, vy: 0, press: 0, moved: false, placed: false }));
+        let raf = 0;
+        let last = 0;
+        let time = 0;
+        let visible = true;
+        let drag = null;
+        const light = { x: -0.6, y: 0.8, on: false };
+
+        const scaleFor = () => Math.min(1, (view.w - 24) / 360);
+        const place = () => {
+            const s = scaleFor();
+            st.forEach((p) => {
+                if (p.moved && p.placed) return;
+                p.tx = view.w * p.it.x + (p.it.offset ?? 0) * s;
+                p.ty = view.h * p.it.y;
+                if (!p.placed) {
+                    p.x = p.tx;
+                    p.y = p.ty;
+                    p.placed = true;
+                }
+            });
+        };
+        const cover = () => {
+            const a = view.w / view.h;
+            const ia = view.imgAspect;
+            u.uCover.value.set(ia > a ? a / ia : 1, ia > a ? 1 : ia / a);
+        };
+        if (image) {
+            new TextureLoader().setCrossOrigin("anonymous").load(image, (t) => {
+                u.uTex.value = t;
+                u.uHasTex.value = 1;
+                view.imgAspect = t.image.width / t.image.height;
+                cover();
+                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);
+            cover();
+            place();
+            start();
+        };
+
+        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;
+            const s = scaleFor();
+            let busy = !u.uHasTex.value && !reduced; // the default wallpaper drifts
+            st.forEach((p, i) => {
+                // Jelly spring: a little underdamped so panels wobble into place.
+                const k = 260;
+                const c = 2 * Math.sqrt(k) * 0.62;
+                p.vx += (k * (p.tx - p.x) - c * p.vx) * dt;
+                p.vy += (k * (p.ty - p.y) - c * p.vy) * dt;
+                p.x += p.vx * dt;
+                p.y += p.vy * dt;
+                p.press += ((drag?.i === i ? 1 : 0) - p.press) * (1 - Math.exp(-dt / 0.08));
+                const speed = Math.hypot(p.vx, p.vy);
+                if (speed > 0.5 || Math.abs(p.tx - p.x) > 0.2 || Math.abs(p.ty - p.y) > 0.2 || Math.abs(p.press - (drag?.i === i ? 1 : 0)) > 0.01) busy = true;
+                // Stretch along the motion, squash across it; grow a touch while held.
+                const sx = 1 + Math.min(0.18, Math.abs(p.vx) / 4000) - Math.min(0.1, Math.abs(p.vy) / 6000);
+                const sy = 1 + Math.min(0.18, Math.abs(p.vy) / 4000) - Math.min(0.1, Math.abs(p.vx) / 6000);
+                const grow = 1 + p.press * 0.06;
+                // A width of 1 or less is a share of the box (handy for nav bars).
+                const baseW = Math.min(p.it.width <= 1 ? p.it.width * view.w : p.it.width * s, p.it.maxWidth ?? Infinity);
+                const hw = (baseW * sx * grow) / 2;
+                const hh = (p.it.height * s * sy * grow) / 2;
+                u.uBox.value[i].set(p.x * dpr, (view.h - p.y) * dpr, hw * dpr, hh * dpr);
+                u.uRad.value[i] = Math.min(p.it.radius * s * grow, hw, hh) * dpr;
+                const node = panels.current[i];
+                if (node) {
+                    node.style.width = `${hw * 2}px`;
+                    node.style.height = `${hh * 2}px`;
+                    node.style.transform = `translate3d(${(p.x - hw).toFixed(2)}px, ${(p.y - hh).toFixed(2)}px, 0)`;
+                }
+            });
+            u.uCount.value = st.length;
+            // Ease the light toward the pointer direction from the centre.
+            const lv = u.uLight.value;
+            const lx = light.on ? light.x : -0.6;
+            const ly = light.on ? light.y : 0.8;
+            lv.set(lv.x + (lx - lv.x) * (1 - Math.exp(-dt / 0.25)), lv.y + (ly - lv.y) * (1 - Math.exp(-dt / 0.25)));
+            if (Math.abs(lx - lv.x) + Math.abs(ly - lv.y) > 0.002) busy = true;
+            u.uVibrancy.value = o.vibrancy;
+            u.uTime.value = time;
+            u.uRefract.value = o.refraction;
+            u.uFrost.value = o.frost;
+            u.uChroma.value = o.chroma;
+            u.uTint.value.set(o.tint).convertLinearToSRGB();
+            u.uTintAmt.value = o.tintAmount;
+            u.uMerge.value = o.merge * dpr;
+            renderer.render(scene, camera);
+            if (visible && busy) raf = requestAnimationFrame(frame);
+            else last = 0;
+        };
+        function start() {
+            if (!raf && visible) raf = requestAnimationFrame(frame);
+        }
+
+        const local = (e) => {
+            const r = el.getBoundingClientRect();
+            return [e.clientX - r.left, e.clientY - r.top];
+        };
+        const onDown = (e) => {
+            if (!live.current.draggable) return;
+            const node = e.target.closest("[data-glass]");
+            if (!node) return;
+            e.preventDefault();
+            const i = Number(node.dataset.glass);
+            const [x, y] = local(e);
+            drag = { i, dx: st[i].tx - x, dy: st[i].ty - y };
+            el.setPointerCapture(e.pointerId);
+            start();
+        };
+        const onMove = (e) => {
+            const [x, y] = local(e);
+            // The light comes from where the pointer is, relative to the centre.
+            const lx = x - view.w / 2;
+            const ly = view.h / 2 - y;
+            const len = Math.hypot(lx, ly) || 1;
+            light.x = lx / len;
+            light.y = ly / len;
+            light.on = true;
+            start();
+            if (!drag) return;
+            const p = st[drag.i];
+            p.tx = Math.max(0, Math.min(view.w, x + drag.dx));
+            p.ty = Math.max(0, Math.min(view.h, y + drag.dy));
+            p.moved = true;
+            start();
+        };
+        const onUp = () => {
+            drag = null;
+            start();
+        };
+        el.addEventListener("pointerdown", onDown);
+        el.addEventListener("pointermove", onMove);
+        el.addEventListener("pointerup", onUp);
+        el.addEventListener("pointercancel", onUp);
+        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("pointerdown", onDown);
+            el.removeEventListener("pointermove", onMove);
+            el.removeEventListener("pointerup", onUp);
+            el.removeEventListener("pointercancel", onUp);
+            u.uTex.value?.dispose();
+            geometry.dispose();
+            material.dispose();
+            renderer.dispose();
+            renderer.forceContextLoss();
+            renderer.domElement.remove();
+        };
+        // Rebuild when the panels or the wallpaper change; the look is live.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [image, list.length]);
+
+    return (
+        <div ref={wrap} className={`relative w-full select-none overflow-hidden bg-[#0f1220] ${draggable ? "touch-none" : ""} ${className}`} style={{ height }}>
+            {children && <div className="pointer-events-none absolute inset-0 z-[5] [&_a]:pointer-events-auto [&_button]:pointer-events-auto">{children}</div>}
+            {list.map((it, i) => (
+                <div
+                    key={it.id ?? i}
+                    ref={(e) => (panels.current[i] = e)}
+                    data-glass={i}
+                    className={`absolute left-0 top-0 z-10 overflow-hidden [text-shadow:0_1px_2px_rgba(0,0,0,0.25)] ${draggable ? "cursor-grab active:cursor-grabbing" : ""}`}
+                    style={{ borderRadius: it.radius }}
+                >
+                    {it.content}
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default LiquidGlass;

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

@@ -5,8 +5,8 @@ import React, { Children, useLayoutEffect, useRef } from "react";
  * card that gets covered shrinks a little, darkens and (optionally) blurs or
  * leans back, so the pile reads as depth. It rides on native scrolling
  * (position: sticky + one rAF update per scroll), so it stays smooth with
- * mouse, trackpad, touch and keyboard. Scrolls inside its own box, or with
- * the page (useWindowScroll).
+ * mouse, trackpad, touch and keyboard. By default it stacks with the page
+ * scroll; set useWindowScroll={false} to stack inside its own scroll box.
  */
 
 export const ScrollStackItem = ({ children, className = "", style }) => (
@@ -16,7 +16,7 @@ export const ScrollStackItem = ({ children, className = "", style }) => (
     </div>
 );
 
-const ScrollStack = ({ children, gap = 90, offset = 22, top = 64, scaleStep = 0.05, minScale = 0.82, dim = 0.22, blur = 0, tilt = 0, endSpace = 180, useWindowScroll = false, height = "100%", className = "" }) => {
+const ScrollStack = ({ children, gap = 90, offset = 22, top = 64, scaleStep = 0.05, minScale = 0.82, dim = 0.22, blur = 0, tilt = 0, endSpace = 180, useWindowScroll = true, height = "100%", className = "" }) => {
     const root = useRef(null);
     const slots = useRef([]);
     const items = Children.toArray(children);

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,7 @@ const componentMap = {
     "command-palette": "CommandPalette",
     "crossed-marquee": "CrossedMarquee",
     "theme-switcher": "ThemeSwitcher",
+    "liquid-glass": "LiquidGlass",
     "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.9.0",
   "license": "MIT",
-  "description": "115 free, animated UI components for React, styled with Tailwind CSS. Add any of them with one CLI command.",
+  "description": "116 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",