Custom cursor system

<!-- Page settings → Before </body> tag --> <script> document.addEventListener("DOMContentLoaded", () => { // A custom cursor on a touch device is a bug. On a hybrid laptop it is worse. if (!matchMedia("(hover: hover) and (pointer: fine)").matches) return; if (matchMedia("(prefers-reduced-motion: reduce)").matches) return; const cursor = document.querySelector(".cursor_component"); const ring = cursor.querySelector(".cursor_ring"); const dot = cursor.querySelector(".cursor_dot"); const label = cursor.querySelector(".cursor_label"); const preview = document.querySelector(".cursor_preview"); const pvImg = preview.querySelector("img"); document.documentElement.classList.add("has-cursor"); // this is what sets cursor:none // THREE speeds. This is the whole reason it feels good. const dotX = gsap.quickTo(dot, "x", { duration: 0.12, ease: "power3" }); const dotY = gsap.quickTo(dot, "y", { duration: 0.12, ease: "power3" }); const ringX = gsap.quickTo(ring, "x", { duration: 0.55, ease: "power3" }); const ringY = gsap.quickTo(ring, "y", { duration: 0.55, ease: "power3" }); const pvX = gsap.quickTo(preview, "x", { duration: 0.85, ease: "power3" }); const pvY = gsap.quickTo(preview, "y", { duration: 0.85, ease: "power3" }); gsap.set(preview, { scale: 0.92 }); addEventListener("mousemove", e => { dotX(e.clientX); dotY(e.clientY); ringX(e.clientX); ringY(e.clientY); pvX(e.clientX); pvY(e.clientY); }); // Reveal on the first move, NOT on mouseenter. If the pointer is already // over the page when the script runs — a reload, a mid-page landing — // mouseenter never fires and the cursor stays invisible. let shown = false; document.addEventListener("mousemove", () => { if (shown) return; shown = true; gsap.to(cursor, { opacity: 1, duration: 0.25 }); }); document.addEventListener("mouseleave", () => { shown = false; gsap.to([cursor, preview], { opacity: 0, duration: 0.25 }); }); // ── the state machine ─────────────────────────────────────────────────── const STATES = { default: () => { gsap.to(ring, { scale: 1, duration: 0.4, ease: "power3.out" }); gsap.to(dot, { scale: 1, opacity: 1, duration: 0.3 }); gsap.to(label, { opacity: 0, duration: 0.2 }); gsap.to(preview, { opacity: 0, scale: 0.92, duration: 0.35, ease: "power3.out" }); }, link: () => { gsap.to(ring, { scale: 1.9, duration: 0.45, ease: "power3.out" }); gsap.to(dot, { scale: 0, opacity: 0, duration: 0.3 }); gsap.to(label, { opacity: 0, duration: 0.2 }); }, view: () => { gsap.to(ring, { scale: 2.35, duration: 0.5, ease: "power3.out" }); gsap.to(dot, { scale: 0, opacity: 0, duration: 0.3 }); gsap.to(label, { opacity: 1, duration: 0.3, delay: 0.05 }); }, media: () => { gsap.to(ring, { scale: 0.35, duration: 0.45, ease: "power3.out" }); gsap.to(dot, { scale: 0, opacity: 0, duration: 0.3 }); gsap.to(label, { opacity: 0, duration: 0.2 }); gsap.to(preview, { opacity: 1, scale: 1, duration: 0.5, ease: "expo.out" }); } }; // Adding a fifth state later is: write it here, type the attribute in the // Designer. No new listeners, no new elements. document.querySelectorAll("[data-cursor]").forEach(el => { const state = el.dataset.cursor || "default"; el.addEventListener("mouseenter", () => { if (state === "media" && el.dataset.cursorMedia) pvImg.src = el.dataset.cursorMedia; if (state === "view") label.textContent = el.dataset.cursorLabel || "View"; (STATES[state] || STATES.default)(); }); el.addEventListener("mouseleave", () => STATES.default()); }); }); </script>