<img src="https://images.unsplash.com/photo-1696149328298-6e2f257bd45a?q=80&w=2104&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">

<a class="author" href="https://github.com/plsankar/" target="_blank">Github: @plsankar</a>

body {
  width: 100vw;
  height: 100vh;
  overflow:hidden;
  background: black;
  --guide-color-comps: 230, 5%, 80%;
  --bg-color-secondary: hsl(230, 7%, 10%);
  background-image: radial-gradient(hsla(var(--guide-color-comps), 0.08) 1px, transparent 0), radial-gradient(hsla(var(--guide-color-comps), 0.04) 1px, transparent 0);
    background-size: 32px 32px, 8px 8px;
    background-position: center;
    background-color: var(--bg-color-secondary);
}

img {
  object-fit:cover;
  pointer-events: none;
  width: 100%;
  height: 100%;
  --x: 50;
  --y: 50;
  --size: 10;
  --sizeF: 1;
  clip-path: circle(calc(var(--sizeF) * calc(var(--size)) * 1%) at calc(var(--x) * 1%) calc(var(--y) * 1%));
}
* {
  user-select: none;
}

.author {
    display: inline-block;
    line-height: 1;
    color: white;
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1;
    font-size: 14px;
    opacity: 0.6;
    text-decoration: none !important;
}

.author:hover {
  opacity: 1;
}

import { Pane } from "https://esm.sh/tweakpane";
import gsap from "https://esm.sh/gsap";

const xTo = gsap.quickTo("img", "--x", { duration: 0.6, ease: "power3" });
const yTo = gsap.quickTo("img", "--y", { duration: 0.6, ease: "power3" });
const sizeTo = gsap.quickTo("img", "--size", { duration: 0.6, ease: "power3" });
const sizeFTo = gsap.quickTo("img", "--sizeF", {
  duration: 0.6,
  ease: "power3"
});

window.addEventListener("mousemove", (e) => {
  let x = (e.clientX / window.innerWidth) * 100;
  let y = (e.clientY / window.innerHeight) * 100;
  xTo(x);
  yTo(y);
});

const PARAMS = {
  size: 10,
  click: true
};

const pane = new Pane();
const f1 = pane.addFolder({
  title: "Control"
});
const sizeBinding = f1.addBinding(PARAMS, "size", {
  min: 0,
  max: 100
});
sizeBinding.on("change", function (ev) {
  sizeTo(PARAMS.size);
});
sizeTo(PARAMS.size);

f1.addBinding(PARAMS, "click");

window.addEventListener(
  "mouseup",
  function (e) {
    switch (e.button) {
      case 0:
        PARAMS.click && sizeFTo(1);
        break;
    }
  },
  false
);

window.addEventListener(
  "mousedown",
  function (e) {
    switch (e.button) {
      case 0:
        PARAMS.click && sizeFTo(2);
        break;
    }
  },
  false
);