/* Storefront home — Frise « BrandJourney » (RAFFINÉ par Fable / Claude Design — depuis la v2). Source factuelle : PDF « The Journey So Far » p.14-15 (2014→2025) — années / produits / ordre INCHANGÉS, chemins d'images INCHANGÉS. Polish DS : frise sémantique (time[datetime]), ligne de vie continue, révélation au scroll, barre de progression + flèches (desktop & mobile), prefers-reduced-motion respecté. Tokens réels --mg-yellow (le seed pointait --mg-honey* fantômes). Zéro dépendance externe. CSS limité à .bj-*. window.BrandJourney. */ function BrandJourney() { const { useRef, useEffect, useState } = React; const STEPS = [ { y: "2014", m: "Nov", dt: "2014-11", t: "Le début du voyage", d: "« Juste correct » ne suffit pas. L'histoire ne fait que commencer.", img: "journey-2014" }, { y: "2016", m: "Déc", dt: "2016-12", t: "Le Z70", d: "Notre tout premier kit clavier.", img: "journey-2016" }, { y: "2017", m: "Juin", dt: "2017-06", t: "Les keycaps MDA", d: "Le premier profil MDA en Chine.", img: "journey-2017" }, { y: "2018", m: "Juin", dt: "2018-06", t: "Big Bang & la marque", d: "Premier set ortho-linéaire au monde. MelGeek est lancé.", img: "journey-2018" }, { y: "2019", m: "Jan–Oct", dt: "2019-01", t: "Alu, sans fil, wow", d: "MOJO60 + Ember : notre premier clavier sans fil.", img: "journey-2019" }, { y: "2020", m: "Mai–Oct", dt: "2020-05", t: "Pro & Plastic", d: "MOJO75 Pro gasket-mount ; collab The Wandering Earth.", img: "journey-2020" }, { y: "2021", m: "Août", dt: "2021-08", t: "Clear is the New Cool", d: "MOJO68 — l'un des premiers claviers mécaniques transparents.", img: "journey-2021" }, { y: "2022", m: "Juil–Oct", dt: "2022-07", t: "Function Meets Fun", d: "MOJO84, puis Pixel — compatible briques.", img: "journey-2022" }, { y: "2023", m: "Mai–Déc", dt: "2023-05", t: "MagneticLeap : Cyber01", d: "Notre premier clavier magnétique. Une nouvelle ère commence.", img: "journey-2023" }, { y: "2024", m: "Avr–Mai", dt: "2024-04", t: "Game On", d: "MADE68 magnétique à lightbox. Nos premiers tournois.", img: "journey-2024" }, { y: "2025", m: "Avr–Déc", dt: "2025-04", t: "Passage au niveau supérieur", d: "Centauri, notre clavier phare. Avec sa souris Horus.", img: "journey-2025" }, { y: "2026", m: "coming soon", dt: "2026", t: "Cap sur la France !", d: "Notre toute première édition AZERTY. À suivre…", img: "journey-2026" }, ]; const railRef = useRef(null); const [prog, setProg] = useState(0); const [edge, setEdge] = useState({ s: true, e: false }); useEffect(() => { const el = railRef.current; if (!el) return; const onScroll = () => { const max = el.scrollWidth - el.clientWidth; setProg(max > 0 ? el.scrollLeft / max : 0); setEdge({ s: el.scrollLeft <= 2, e: el.scrollLeft >= max - 2 }); }; // Desktop souris : molette verticale → défilement horizontal (« glissez » ne marche pas à la souris). const onWheel = (e) => { if (el.scrollWidth <= el.clientWidth) return; if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return; // laisse le trackpad horizontal natif el.scrollLeft += e.deltaY; e.preventDefault(); }; onScroll(); el.addEventListener("scroll", onScroll, { passive: true }); el.addEventListener("wheel", onWheel, { passive: false }); window.addEventListener("resize", onScroll); return () => { el.removeEventListener("scroll", onScroll); el.removeEventListener("wheel", onWheel); window.removeEventListener("resize", onScroll); }; }, []); useEffect(() => { const el = railRef.current; if (!el) return; const cards = el.querySelectorAll(".bj-card"); const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (reduce || !("IntersectionObserver" in window)) { cards.forEach((c) => c.classList.add("is-in")); return; } const io = new IntersectionObserver( (ents) => ents.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("is-in"); io.unobserve(e.target); } }), { threshold: 0.2 } ); cards.forEach((c) => io.observe(c)); return () => io.disconnect(); }, []); const nudge = (dir) => { const el = railRef.current; if (!el) return; const card = el.querySelector(".bj-card"); const gap = parseFloat(getComputedStyle(el).columnGap || getComputedStyle(el).gap) || 18; const step = card ? card.getBoundingClientRect().width + gap : el.clientWidth * 0.8; const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches; el.scrollBy({ left: dir * step, behavior: reduce ? "auto" : "smooth" }); }; return (
〔 2014 → 2026 〕

Le parcours jusqu'ici

D'une idée simple à une communauté mondiale de joueurs créatifs.

{STEPS.map((s, i) => (
{"MelGeek
{s.m}

{s.t}

{s.d}

))}
2014 2026
); } window.BrandJourney = BrandJourney;