/* ===== Kuntur shared: icons + GSAP animation helpers ===== */
const { useRef, useEffect, useState, useLayoutEffect } = React;
/* ---------- Icons ---------- */
function Icon({ name, className }) {
const p = { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", className,
stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round" };
const paths = {
arrow: ,
arrowUR: ,
plus: ,
menu: ,
close:
};
return ;
}
function Social({ name, className }) {
const p = { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", className };
const g = {
whatsapp: ,
instagram: ,
tiktok: ,
linkedin: ,
facebook: ,
x: ,
gmail:
};
return ;
}
/* ---------- Pill button ---------- */
function Btn({ children, href = "#", solid, className = "", icon = "arrow" }) {
return (
{children}
);
}
/* ---------- GSAP setup ---------- */
/* Run fn now if the document is visible, else defer until it becomes visible.
Keeps content at its (visible) CSS default whenever the rAF ticker is paused
(background tab, capture context) so nothing ever gets stuck hidden. */
function runWhenVisible(fn) {
if (document.visibilityState === "visible") {fn();return () => {};}
const onVis = () => {
if (document.visibilityState === "visible") {
document.removeEventListener("visibilitychange", onVis);
fn();
}
};
document.addEventListener("visibilitychange", onVis);
return () => document.removeEventListener("visibilitychange", onVis);
}
function useGsapReady(cb, deps = []) {
useLayoutEffect(() => {
if (!window.gsap) return;
gsap.registerPlugin(ScrollTrigger);
let ctx;
const stopVis = runWhenVisible(() => {
ctx = gsap.context(() => cb());
if (window.ScrollTrigger) ScrollTrigger.refresh();
});
return () => {stopVis();if (ctx) ctx.revert();};
}, deps);
}
/* Reveal a group of [data-reveal] children with stagger on scroll */
function Reveal({ children, className = "", y = 40, stagger = 0.08, delay = 0, sel = "[data-reveal]", start = "top 85%", as: Tag = "div" }) {
const ref = useRef(null);
useGsapReady(() => {
const el = ref.current;
const items = el.querySelectorAll(sel);
const targets = items.length ? items : [el];
gsap.set(targets, { opacity: 0, y });
gsap.to(targets, {
opacity: 1, y: 0, duration: 1, ease: "power3.out", stagger, delay,
scrollTrigger: { trigger: el, start }
});
}, []);
return {children};
}
/* Masked line text that slides up on scroll */
function RevealText({ children, className = "", as: Tag = "div", start = "top 88%", delay = 0 }) {
const ref = useRef(null);
useGsapReady(() => {
const inner = ref.current.querySelector(".line-inner");
gsap.set(inner, { yPercent: 110 });
gsap.to(inner, { yPercent: 0, duration: 1.1, ease: "power4.out", delay,
scrollTrigger: { trigger: ref.current, start } });
}, []);
return (
{children}
);
}
/* Infinite marquee (GSAP). dir: 1 = left, -1 = right */
function Marquee({ children, speed = 60, dir = 1, className = "", gap = 0, pauseHover = false }) {
const trackRef = useRef(null);
const tweenRef = useRef(null);
useGsapReady(() => {
const track = trackRef.current;
const first = track.children[0];
const w = first.getBoundingClientRect().width + gap;
gsap.set(track, { x: dir === 1 ? 0 : -w });
tweenRef.current = gsap.to(track, {
x: dir === 1 ? -w : 0,
duration: w / speed, ease: "none", repeat: -1,
modifiers: { x: gsap.utils.unitize((x) => dir === 1 ? parseFloat(x) % w : parseFloat(x) % w, "px") }
});
}, []);
const onEnter = () => pauseHover && tweenRef.current && tweenRef.current.timeScale(0.25);
const onLeave = () => pauseHover && tweenRef.current && tweenRef.current.timeScale(1);
return (
);
}
/* Count-up number on scroll (preserves any prefix/suffix like $, +, %, M) */
function CountUp({ value, className }) {
const ref = useRef(null);
const str = String(value);
const m = str.match(/^([^0-9]*)([0-9][0-9,.]*)(.*)$/);
const pre = m ? m[1] : "",numStr = m ? m[2] : str,suf = m ? m[3] : "";
useGsapReady(() => {
if (!m) return;
const obj = { v: 0 };
const target = parseFloat(numStr.replace(/,/g, "")) || 0;
const decimals = (numStr.split(".")[1] || "").length;
gsap.fromTo(obj, { v: 0 }, {
v: target, duration: 2, ease: "power2.out", immediateRender: false,
scrollTrigger: { trigger: ref.current, start: "top 90%" },
onUpdate: () => {if (ref.current) ref.current.textContent = pre + obj.v.toFixed(decimals) + suf;}
});
}, []);
return {value};
}
/* Dead-ticker fallback: if rAF never advances (background tab / capture context),
force all reveal-animated content to its visible end-state. */
function installTickerWatchdog() {
if (!window.gsap) return;
const f0 = gsap.ticker.frame;
setTimeout(() => {
if (gsap.ticker.frame - f0 < 2) {
try {ScrollTrigger.getAll().forEach((s) => s.kill(false));} catch (e) {}
gsap.globalTimeline.getChildren().forEach((tw) => tw.kill());
const sel = ".line-inner, .line-mask, [data-reveal], .hero__banner, .hero__card, .reveal-up, .svc-chip, .work-card__media, .work-card__media img, .work-card__bar, .about__img, .stat__num";
gsap.set(sel, { clearProps: "all" });
document.querySelectorAll(sel).forEach((el) => {
el.style.opacity = "1";el.style.transform = "none";el.style.clipPath = "none";
});
}
}, 1100);
}
Object.assign(window, {
useRef, useEffect, useState, useLayoutEffect,
Icon, Social, Btn, useGsapReady, Reveal, RevealText, Marquee, CountUp, installTickerWatchdog
});