Yannick Kurz yannick kurz

/* one variable font, one axis */
.word { font-variation-settings: 'wght' 500, 'opsz' 96; }

/* the slider writes that value live (one line of JS): */
slider.oninput = () =>
  word.style.fontVariationSettings =
    `'wght' ${slider.value}, 'opsz' 96`;

.peek .top { clip-path: inset(0 0 50% 0); }
.peek .bot { clip-path: inset(50% 0 0 0); }

.peek:hover .top   { transform: translateY(-30%); }
.peek:hover .bot   { transform: translateY(30%); }
.peek:hover .label { transform: scaleY(1); }

.wave span {
  display: inline-block;
  animation: wave 1.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * .08s);
}
@keyframes wave { 50% { transform: translateY(-.22em); } }

.melt span {
  transform-origin: top;
  transition: transform .5s ease-in, filter .5s ease-in;
  transition-delay: calc(var(--i) * .05s);
}
.melt:hover span {
  transform: translateY(.5em) scaleY(1.8);
  filter: blur(2px);
}

.fill {
  background: linear-gradient(#1E1A16, #1E1A16) no-repeat;
  background-size: 0% 100%;
  background-clip: text;
  color: #1e1a1633;
  transition: background-size 1s ease;
}
.fill.is-in { background-size: 100% 100%; }
/* the same observer toggles .is-in on scroll */

.reveal       { opacity: 0; transform: translateY(40px);
                transition: .7s; }
.reveal.is-in { opacity: 1; transform: none; }

/* toggle the class as it enters the viewport */
new IntersectionObserver(es => es.forEach(e =>
  e.target.classList.toggle('is-in', e.isIntersecting))
).observe(el);

.marquee { overflow: hidden; }
.marquee-track {
  display: inline-flex;
  animation: marquee 22s linear infinite;
}
@keyframes marquee { to { transform: translateX(-50%); } }
/* duplicate the items in markup for a seamless loop */