apex-ui-kit 2.0.7 → 2.1.1

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

@@ -0,0 +1,345 @@
+import React, { useState, useRef, useEffect } from "react";
+import gsap from "gsap";
+
+/*
+ * Mask View: three ways to reveal content through a mask.
+ *   variant="window"    – big letters are a window onto an image; it pans with the pointer, tap opens it fully.
+ *   variant="spotlight" – near-hidden text lit by a soft spotlight that follows the pointer (wanders on its own when idle).
+ *   variant="wipe"      – text under steamed-up glass; wipe it clear with the pointer or a finger, it slowly fogs back.
+ */
+
+const DEFAULT_IMAGE = "https://ik.imagekit.io/ny6yinyut/apexui/assets/ironman.png?updatedAt=1792562203671";
+const DEFAULT_TEXT = {
+    window: "MASK\nVIEW",
+    spotlight: "Look through the mask.\nOnly what sits under the light\ncomes into focus.",
+    wipe: "Wipe the glass.\nThe words underneath\nare waiting for you.",
+};
+
+const textClass = "text-center text-2xl sm:text-4xl font-semibold leading-tight tracking-tight";
+
+const Lines = ({ text }) => text.split("\n").map((line, i) => <span key={i} className="block">{line}</span>);
+
+// Shared card: dark panel, corner label and a hint that hides while the effect is in use.
+const Frame = ({ boxRef, accent, label, hint, active, className = "", children, ...handlers }) => (
+    <div
+        ref={boxRef}
+        className={`relative isolate w-full max-w-2xl min-h-[300px] overflow-hidden rounded-3xl border border-white/10 bg-[#07070c] select-none ${className}`}
+        {...handlers}
+    >
+        <div
+            className="pointer-events-none absolute inset-0 opacity-[0.06]"
+            style={{ backgroundImage: "radial-gradient(rgba(255,255,255,0.9) 1px, transparent 1px)", backgroundSize: "18px 18px" }}
+        />
+        {children}
+        <span className="pointer-events-none absolute left-5 top-4 z-30 flex items-center gap-2 font-mono text-[10px] uppercase tracking-[0.2em] text-white/45">
+            <span className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: accent }} />
+            {label}
+        </span>
+        <span
+            className={`pointer-events-none absolute bottom-4 left-1/2 z-30 -translate-x-1/2 whitespace-nowrap rounded-full border border-white/10 bg-black/40 px-3.5 py-1.5 text-xs text-white/65 backdrop-blur-md transition-all duration-500 ${active ? "translate-y-3 opacity-0" : "opacity-100"}`}
+        >
+            {hint}
+        </span>
+    </div>
+);
+
+/* ---------------------------------------------------------------- window */
+const TextWindow = ({ text, image, accent, speed }) => {
+    const boxRef = useRef(null);
+    const pan = useRef({ x: 50, y: 50 });
+    const [hovered, setHovered] = useState(false);
+    const [open, setOpen] = useState(false);
+    const [origin, setOrigin] = useState({ x: 50, y: 50 });
+
+    const paint = () => {
+        boxRef.current?.style.setProperty("--px", `${pan.current.x}%`);
+        boxRef.current?.style.setProperty("--py", `${pan.current.y}%`);
+    };
+    useEffect(() => {
+        const state = pan.current;
+        paint();
+        return () => gsap.killTweensOf(state);
+    }, []);
+
+    const handleMove = (e) => {
+        const rect = boxRef.current.getBoundingClientRect();
+        // Pan the image the opposite way to the pointer, for a little depth.
+        gsap.to(pan.current, {
+            x: 100 - ((e.clientX - rect.left) / rect.width) * 100,
+            y: 100 - ((e.clientY - rect.top) / rect.height) * 100,
+            duration: speed * 2,
+            ease: "power3.out",
+            overwrite: "auto",
+            onUpdate: paint,
+        });
+    };
+    const handleLeave = () => {
+        setHovered(false);
+        gsap.to(pan.current, { x: 50, y: 50, duration: 0.9, ease: "power3.out", onUpdate: paint });
+    };
+    const handleClick = (e) => {
+        const rect = boxRef.current.getBoundingClientRect();
+        setOrigin({ x: ((e.clientX - rect.left) / rect.width) * 100, y: ((e.clientY - rect.top) / rect.height) * 100 });
+        setOpen((o) => !o);
+    };
+
+    return (
+        <Frame
+            boxRef={boxRef}
+            accent={accent}
+            label="Mask View"
+            hint={open ? "Tap to close" : "Move to pan · tap to open"}
+            active={hovered && !open}
+            className="cursor-pointer touch-pan-y"
+            onPointerEnter={() => setHovered(true)}
+            onPointerMove={handleMove}
+            onPointerLeave={handleLeave}
+            onClick={handleClick}
+        >
+            {/* Full image, opened with a circle from the tap point */}
+            <div
+                className="absolute inset-0 z-10 transition-[clip-path] duration-700 ease-[cubic-bezier(0.65,0,0.35,1)]"
+                style={{
+                    backgroundImage: `url("${image}")`,
+                    backgroundSize: "cover",
+                    backgroundPosition: "var(--px) var(--py)",
+                    clipPath: `circle(${open ? "150%" : "0%"} at ${origin.x}% ${origin.y}%)`,
+                }}
+            />
+            {/* Letters as the window */}
+            <div className="absolute inset-0 z-20 flex items-center justify-center px-4">
+                <p
+                    className={`text-center text-[clamp(4rem,19vw,9rem)] font-black uppercase leading-[0.85] tracking-[-0.04em] transition-[color,text-shadow] duration-500 ${open ? "text-white [text-shadow:0_8px_40px_rgba(0,0,0,0.6)]" : "text-transparent"}`}
+                    style={open ? undefined : {
+                        backgroundImage: `url("${image}")`,
+                        backgroundSize: "180%",
+                        backgroundPosition: "var(--px) var(--py)",
+                        WebkitBackgroundClip: "text",
+                        backgroundClip: "text",
+                        WebkitTextStroke: "1px rgba(255,255,255,0.12)",
+                    }}
+                >
+                    <Lines text={text} />
+                </p>
+            </div>
+        </Frame>
+    );
+};
+
+/* ------------------------------------------------------------- spotlight */
+const Spotlight = ({ text, accent, speed }) => {
+    const boxRef = useRef(null);
+    const light = useRef({ x: 0, y: 0, r: 0 });
+    const idle = useRef(null);
+    const [active, setActive] = useState(false);
+
+    const paint = () => {
+        const el = boxRef.current;
+        if (!el) return;
+        el.style.setProperty("--x", `${light.current.x}px`);
+        el.style.setProperty("--y", `${light.current.y}px`);
+        el.style.setProperty("--r", `${light.current.r}px`);
+    };
+
+    // When nobody is pointing, the light drifts slowly across the text.
+    const startIdle = () => {
+        const el = boxRef.current;
+        if (!el) return;
+        const w = el.offsetWidth, h = el.offsetHeight;
+        idle.current?.kill();
+        idle.current = gsap.timeline({ repeat: -1, yoyo: true, defaults: { duration: 2.6, ease: "sine.inOut", onUpdate: paint } })
+            .to(light.current, { x: w * 0.3, y: h * 0.42, r: Math.min(120, w * 0.22) })
+            .to(light.current, { x: w * 0.7, y: h * 0.58 });
+    };
+
+    useEffect(() => {
+        const el = boxRef.current;
+        const state = light.current;
+        if (!el) return;
+        state.x = el.offsetWidth * 0.3;
+        state.y = el.offsetHeight * 0.42;
+        paint();
+        startIdle();
+        return () => {
+            idle.current?.kill();
+            gsap.killTweensOf(state);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const handleEnter = () => {
+        setActive(true);
+        idle.current?.kill();
+        const w = boxRef.current.offsetWidth;
+        gsap.to(light.current, { r: Math.min(170, w * 0.3), duration: 0.6, ease: "power3.out", onUpdate: paint });
+    };
+    const handleMove = (e) => {
+        if (!active) handleEnter();
+        const rect = boxRef.current.getBoundingClientRect();
+        gsap.to(light.current, { x: e.clientX - rect.left, y: e.clientY - rect.top, duration: speed, ease: "power3.out", overwrite: "auto", onUpdate: paint });
+    };
+    const handleLeave = () => {
+        setActive(false);
+        startIdle();
+    };
+
+    const mask = "radial-gradient(circle var(--r) at var(--x) var(--y), #000 0%, rgba(0,0,0,0.85) 35%, transparent 100%)";
+
+    return (
+        <Frame
+            boxRef={boxRef}
+            accent={accent}
+            label="Spotlight"
+            hint="Hover or touch to shine the light"
+            active={active}
+            className="cursor-none touch-pan-y"
+            onPointerEnter={handleEnter}
+            onPointerMove={handleMove}
+            onPointerLeave={handleLeave}
+            onPointerCancel={handleLeave}
+        >
+            {/* Text in the dark */}
+            <div className="absolute inset-0 flex items-center justify-center px-6 sm:px-10">
+                <p className={`${textClass} text-white/[0.07]`}><Lines text={text} /></p>
+            </div>
+            {/* Lit text */}
+            <div className="absolute inset-0 flex items-center justify-center px-6 sm:px-10" style={{ WebkitMaskImage: mask, maskImage: mask }} aria-hidden="true">
+                <p className={`${textClass} text-white`}><Lines text={text} /></p>
+            </div>
+            {/* Faint pool of light on the surface */}
+            <div
+                className="pointer-events-none absolute inset-0"
+                style={{ background: "radial-gradient(circle calc(var(--r) * 1.4) at var(--x) var(--y), rgba(255,255,255,0.05), transparent 70%)" }}
+            />
+        </Frame>
+    );
+};
+
+/* ------------------------------------------------------------------ wipe */
+const FOG = "#10101a";
+
+const WipeReveal = ({ text, accent }) => {
+    const boxRef = useRef(null);
+    const canvasRef = useRef(null);
+    const last = useRef(null);
+    const regrowUntil = useRef(0);
+    const frame = useRef(0);
+    const [active, setActive] = useState(false);
+
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        const box = boxRef.current;
+        if (!canvas || !box) return;
+        const ctx = canvas.getContext("2d");
+
+        const fill = () => {
+            const dpr = Math.min(window.devicePixelRatio || 1, 2);
+            canvas.width = box.offsetWidth * dpr;
+            canvas.height = box.offsetHeight * dpr;
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+            ctx.globalCompositeOperation = "source-over";
+            ctx.fillStyle = FOG;
+            ctx.fillRect(0, 0, box.offsetWidth, box.offsetHeight);
+        };
+        fill();
+        const ro = new ResizeObserver(fill);
+        ro.observe(box);
+        return () => {
+            ro.disconnect();
+            cancelAnimationFrame(frame.current);
+        };
+    }, []);
+
+    // Fog creeps back over cleared glass for a few seconds after the last wipe.
+    const regrow = () => {
+        const canvas = canvasRef.current;
+        const box = boxRef.current;
+        if (!canvas || !box) return;
+        const ctx = canvas.getContext("2d");
+        ctx.globalCompositeOperation = "source-over";
+        ctx.globalAlpha = 0.018;
+        ctx.fillStyle = FOG;
+        ctx.fillRect(0, 0, box.offsetWidth, box.offsetHeight);
+        ctx.globalAlpha = 1;
+        frame.current = performance.now() < regrowUntil.current ? requestAnimationFrame(regrow) : 0;
+    };
+
+    const wipe = (x, y) => {
+        const ctx = canvasRef.current.getContext("2d");
+        const radius = Math.max(36, Math.min(60, boxRef.current.offsetWidth * 0.09));
+        const from = last.current ?? { x, y };
+        const steps = Math.max(1, Math.ceil(Math.hypot(x - from.x, y - from.y) / (radius / 3)));
+        ctx.globalCompositeOperation = "destination-out";
+        // Stamp soft brush dots along the path so fast moves leave no gaps.
+        for (let i = 1; i <= steps; i++) {
+            const px = from.x + ((x - from.x) * i) / steps;
+            const py = from.y + ((y - from.y) * i) / steps;
+            const brush = ctx.createRadialGradient(px, py, 0, px, py, radius);
+            brush.addColorStop(0, "rgba(0,0,0,0.9)");
+            brush.addColorStop(1, "rgba(0,0,0,0)");
+            ctx.fillStyle = brush;
+            ctx.fillRect(px - radius, py - radius, radius * 2, radius * 2);
+        }
+        last.current = { x, y };
+        regrowUntil.current = performance.now() + 4000;
+        if (!frame.current) frame.current = requestAnimationFrame(regrow);
+    };
+
+    const handleMove = (e) => {
+        const rect = boxRef.current.getBoundingClientRect();
+        setActive(true);
+        wipe(e.clientX - rect.left, e.clientY - rect.top);
+    };
+    const handleLeave = () => {
+        last.current = null;
+        setActive(false);
+    };
+
+    return (
+        <Frame
+            boxRef={boxRef}
+            accent={accent}
+            label="Wipe Reveal"
+            hint="Wipe the glass with your pointer or finger"
+            active={active}
+            className="cursor-crosshair touch-pan-y"
+            onPointerMove={handleMove}
+            onPointerLeave={handleLeave}
+            onPointerCancel={handleLeave}
+        >
+            {/* Clear text under the glass */}
+            <div className="absolute inset-0 flex items-center justify-center px-6 sm:px-10">
+                <p className={`${textClass} text-white`}><Lines text={text} /></p>
+            </div>
+            {/* Steam on the glass */}
+            <canvas ref={canvasRef} className="pointer-events-none absolute inset-0 h-full w-full opacity-[0.93]" />
+            {/* Condensation droplets */}
+            <div
+                className="pointer-events-none absolute inset-0 opacity-30"
+                style={{
+                    backgroundImage: "radial-gradient(rgba(255,255,255,0.35) 1px, transparent 1.5px), radial-gradient(rgba(255,255,255,0.2) 1px, transparent 1.5px)",
+                    backgroundSize: "23px 29px, 37px 31px",
+                    backgroundPosition: "0 0, 11px 7px",
+                }}
+            />
+        </Frame>
+    );
+};
+
+const MaskView = ({
+    variant = "spotlight",
+    text,
+    image = DEFAULT_IMAGE,
+    accentColor,
+    dropColor, // older name for accentColor, still accepted
+    animationSpeed = 0.4,
+}) => {
+    const kind = DEFAULT_TEXT[variant] ? variant : "spotlight";
+    const content = text ?? DEFAULT_TEXT[kind];
+    const accent = accentColor ?? dropColor ?? "#a855f7";
+    if (kind === "window") return <TextWindow text={content} image={image} accent={accent} speed={animationSpeed} />;
+    if (kind === "wipe") return <WipeReveal text={content} accent={accent} />;
+    return <Spotlight text={content} accent={accent} speed={animationSpeed} />;
+};
+
+export default MaskView;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import './MeteorCard.css';
 const ArrowRightIcon = () => (
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
@@ -11,51 +11,40 @@ const ArrowRightIcon = () => (
 );
 
 // Meteor Effect Component
+// Positions are picked once (useMemo), so re-renders don't make the meteors jump.
 const Meteors = ({ number = 20 }) => {
-    const meteors = [...Array(number)].map((_, i) => (
-        <span
-            key={i}
-            className="meteor-bg"
-            style={{
-                top: `${Math.random() * 100}%`,
-                left: `${Math.random() * 100}%`,
-                animationDelay: `${Math.random() * 8}s`,
-                animationDuration: `${Math.floor(Math.random() * 6) + 4}s`,
-            }}
-        ></span>
-    ));
-    return <>{meteors}</>;
+    const meteors = useMemo(() => [...Array(number)].map(() => ({
+        top: `${Math.random() * 100}%`,
+        left: `${Math.random() * 100}%`,
+        animationDelay: `${Math.random() * 8}s`,
+        animationDuration: `${Math.floor(Math.random() * 6) + 4}s`,
+    })), [number]);
+    return <>{meteors.map((style, i) => <span key={i} className="meteor-bg" style={style}></span>)}</>;
 };
 
 // Particle Effect Component
 const Particles = ({ number = 50, color = '#ffffff', speed = 1 }) => {
-    const particles = [...Array(number)].map((_, i) => {
+    const particles = useMemo(() => [...Array(number)].map(() => {
         const animationDuration = (Math.random() * 5 + 3) / speed;
-        return (
-            <span
-                key={i}
-                className="particle-bg"
-                style={{
-                    '--particle-color': color,
-                    top: `${Math.random() * 100}%`,
-                    left: `${Math.random() * 100}%`,
-                    animationDelay: `${Math.random() * animationDuration}s`,
-                    animationDuration: `${animationDuration}s`,
-                }}
-            ></span>
-        );
-    });
-    return <>{particles}</>;
+        return {
+            top: `${Math.random() * 100}%`,
+            left: `${Math.random() * 100}%`,
+            animationDelay: `${Math.random() * animationDuration}s`,
+            animationDuration: `${animationDuration}s`,
+        };
+    }), [number, speed]);
+    return <>{particles.map((style, i) => <span key={i} className="particle-bg" style={{ '--particle-color': color, ...style }}></span>)}</>;
 };
 
 // Main MeteorCard Component
+// A fixed-size card (image on top, content below) so it looks the same on every screen.
 const MeteorCard = ({ data, particleNumber, particleColor, particleSpeed }) => {
     return (
-        <>
+        <div className="flex flex-wrap justify-center gap-6">
             {data.map((item, index) => (
-                <div key={index} className="relative w-full lg:w-[30vw] max-w-4xl mx-auto bg-slate-800/80 p-0.5 rounded-lg moving-border-card">
+                <div key={index} className="relative w-[20rem] max-w-full bg-slate-800/80 p-0.5 rounded-2xl moving-border-card">
                     {/* Card ka content container */}
-                    <div className="relative bg-slate-900 rounded-lg p-4 md:p-8 flex flex-col md:flex-row items-center gap-6 md:gap-8 overflow-hidden">
+                    <div className="relative bg-slate-900 rounded-[calc(1rem-2px)] p-3 flex flex-col overflow-hidden">
                         {/* Background Effects */}
                         <div className="absolute inset-0 w-full h-full z-0">
                             <Meteors number={5} />
@@ -66,27 +55,27 @@ const MeteorCard = ({ data, particleNumber, particleColor, particleSpeed }) => {
                             />
                         </div>
 
-                        {/* Spotlight Effect (hide on small screens to reduce visual noise) */}
-                        <div className="hidden md:block absolute -top-1/3 -left-1/3 w-2/3 h-2/3 bg-blue-400/90 rounded-full blur-[120px] pointer-events-none z-0"></div>
+                        {/* Spotlight Effect */}
+                        <div className="absolute -top-1/4 -left-1/4 w-3/4 h-1/2 bg-blue-400/60 rounded-full blur-[90px] pointer-events-none z-0"></div>
 
-                        {/* Left Side: Image */}
-                        <div className="relative w-full md:w-1/2 h-64 md:h-full rounded-md overflow-hidden z-10">
-                            <img src={item.imageUrl} alt={item.title} className="w-full h-full object-cover lg:aspect-square" />
+                        {/* Image */}
+                        <div className="relative h-[13.75rem] w-full rounded-xl overflow-hidden z-10 ring-1 ring-white/10">
+                            <img src={item.imageUrl} alt={item.title} className="w-full h-full object-cover object-[center_25%]" />
                         </div>
 
-                        {/* Right Side: Content */}
-                        <div className="relative w-full md:w-2/3 text-center md:text-left z-10">
-                            <h3 className="text-3xl font-bold mb-2 text-white">{item.title}</h3>
-                            <p className="text-gray-400 mb-6">{item.description}</p>
-                            <button className="group relative inline-flex md:inline-flex w-full md:w-auto items-center justify-center px-6 py-2 bg-lime-600 text-white font-semibold rounded-md overflow-hidden transition-all duration-300 hover:bg-lime-700">
-                                <span className="mx-auto">{item.buttonText}</span>
+                        {/* Content */}
+                        <div className="relative z-10 px-2 pt-4 pb-2 text-center">
+                            <h3 className="text-2xl font-bold mb-2 text-white tracking-tight">{item.title}</h3>
+                            <p className="text-sm leading-relaxed text-gray-400 mb-5">{item.description}</p>
+                            <button className="group relative inline-flex w-full items-center justify-center whitespace-nowrap px-6 py-2.5 bg-lime-600 text-white font-semibold rounded-lg overflow-hidden transition-all duration-300 hover:bg-lime-700">
+                                <span>{item.buttonText}</span>
                                 <ArrowRightIcon />
                             </button>
                         </div>
                     </div>
                 </div>
             ))}
-        </>
+        </div>
     );
 };