apex-ui-kit 2.1.2 → 2.2.0

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

@@ -0,0 +1,221 @@
+import React, { useEffect, useRef, useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import { MessageCircle, Pause, Phone, PhoneOff, Play, SkipBack, SkipForward, Timer } from "lucide-react";
+
+/*
+ * Dynamic Island: a black capsule that morphs between live activities —
+ * idle, music, call, timer and notification. Click the music view to expand
+ * it. Runs through the views on its own, or follows a controlled `view`.
+ */
+
+const IK = "https://ik.imagekit.io/ny6yinyut/apexui/assets";
+const ALL_VIEWS = ["idle", "music", "call", "timer", "notification"];
+
+// Capsule size per view, in rem so it scales with the page's font size.
+const SIZES = {
+    idle: { width: "7.5rem", height: "2.1rem", borderRadius: "1.05rem" },
+    music: { width: "17rem", height: "2.6rem", borderRadius: "1.3rem" },
+    musicExpanded: { width: "22rem", height: "11.25rem", borderRadius: "2.4rem" },
+    call: { width: "22rem", height: "4.6rem", borderRadius: "2.3rem" },
+    timer: { width: "14rem", height: "2.6rem", borderRadius: "1.3rem" },
+    notification: { width: "22rem", height: "4.6rem", borderRadius: "2.3rem" },
+};
+
+const spring = { type: "spring", stiffness: 380, damping: 32, mass: 0.9 };
+
+const formatTime = (s) => `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
+
+function Waveform({ color, playing, moving }) {
+    const bars = [0.55, 1, 0.7, 0.9, 0.45];
+    return (
+        <span className="flex h-4 items-center gap-[3px]" aria-hidden="true">
+            {bars.map((peak, i) => (
+                <motion.span
+                    key={i}
+                    className="w-[3px] origin-center rounded-full"
+                    style={{ backgroundColor: color, height: "100%" }}
+                    animate={playing && moving ? { scaleY: [0.3, peak, 0.4, peak * 0.8, 0.3] } : { scaleY: 0.3 }}
+                    transition={playing && moving ? { duration: 0.9 + i * 0.12, repeat: Infinity, ease: "easeInOut" } : { duration: 0.3 }}
+                />
+            ))}
+        </span>
+    );
+}
+
+const DynamicIsland = ({
+    view,
+    defaultView = "music",
+    views = ALL_VIEWS,
+    autoPlay = true,
+    interval = 3600,
+    accentColor = "#a3e635",
+    music = { title: "Midnight City", artist: "Apex Sessions", cover: `${IK}/spiderman.png?tr=f-auto,q-80,w-200` },
+    call = { name: "Tony Stark", subtitle: "Mobile", avatar: `${IK}/ironman.png?tr=f-auto,q-80,w-160` },
+    notification = { app: "Messages", title: "Peter Parker", message: "On my way — saving the city first 🕷️" },
+    timerSeconds = 300,
+    onViewChange,
+    className = "",
+}) => {
+    const controlled = view !== undefined;
+    const [ownView, setOwnView] = useState(views.includes(defaultView) ? defaultView : views[0]);
+    const current = controlled ? view : ownView;
+    const [expanded, setExpanded] = useState(false);
+    const [playing, setPlaying] = useState(true);
+    const [hovered, setHovered] = useState(false);
+    const [remaining, setRemaining] = useState(timerSeconds);
+    const moving = !useReducedMotion();
+    const onViewChangeRef = useRef(onViewChange);
+    onViewChangeRef.current = onViewChange;
+
+    // Cycle through the views on its own (uncontrolled), pausing while hovered or expanded.
+    useEffect(() => {
+        if (controlled || !autoPlay || hovered || expanded || views.length < 2) return undefined;
+        const id = setTimeout(() => {
+            setOwnView((v) => {
+                const next = views[(views.indexOf(v) + 1) % views.length];
+                onViewChangeRef.current?.(next);
+                return next;
+            });
+        }, interval);
+        return () => clearTimeout(id);
+    }, [controlled, autoPlay, hovered, expanded, views, interval, ownView]);
+
+    // A new view always starts compact.
+    useEffect(() => setExpanded(false), [current]);
+
+    // Live countdown while the timer is showing.
+    useEffect(() => {
+        if (current !== "timer") return undefined;
+        const id = setInterval(() => setRemaining((s) => (s > 0 ? s - 1 : timerSeconds)), 1000);
+        return () => clearInterval(id);
+    }, [current, timerSeconds]);
+
+    const sizeKey = current === "music" && expanded ? "musicExpanded" : current;
+    const size = SIZES[sizeKey] ?? SIZES.idle;
+    const canExpand = current === "music";
+
+    const content = {
+        idle: <span className="sr-only">Idle</span>,
+        music: (
+            <div className="flex h-full w-full items-center justify-between pl-1.5 pr-4">
+                <img src={music.cover} alt="" className="h-[1.85rem] w-[1.85rem] rounded-full object-cover" draggable="false" />
+                <span className="sr-only">Now playing {music.title} by {music.artist}</span>
+                <Waveform color={accentColor} playing={playing} moving={moving} />
+            </div>
+        ),
+        musicExpanded: (
+            <div className="flex h-full w-full flex-col justify-between p-5">
+                <div className="flex items-center gap-3.5">
+                    <img src={music.cover} alt="" className="h-14 w-14 rounded-2xl object-cover" draggable="false" />
+                    <div className="min-w-0 flex-1">
+                        <p className="truncate text-[0.95rem] font-semibold">{music.title}</p>
+                        <p className="truncate text-[0.8rem] text-white/50">{music.artist}</p>
+                    </div>
+                    <Waveform color={accentColor} playing={playing} moving={moving} />
+                </div>
+                <div>
+                    <div className="h-1 overflow-hidden rounded-full bg-white/15">
+                        <motion.div
+                            className="h-full rounded-full"
+                            style={{ backgroundColor: accentColor }}
+                            initial={{ width: "32%" }}
+                            animate={{ width: playing && moving ? "78%" : "32%" }}
+                            transition={{ duration: playing && moving ? 20 : 0.3, ease: "linear" }}
+                        />
+                    </div>
+                    <div className="mt-3 flex items-center justify-center gap-7">
+                        <button type="button" aria-label="Previous" onClick={(e) => e.stopPropagation()} className="text-white/70 transition hover:text-white">
+                            <SkipBack className="h-5 w-5" fill="currentColor" />
+                        </button>
+                        <button
+                            type="button"
+                            aria-label={playing ? "Pause" : "Play"}
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                setPlaying((p) => !p);
+                            }}
+                            className="text-white transition hover:scale-105"
+                        >
+                            {playing ? <Pause className="h-7 w-7" fill="currentColor" /> : <Play className="h-7 w-7" fill="currentColor" />}
+                        </button>
+                        <button type="button" aria-label="Next" onClick={(e) => e.stopPropagation()} className="text-white/70 transition hover:text-white">
+                            <SkipForward className="h-5 w-5" fill="currentColor" />
+                        </button>
+                    </div>
+                </div>
+            </div>
+        ),
+        call: (
+            <div className="flex h-full w-full items-center gap-3 pl-2.5 pr-2.5">
+                <img src={call.avatar} alt="" className="h-[3.4rem] w-[3.4rem] rounded-full object-cover" draggable="false" />
+                <div className="min-w-0 flex-1">
+                    <p className="truncate text-[0.72rem] text-white/50">{call.subtitle}</p>
+                    <p className="truncate text-[0.95rem] font-semibold">{call.name}</p>
+                </div>
+                <button type="button" aria-label="Decline" onClick={(e) => e.stopPropagation()} className="grid h-11 w-11 place-items-center rounded-full bg-[#ff453a] transition hover:brightness-110">
+                    <PhoneOff className="h-[1.1rem] w-[1.1rem]" />
+                </button>
+                <button type="button" aria-label="Accept" onClick={(e) => e.stopPropagation()} className="grid h-11 w-11 place-items-center rounded-full bg-[#30d158] transition hover:brightness-110">
+                    <Phone className="h-[1.1rem] w-[1.1rem]" fill="currentColor" />
+                </button>
+            </div>
+        ),
+        timer: (
+            <div className="flex h-full w-full items-center justify-between pl-3 pr-4">
+                <span className="grid h-[1.85rem] w-[1.85rem] place-items-center rounded-full bg-[#ff9f0a]/20 text-[#ff9f0a]">
+                    <Timer className="h-4 w-4" />
+                </span>
+                <span className="font-mono text-[0.95rem] font-semibold tabular-nums text-[#ff9f0a]" aria-label={`Timer ${formatTime(remaining)} left`}>
+                    {formatTime(remaining)}
+                </span>
+            </div>
+        ),
+        notification: (
+            <div className="flex h-full w-full items-center gap-3 pl-2.5 pr-5">
+                <span className="grid h-[3.4rem] w-[3.4rem] shrink-0 place-items-center rounded-full" style={{ backgroundColor: accentColor }}>
+                    <MessageCircle className="h-6 w-6 text-black" fill="currentColor" />
+                </span>
+                <div className="min-w-0 flex-1">
+                    <p className="flex items-center justify-between gap-2 text-[0.72rem] text-white/50">
+                        <span className="truncate">{notification.app}</span>
+                        <span className="shrink-0">now</span>
+                    </p>
+                    <p className="truncate text-[0.9rem] font-semibold">{notification.title}</p>
+                    <p className="truncate text-[0.78rem] text-white/70">{notification.message}</p>
+                </div>
+            </div>
+        ),
+    };
+
+    return (
+        <div className={`flex w-full justify-center ${className}`}>
+            <motion.div
+                role="status"
+                aria-live="polite"
+                aria-label="Dynamic island"
+                onClick={canExpand ? () => setExpanded((e) => !e) : undefined}
+                onPointerEnter={(e) => e.pointerType === "mouse" && setHovered(true)}
+                onPointerLeave={() => setHovered(false)}
+                className={`relative max-w-[calc(100vw-2rem)] overflow-hidden bg-black text-white shadow-[0_18px_40px_-16px_rgba(0,0,0,0.65),inset_0_0_0_1px_rgba(255,255,255,0.06)] ${canExpand ? "cursor-pointer" : ""}`}
+                initial={false}
+                animate={size}
+                transition={moving ? spring : { duration: 0 }}
+            >
+                <AnimatePresence initial={false} mode="popLayout">
+                    <motion.div
+                        key={sizeKey}
+                        className="absolute inset-0 flex"
+                        initial={moving ? { opacity: 0, scale: 0.92, filter: "blur(6px)" } : { opacity: 0 }}
+                        animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
+                        exit={moving ? { opacity: 0, scale: 0.92, filter: "blur(6px)" } : { opacity: 0 }}
+                        transition={{ duration: 0.28, ease: [0.22, 1, 0.36, 1], delay: moving ? 0.06 : 0 }}
+                    >
+                        {content[sizeKey]}
+                    </motion.div>
+                </AnimatePresence>
+            </motion.div>
+        </div>
+    );
+};
+
+export default DynamicIsland;

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

@@ -0,0 +1,88 @@
+import React, { useId, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Plus } from "lucide-react";
+
+/*
+ * FAQ Accordion: questions that open with a smooth height animation, a plus
+ * that turns into a cross, and a soft highlight on the open item. One or many
+ * items can be open at once.
+ */
+
+const DEFAULT_ITEMS = [
+    { q: "Is ApexUI free to use?", a: "Yes. Every component is free and open source — copy it into your project or add it with one CLI command." },
+    { q: "Does it work with Next.js?", a: "Yes. The components are plain React with Tailwind CSS, so they work in Vite, Next.js, Remix and anything else that runs React." },
+    { q: "Can I change the colors?", a: "Every component takes props for its accent colors, and the Tailwind classes are right there in the code if you want to go further." },
+    { q: "Do the animations respect reduced motion?", a: "Yes. Components check the visitor's reduced-motion setting and tone their movement down or switch it off." },
+];
+
+const FaqAccordion = ({ items = DEFAULT_ITEMS, multiple = false, defaultOpen = [0], accentColor = "#a3e635", theme = "dark", className = "" }) => {
+    const id = useId();
+    const [open, setOpen] = useState(() => new Set(defaultOpen));
+    const dark = theme !== "light";
+
+    const toggle = (i) =>
+        setOpen((prev) => {
+            const next = new Set(multiple ? prev : prev.has(i) ? [i] : []);
+            if (next.has(i)) next.delete(i);
+            else next.add(i);
+            return next;
+        });
+
+    return (
+        <div className={`w-full max-w-2xl space-y-2 ${className}`}>
+            {items.map((item, i) => {
+                const on = open.has(i);
+                return (
+                    <div
+                        key={i}
+                        className={`overflow-hidden rounded-2xl border transition-colors duration-300 ${dark ? "text-white" : "text-neutral-900"} ${
+                            on ? (dark ? "border-white/15 bg-white/[0.05]" : "border-black/10 bg-black/[0.03]") : dark ? "border-white/10 bg-transparent hover:bg-white/[0.03]" : "border-black/10 bg-transparent hover:bg-black/[0.02]"
+                        }`}
+                    >
+                        <button
+                            type="button"
+                            id={`${id}-q-${i}`}
+                            aria-expanded={on}
+                            aria-controls={`${id}-a-${i}`}
+                            onClick={() => toggle(i)}
+                            className="flex w-full items-center justify-between gap-4 px-5 py-4 text-left text-[0.95rem] font-semibold outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-current/30"
+                        >
+                            {item.q}
+                            <motion.span
+                                animate={{ rotate: on ? 45 : 0, backgroundColor: on ? accentColor : dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.05)", color: on ? "#0a0a0a" : dark ? "#fff" : "#111" }}
+                                transition={{ type: "spring", stiffness: 380, damping: 26 }}
+                                className="grid h-7 w-7 shrink-0 place-items-center rounded-full"
+                            >
+                                <Plus className="h-4 w-4" />
+                            </motion.span>
+                        </button>
+                        <AnimatePresence initial={false}>
+                            {on && (
+                                <motion.div
+                                    id={`${id}-a-${i}`}
+                                    role="region"
+                                    aria-labelledby={`${id}-q-${i}`}
+                                    initial={{ height: 0, opacity: 0 }}
+                                    animate={{ height: "auto", opacity: 1 }}
+                                    exit={{ height: 0, opacity: 0 }}
+                                    transition={{ height: { duration: 0.32, ease: [0.22, 1, 0.36, 1] }, opacity: { duration: 0.2 } }}
+                                >
+                                    <motion.p
+                                        initial={{ y: -6 }}
+                                        animate={{ y: 0 }}
+                                        exit={{ y: -6 }}
+                                        className={`px-5 pb-5 text-[0.9rem] leading-relaxed ${dark ? "text-white/65" : "text-neutral-600"}`}
+                                    >
+                                        {item.a}
+                                    </motion.p>
+                                </motion.div>
+                            )}
+                        </AnimatePresence>
+                    </div>
+                );
+            })}
+        </div>
+    );
+};
+
+export default FaqAccordion;

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

@@ -0,0 +1,121 @@
+import React, { useEffect, useRef, useState } from "react";
+import { motion, useReducedMotion } from "framer-motion";
+
+/*
+ * Flip Clock: split-flap digits that fold over when they change. Count down
+ * to a date, count down a number of seconds, or show the time of day.
+ */
+
+const pad = (n) => String(n).padStart(2, "0");
+
+function partsFor(mode, target, seconds, start) {
+    const now = Date.now();
+    if (mode === "clock") {
+        const d = new Date(now);
+        return [
+            ["Hours", pad(d.getHours())],
+            ["Minutes", pad(d.getMinutes())],
+            ["Seconds", pad(d.getSeconds())],
+        ];
+    }
+    const end = mode === "date" ? new Date(target).getTime() : start + seconds * 1000;
+    const left = Math.max(0, Math.floor((end - now) / 1000));
+    return [
+        ["Days", pad(Math.floor(left / 86400))],
+        ["Hours", pad(Math.floor((left % 86400) / 3600))],
+        ["Minutes", pad(Math.floor((left % 3600) / 60))],
+        ["Seconds", pad(left % 60)],
+    ];
+}
+
+// One half of a digit card: the full glyph, clipped to the top or bottom half.
+function Half({ digit, top, card, style, ...motionProps }) {
+    return (
+        <motion.span
+            className={`absolute inset-x-0 h-1/2 overflow-hidden ${top ? "top-0 origin-bottom rounded-t-[0.14em]" : "bottom-0 origin-top rounded-b-[0.14em]"}`}
+            style={{ background: card, backfaceVisibility: "hidden", ...style }}
+            {...motionProps}
+        >
+            <span className={`absolute inset-x-0 grid h-[200%] place-items-center leading-none ${top ? "top-0" : "bottom-0"}`}>{digit}</span>
+        </motion.span>
+    );
+}
+
+function Flap({ digit, card, ink, moving }) {
+    const [prev, setPrev] = useState(digit);
+    const [flip, setFlip] = useState(0);
+
+    // A new digit: fold the old top half down, then swing the new bottom half in.
+    useEffect(() => {
+        if (digit === prev) return undefined;
+        if (!moving) {
+            setPrev(digit);
+            return undefined;
+        }
+        setFlip((f) => f + 1);
+        const t = setTimeout(() => setPrev(digit), 620);
+        return () => clearTimeout(t);
+    }, [digit, prev, moving]);
+
+    const flipping = digit !== prev;
+    return (
+        <span className="relative inline-block h-[1.35em] w-[0.9em] rounded-[0.14em] [perspective:400px]" style={{ color: ink }}>
+            <Half digit={digit} top card={card} />
+            <Half digit={flipping ? prev : digit} card={card} />
+            {flipping && (
+                <React.Fragment key={flip}>
+                    <Half digit={prev} top card={card} style={{ zIndex: 2 }} initial={{ rotateX: 0 }} animate={{ rotateX: -90 }} transition={{ duration: 0.3, ease: "easeIn" }} />
+                    <Half digit={digit} card={card} style={{ zIndex: 2 }} initial={{ rotateX: 90 }} animate={{ rotateX: 0 }} transition={{ duration: 0.3, delay: 0.3, ease: "easeOut" }} />
+                </React.Fragment>
+            )}
+            <span aria-hidden="true" className="absolute inset-x-0 top-1/2 z-[3] h-px bg-black/40" />
+        </span>
+    );
+}
+
+const FlipClock = ({ mode = "seconds", target, seconds = 3 * 86400 + 4 * 3600 + 25 * 60, accentColor = "#a3e635", theme = "dark", showLabels = true, size = 3, className = "" }) => {
+    const reduced = useReducedMotion();
+    const start = useRef(Date.now());
+    const [parts, setParts] = useState(() => partsFor(mode, target, seconds, start.current));
+
+    useEffect(() => {
+        start.current = Date.now();
+        const tick = () => setParts(partsFor(mode, target, seconds, start.current));
+        tick();
+        const id = setInterval(tick, 250);
+        return () => clearInterval(id);
+    }, [mode, target, seconds]);
+
+    const dark = theme !== "light";
+    const card = dark ? "#18181b" : "#f4f4f5";
+    const ink = dark ? "#fafafa" : "#18181b";
+
+    return (
+        <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: `${size}rem` }}>
+            {parts.map(([label, value], i) => (
+                <React.Fragment key={label}>
+                    {i > 0 && (
+                        <span aria-hidden="true" className="flex h-[1.35em] flex-col justify-center gap-[0.18em]">
+                            <span className="h-[0.12em] w-[0.12em] rounded-full" style={{ background: accentColor }} />
+                            <span className="h-[0.12em] w-[0.12em] rounded-full" style={{ background: accentColor }} />
+                        </span>
+                    )}
+                    <span className="flex flex-col items-center">
+                        <span aria-hidden="true" className="flex gap-[0.08em]">
+                            {[...value].map((d, k) => (
+                                <Flap key={k} digit={d} card={card} ink={ink} moving={!reduced} />
+                            ))}
+                        </span>
+                        {showLabels && (
+                            <span className="mt-[0.4em] text-[0.22em] font-semibold uppercase tracking-[0.2em]" style={{ color: dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)" }}>
+                                {label}
+                            </span>
+                        )}
+                    </span>
+                </React.Fragment>
+            ))}
+        </div>
+    );
+};
+
+export default FlipClock;

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

@@ -0,0 +1,238 @@
+import React, { useEffect, useRef } from "react";
+import { Mesh, Program, Renderer, Triangle } from "ogl";
+
+/*
+ * Liquid Gradient: a slow, flowing four-color mesh gradient drawn by a single
+ * OGL fragment shader on one full-screen triangle. The colors lean toward the
+ * pointer, a light film grain keeps it from banding, and it pauses off screen.
+ */
+
+const hexToVec3 = (hex) => {
+    let h = String(hex).replace("#", "");
+    if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+    const n = parseInt(h, 16) || 0;
+    return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255];
+};
+
+const vertex = /* glsl */ `
+attribute vec2 uv;
+attribute vec2 position;
+varying vec2 vUv;
+void main() {
+    vUv = uv;
+    gl_Position = vec4(position, 0.0, 1.0);
+}
+`;
+
+const fragment = /* glsl */ `
+precision highp float;
+uniform float uTime;
+uniform vec2 uResolution;
+uniform vec2 uMouse;
+uniform float uMouseStrength;
+uniform float uScale;
+uniform float uGrain;
+uniform vec3 uColor1;
+uniform vec3 uColor2;
+uniform vec3 uColor3;
+uniform vec3 uColor4;
+varying vec2 vUv;
+
+vec2 hash(vec2 p) {
+    p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));
+    return -1.0 + 2.0 * fract(sin(p) * 43758.5453);
+}
+
+float noise(vec2 p) {
+    vec2 i = floor(p);
+    vec2 f = fract(p);
+    vec2 u = f * f * (3.0 - 2.0 * f);
+    return mix(
+        mix(dot(hash(i), f), dot(hash(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0)), u.x),
+        mix(dot(hash(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0)), dot(hash(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0)), u.x),
+        u.y
+    );
+}
+
+float fbm(vec2 p) {
+    float v = 0.0;
+    float a = 0.5;
+    for (int i = 0; i < 4; i++) {
+        v += a * noise(p);
+        p *= 2.0;
+        a *= 0.5;
+    }
+    return v;
+}
+
+void main() {
+    float aspect = uResolution.x / uResolution.y;
+    vec2 p = (vUv - 0.5) * vec2(aspect, 1.0) * uScale;
+    float t = uTime * 0.12;
+
+    // Pull the field toward the pointer.
+    vec2 m = (uMouse - 0.5) * vec2(aspect, 1.0) * uScale;
+    float md = length(p - m);
+    p += (m - p) * uMouseStrength * 0.35 * exp(-md * md * 1.5);
+
+    // Domain-warped noise: noise feeding noise gives the liquid folds.
+    vec2 q = vec2(fbm(p + t), fbm(p + vec2(5.2, 1.3) - t));
+    vec2 r = vec2(fbm(p + 3.0 * q + vec2(1.7, 9.2) + t * 0.6), fbm(p + 3.0 * q + vec2(8.3, 2.8) - t * 0.4));
+    float n = fbm(p + 2.5 * r);
+
+    vec3 col = mix(uColor1, uColor2, smoothstep(-0.4, 0.4, q.x));
+    col = mix(col, uColor3, smoothstep(-0.3, 0.5, r.y));
+    col = mix(col, uColor4, smoothstep(0.1, 0.7, n));
+
+    col *= 1.0 - 0.25 * length(vUv - 0.5);
+    float g = fract(sin(dot(gl_FragCoord.xy + fract(uTime) * 100.0, vec2(12.9898, 78.233))) * 43758.5453);
+    col += (g - 0.5) * uGrain;
+
+    gl_FragColor = vec4(col, 1.0);
+}
+`;
+
+const LiquidGradient = ({
+    children,
+    className = "",
+    containerClassName = "",
+    colors = ["#1e1b4b", "#4f46e5", "#db2777", "#f97316"],
+    speed = 1,
+    scale = 1.6,
+    grain = 0.06,
+    mouseInteractive = true,
+    quality = 1,
+}) => {
+    const containerRef = useRef(null);
+    const programRef = useRef(null);
+    const renderRef = useRef(() => {});
+    const speedRef = useRef(speed);
+    speedRef.current = speed;
+    const pointer = useRef({ x: 0.5, y: 0.5, tx: 0.5, ty: 0.5, strength: 0, target: 0 });
+
+    useEffect(() => {
+        const container = containerRef.current;
+        const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        const renderer = new Renderer({ dpr: Math.min(window.devicePixelRatio || 1, 1.5) * quality, antialias: false, alpha: false });
+        const gl = renderer.gl;
+        gl.canvas.style.cssText = "position:absolute;inset:0;width:100%;height:100%;display:block;";
+        container.prepend(gl.canvas);
+
+        const program = new Program(gl, {
+            vertex,
+            fragment,
+            uniforms: {
+                uTime: { value: 0 },
+                uResolution: { value: [1, 1] },
+                uMouse: { value: [0.5, 0.5] },
+                uMouseStrength: { value: 0 },
+                uScale: { value: scale },
+                uGrain: { value: grain },
+                uColor1: { value: hexToVec3(colors[0]) },
+                uColor2: { value: hexToVec3(colors[1] ?? colors[0]) },
+                uColor3: { value: hexToVec3(colors[2] ?? colors[0]) },
+                uColor4: { value: hexToVec3(colors[3] ?? colors[0]) },
+            },
+        });
+        programRef.current = program;
+        const mesh = new Mesh(gl, { geometry: new Triangle(gl), program });
+
+        let raf = 0;
+        let last = performance.now();
+        let time = 7; // start mid-flow so the first frame already looks liquid
+        let visible = true;
+
+        const render = () => renderer.render({ scene: mesh });
+        renderRef.current = render;
+        const resize = () => {
+            const { width, height } = container.getBoundingClientRect();
+            renderer.setSize(Math.max(1, width), Math.max(1, height));
+            program.uniforms.uResolution.value = [Math.max(1, width), Math.max(1, height)];
+            render();
+        };
+
+        const loop = (now) => {
+            const dt = Math.min(0.05, (now - last) / 1000);
+            last = now;
+            time += dt * speedRef.current;
+            const p = pointer.current;
+            p.x += (p.tx - p.x) * 0.06;
+            p.y += (p.ty - p.y) * 0.06;
+            p.strength += (p.target - p.strength) * 0.05;
+            program.uniforms.uTime.value = time;
+            program.uniforms.uMouse.value = [p.x, p.y];
+            program.uniforms.uMouseStrength.value = p.strength;
+            render();
+            raf = requestAnimationFrame(loop);
+        };
+        const start = () => {
+            if (reduced || raf || !visible) return;
+            last = performance.now();
+            raf = requestAnimationFrame(loop);
+        };
+        const stop = () => {
+            cancelAnimationFrame(raf);
+            raf = 0;
+        };
+
+        const ro = new ResizeObserver(resize);
+        ro.observe(container);
+        const io = new IntersectionObserver(([entry]) => {
+            visible = entry.isIntersecting;
+            if (visible) start();
+            else stop();
+        });
+        io.observe(container);
+        program.uniforms.uTime.value = time;
+        resize();
+        start();
+
+        return () => {
+            stop();
+            ro.disconnect();
+            io.disconnect();
+            programRef.current = null;
+            renderRef.current = () => {};
+            gl.canvas.remove();
+            gl.getExtension("WEBGL_lose_context")?.loseContext();
+        };
+        // The renderer is rebuilt only when quality changes; other props update uniforms below.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [quality]);
+
+    useEffect(() => {
+        const program = programRef.current;
+        if (!program) return;
+        program.uniforms.uScale.value = scale;
+        program.uniforms.uGrain.value = grain;
+        program.uniforms.uColor1.value = hexToVec3(colors[0]);
+        program.uniforms.uColor2.value = hexToVec3(colors[1] ?? colors[0]);
+        program.uniforms.uColor3.value = hexToVec3(colors[2] ?? colors[0]);
+        program.uniforms.uColor4.value = hexToVec3(colors[3] ?? colors[0]);
+        // Redraw now so a paused (reduced-motion) gradient shows the change too.
+        renderRef.current();
+    }, [colors, scale, grain]);
+
+    const onPointerMove = (e) => {
+        const rect = containerRef.current.getBoundingClientRect();
+        pointer.current.tx = (e.clientX - rect.left) / rect.width;
+        pointer.current.ty = 1 - (e.clientY - rect.top) / rect.height;
+        pointer.current.target = 1;
+    };
+    const onPointerLeave = () => {
+        pointer.current.target = 0;
+    };
+
+    return (
+        <div
+            ref={containerRef}
+            onPointerMove={mouseInteractive ? onPointerMove : undefined}
+            onPointerLeave={onPointerLeave}
+            className={`relative h-screen w-full overflow-hidden bg-[#0b0b14] ${containerClassName}`}
+        >
+            {children && <div className={`relative z-10 h-full w-full ${className}`}>{children}</div>}
+        </div>
+    );
+};
+
+export default LiquidGradient;