} />
);
/* ------------------------------- Buttons ---------------------------------- */
function ContactButton({ label = 'Me contacter', href = '#contact', large = false, className = '' }) {
return (
{label}
);
}
function GhostButton({ label = 'Voir le projet', href = '#', className = '' }) {
return (
{ if (href === '#') e.preventDefault(); }}
className={
'group inline-flex items-center gap-2.5 rounded-full border-2 border-bone ' +
'px-5 py-2.5 md:px-7 md:py-3 text-[0.7rem] md:text-xs uppercase tracking-[0.22em] font-medium ' +
'text-bone transition-colors duration-300 hover:bg-[rgba(232,237,233,0.1)] ' + className
}
>
{label}
);
}
/* ----------------------- Scroll-reveal: FadeIn ---------------------------- */
function FadeIn({ children, delay = 0, duration = 0.7, x = 0, y = 30, className = '', as = 'div' }) {
const ref = useRef(null);
useLayoutEffect(() => {
const el = ref.current;
if (!el) return;
if (prefersReduced) { gsap.set(el, { opacity: 1, x: 0, y: 0 }); return; }
const ctx = gsap.context(() => {
gsap.fromTo(
el,
{ opacity: 0, x, y },
{
opacity: 1, x: 0, y: 0, duration, delay, ease: 'power3.out',
scrollTrigger: { trigger: el, start: 'top 85%', once: true },
}
);
}, el);
return () => ctx.revert();
}, []);
const Tag = as;
return {children};
}
/* ------------------- Scroll-scrubbed character reveal ---------------------- */
function AnimatedText({ text, className = '', style }) {
const ref = useRef(null);
const words = useMemo(() => text.split(' '), [text]);
useLayoutEffect(() => {
const el = ref.current;
if (!el) return;
const chars = el.querySelectorAll('.at-char');
if (prefersReduced) { gsap.set(chars, { opacity: 1 }); return; }
const ctx = gsap.context(() => {
gsap.set(chars, { opacity: 0.18 });
gsap.to(chars, {
opacity: 1,
ease: 'none',
stagger: 0.5,
scrollTrigger: {
trigger: el,
start: 'top 80%',
end: 'bottom 35%',
scrub: true,
},
});
}, el);
return () => ctx.revert();
}, [text]);
return (
{words.map((w, wi) => (
{w.split('').map((c, ci) => (
{c}
))}
{wi < words.length - 1 && }
))}
);
}
/* --------------------- Section label (— LABEL) ---------------------------- */
function SectionLabel({ children, center = false }) {
return (
{children}
);
}
/* --------------------- Responsive desktop-only GSAP builder ---------------- */
/* gsap.matchMedia's live MediaQueryList reactivity is unreliable in this preview
environment (it latches to the mount-time width). This measures innerWidth after
load + rAF and on a debounced resize, building/killing the desktop GSAP setup as
the breakpoint is crossed. `build` must return its own cleanup (e.g. ctx.revert). */
function responsiveDesktop(build, breakpoint = 768) {
let active = false, cleanup = null, raf = 0, to = 0;
const apply = () => {
const desktop = window.innerWidth >= breakpoint;
if (desktop && !active) {
active = true;
cleanup = build() || null;
if (window.ScrollTrigger) ScrollTrigger.refresh();
} else if (!desktop && active) {
active = false;
if (cleanup) { cleanup(); cleanup = null; }
if (window.ScrollTrigger) ScrollTrigger.refresh();
}
};
// Defer to rAF (past React's synchronous layout phase) so the pin's scrub wires
// correctly. refreshPriority on each pin keeps positions ordered regardless of
// creation order, so we no longer need synchronous (document-order) creation.
raf = requestAnimationFrame(apply);
const onLoad = () => apply();
const onResize = () => { clearTimeout(to); to = setTimeout(apply, 200); };
if (document.readyState !== 'complete') window.addEventListener('load', onLoad);
window.addEventListener('resize', onResize);
return () => {
if (raf) cancelAnimationFrame(raf);
window.removeEventListener('load', onLoad);
window.removeEventListener('resize', onResize);
clearTimeout(to);
if (cleanup) cleanup();
};
}
Object.assign(window, {
prefersReduced,
Icon, ChevronDown, ArrowUpRight, MailIcon, GithubIcon, LinkedinIcon,
ContactButton, GhostButton, FadeIn, AnimatedText, SectionLabel, responsiveDesktop,
});