<section class="demo" id="stage">
<h1 class="demo__word" id="word">MASS</h1>
</section>.demo {
min-height: 100dvh;
display: grid;
place-items: center;
background: #08080a;
color: #f4f4f2;
font-family: "Helvetica Neue", system-ui, sans-serif;
}
.demo__word {
margin: 0;
display: flex;
gap: 0.02em;
font-size: clamp(56px, 16vw, 128px);
font-weight: 500;
letter-spacing: -0.06em;
line-height: 1;
}
.demo__word span {
display: inline-block;
font-weight: 300;
will-change: font-weight, transform;
}const stage = document.querySelector("#stage");
const word = document.querySelector("#word");
const letters = word.textContent.split("").map(function (char) {
const span = document.createElement("span");
span.textContent = char;
return span;
});
word.textContent = "";
letters.forEach(function (span) { word.appendChild(span); });
function weigh(clientX, clientY) {
letters.forEach(function (span) {
const rect = span.getBoundingClientRect();
const dx = clientX - (rect.left + rect.width / 2);
const dy = clientY - (rect.top + rect.height / 2);
const dist = Math.hypot(dx, dy);
const t = Math.max(0, 1 - dist / 180);
span.style.fontWeight = String(Math.round(200 + t * t * 700));
gsap.to(span, {
scale: 1 + t * 0.08,
duration: 0.28,
ease: "power2.out",
overwrite: "auto",
});
});
}
stage.addEventListener("pointermove", function (event) {
weigh(event.clientX, event.clientY);
});
weigh(window.innerWidth * 0.5, window.innerHeight * 0.5);
