Spring-Physics Magnetic CTA Button & Cursor Follower

You are a senior interaction developer. Build a magnetic CTA button and a cursor follower.

1. Magnetic button:
- On pointer move over the button, measure its bounding rect and pull it toward the pointer: offset = (pointer - centre) * 0.35, clamped to ±18px.
- Drive it through a spring (stiffness 220, damping 22) or an equivalent 0.8s "expo.out" retargeting tween, so it lags slightly and overshoots on release.
- On pointer leave, return to 0 with the same spring.
- Expose strength (0.35) and clamp (18) as constants at the top.

2. Cursor follower:
- A small circle, fixed position, pointer-events: none, high z-index, centred on the cursor.
- Follows the pointer with a softer spring than the button.
- Only on fine pointers: hide it entirely on touch devices.

Constraints:
- No per-frame state updates or re-renders: motion values, quickTo or direct transforms only.
- Respect prefers-reduced-motion: no magnet, no follower.
- Clean up every listener.

Deliver the complete code plus two lines on how to attach it.

Target platform: Webflow.
- Build the structure as native Webflow Designer elements with Client-First class names (section_[name], [name]_component, [name]_item). No div soup from an HTML embed unless I ask for one.
- Hook every behaviour to custom attributes (data-gsap="…"), never to class names, so designers can restyle without breaking the script.
- Load GSAP through Webflow's built-in GSAP integration (Site settings) or the jsDelivr CDN tags, and put the init script in Page settings → Before </body> tag, wrapped in Webflow.push(() => { … }).
- Say which parts go in Designer styles, which in a page-head <style>, and which in the body script.
- Designer: add data-magnetic to any Button or Link Block, and one empty div with data-cursor (place it last in the body, size 14px, rounded, background set in Designer).
Motion timing: "Editorial". Use a base duration of 0.8s, ease "expo.out" (CSS: cubic-bezier(0.16, 1, 0.3, 1)), stagger 0.08s, scrub smoothing 0.8, and springs of stiffness 220 / damping 22, everywhere a duration, ease or spring appears.

<!-- Designer: data-magnetic on any button; one div [data-cursor] at the end of the page
     (14×14px, radius 50%, fixed, top 0 / left 0, pointer-events none, z-index 9999). -->

<!-- Site settings > Custom code > Footer -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script>
  window.Webflow ||= [];
  window.Webflow.push(() => {
    const ok = matchMedia("(pointer: fine) and (prefers-reduced-motion: no-preference)").matches;
    const dot = document.querySelector("[data-cursor]");
    if (!ok) { if (dot) dot.style.display = "none"; return; }

    const STRENGTH = 0.35, CLAMP = 18;
    const clamp = gsap.utils.clamp(-CLAMP, CLAMP);
    document.querySelectorAll("[data-magnetic]").forEach((btn) => {
      const x = gsap.quickTo(btn, "x", { duration: 0.8, ease: "expo.out" });
      const y = gsap.quickTo(btn, "y", { duration: 0.8, ease: "expo.out" });
      btn.addEventListener("pointermove", (e) => {
        const r = btn.getBoundingClientRect();
        x(clamp((e.clientX - r.left - r.width / 2) * STRENGTH));
        y(clamp((e.clientY - r.top - r.height / 2) * STRENGTH));
      });
      btn.addEventListener("pointerleave", () => { x(0); y(0); });
    });

    if (dot) {
      const half = dot.offsetWidth / 2;
      const dx = gsap.quickTo(dot, "x", { duration: 0.8 * 0.75, ease: "power3.out" });
      const dy = gsap.quickTo(dot, "y", { duration: 0.8 * 0.75, ease: "power3.out" });
      window.addEventListener("pointermove", (e) => { dx(e.clientX - half); dy(e.clientY - half); });
    }
  });
</script>