Dynamic Scrollbar — Lab — Carter Ogunsola

A slim grey bar that inks to black and blooms into a live analog clock as you scroll, then taps open into a working native-audio mini player. A faithful rebuild of Xavier Jac's three-state Webflow scrollbar, on its own Lenis-style smooth scroll.

Dependencies

GSAP Core — ticker + tweens

A scrollbar with somewhere to be

The scrollbar is the one piece of UI everyone ignores. This one earns a look. Scroll and the slim grey rail on the right inks to black and blooms into a little panel with a live analog clock; stop, and it settles back to a bar. Reach a section about music and a note surfaces on it. Tap that, and the whole capsule opens into a working mini player. You can also just grab the bar and scrub, the way a scrollbar should let you.

It’s a rebuild of a Webflow piece by Xavier Jac, ported to run as one self-contained module: the exact colours and dimensions, but native audio instead of Howler and its own scroll instead of the page’s.

One capsule, three sizes

Default is the 5×64 bar. Bloomed is a 50×188 clock. Tapped is a 264×397 player. One capsule does all three: it resizes, the panels blur-crossfade inside it, and the background inks grey→black as it grows.

The part worth stealing is what doesn’t animate together. Size and position are two separate jobs. The ticker owns the vertical position every frame (it centres the capsule on your place in the scroll, then clamps it to the rail), while an interruptible tween owns the width and height. The first draft let one GSAP Flip own both, and it fought itself: the bar froze mid-morph then snapped ~160px to catch up, and a bloom near the bottom slid out from under the cursor and flickered. Centring on the cursor point is what fixes the flicker — because the capsule is always taller than the bar, a bloom still covers wherever you were hovering, so it can’t slide away from you.

The feel

Blooming runs 0.65s, collapsing 0.6s, both power3.inOut; the background inks over 0.8s. The clock only shows while you’re actually moving: a 150ms pause settles it back to the bar, short enough to feel immediate but long enough that a stutter mid-scroll doesn’t flap it on and off. The scroll is self-owned (λ9), Lenis-style momentum without the dependency, which also hands the bar the exact velocity it reacts to instead of guessing.

The player is real

Native HTML5 Audio: play, pause, seek by dragging the timeline, skip tracks, with the wave bars animating only while sound is playing and freezing the instant you pause. Going native instead of Howler means it survives being copied out of here with nothing to install. It also knows its place: scroll away, or drift out of the music section, and it drops back to the clock while the track keeps playing. One bug worth naming, since it’s easy to hit — the play and pause glyphs are stacked in the same spot, so the hidden one needs pointer-events: none, or it eats the click and play only fires when you happen to catch the edge.

Make it yours

MORPH_IN / MORPH_OUT — the bloom and collapse durations (0.65 / 0.6). The two knobs for how the capsule transforms.
The state sizes (THUMB_*, MIN_*, MUSIC_*) — the bar, clock, and player dimensions. Change them and the morph re-targets on its own.
--sb-accent — the single spot of colour, on the clock hands, the note, and the wave. #ff4d00 here; everything else is the original’s greyscale.
REST_DELAY — the stillness before the clock collapses (150ms). Drop it for a snappier bar, raise it if quick scrolls make it flicker.

Credits

Xavier Jac — original scrollbar

Setup

<!-- GSAP (from CDN) -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>

<!-- Site tokens the styles use — swap freely -->
<style>
  :root {
    --font-sans: "Geist", system-ui, sans-serif;
    --font-mono: "Geist Mono", ui-monospace, monospace;
    --track: -0.02em;
    --ink: #1e1e1e;
    --ink-muted: rgba(30, 30, 30, 0.6);
    --ease-out-quad: cubic-bezier(0.5, 1, 0.89, 1);
  }
</style>

<!-- Sized stage — the script fills it -->
<div class="stage" style="position: relative; height: 100vh;"></div>

Style

.sb {
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-family: var(--font-sans);
  --sb-paper: #f2f2f2;
  --sb-rest: #d5d5d5;
  --sb-ink: #000;
  --sb-accent: #ff4d00;
  --sb-muted: #727272;
  --sb-track: #282828;
}

.sb__scroll {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
}

.sb__track {
  will-change: transform;
}

.sb__section {
  height: var(--sb-vh,100%);
  display: grid;
  place-items: center;
  padding: 2rem 4rem;
  box-sizing: border-box;
}

.sb__caption {
  max-width: 22ch;
  text-align: center;
  color: var(--ink-muted);
  font-size: clamp(1.1rem,2vw,1.6rem);
  line-height: 1.25;
  letter-spacing: var(--track);
  text-wrap: balance;
}

.sb__bar {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  width:$ {
    MUSIC_W
  }
  px;
  pointer-events: none;
  z-index: 5;
}

.sb__thumb {
  position: absolute;
  top: 0;
  right: 0;
  width:$ {
    THUMB_W
  }
  px;
  height:$ {
    THUMB_H
  }
  px;
  background: var(--sb-rest);
  color: var(--sb-paper);
  border-radius:$ {
    RADIUS
  }
  px;
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
}

.sb__thumb::before {
  content: "";
  position: absolute;
  inset: -16px;
}

.sb__inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.sb__min {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
  opacity: 0;
  transform: translateX(20%);
  filter: blur(30px);
  pointer-events: none;
}

.sb__min-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.sb__clock {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sb-paper);
  color: var(--sb-accent);
}

.sb__clock-face {
  width: 22px;
  height: 22px;
}

.sb__note {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--sb-accent);
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  will-change: transform,filter,opacity;
}

.sb__note svg {
  width: 16px;
  height: 16px;
}

.sb__time {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 10.8px;
  letter-spacing: -0.43px;
  line-height: 1.1;
  color: var(--sb-paper);
}

.sb__time .ampm {
  opacity: .75;
}

.sb__music {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 20px;
  box-sizing: border-box;
  opacity: 0;
  transform: translateX(100%);
  filter: blur(30px);
  pointer-events: none;
  gap: 32px;
}

.sb__cover {
  position: relative;
  width: 160px;
  height: 160px;
  align-self: center;
  border-radius: 20px;
  overflow: hidden;
  flex: none;
}

.sb__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sb__player {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sb__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
}

.sb__meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.sb__title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.64px;
  color: var(--sb-paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb__artist {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.64px;
  color: var(--sb-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb__wave {
  width: 32px;
  flex: none;
  color: var(--sb-accent);
}

.sb__wave svg {
  width: 100%;
  height: auto;
}

.sb__timeline {
  position: relative;
  height: 3px;
  border-radius: 100vw;
  overflow: hidden;
  cursor: pointer;
  background: var(--sb-track);
}

.sb__progress {
  position: absolute;
  inset: 0;
  background: var(--sb-rest);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.sb__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--sb-paper);
}

.sb__ctrl {
  cursor: pointer;
  color: var(--sb-paper);
  transition: opacity .2s var(--ease-out-quad),scale .15s var(--ease-out-quad);
}

.sb__ctrl:hover {
  opacity: .7;
}

.sb__ctrl:active {
  scale: .9;
}

.sb__ctrl svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sb__ctrl--sm {
  width: 28px;
  height: 28px;
}

.sb__toggle {
  position: relative;
  width: 32px;
  height: 32px;
}

.sb__toggle > * {
  position: absolute;
  inset: 0;
  width: 32px;
  height: 32px;
}

.sb__pause {
  opacity: 0;
  scale: .5;
  pointer-events: none;
}

.sb__credits {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sb__credit {
  text-align: center;
  font-size: 12px;
  letter-spacing: -0.48px;
  line-height: 1.3;
  color: var(--sb-paper);
}

.sb__credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .sb__scroll {
    scroll-behavior: auto;
  }
}

Script

const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
const damp = (cur, t, l, dt) => cur + (t - cur) * (1 - Math.exp(-l * dt));
const THUMB_W = 5;
const THUMB_H = 64;
const MIN_W = 50;
const MIN_H = 188;
const MUSIC_W = 264;
const MUSIC_H = 397;
const RADIUS = 30;
const BG_MORPH = 0.8;
const DEFAULTS = {
  morphIn: 0.65,

  morphOut: 0.6,

  restDelay: 150

};
const C_REST = "#d5d5d5";
const C_INK = "#000000";
const TRACKS = [
  { src: "https://carterogunsola.com/lab/music/deep-abstract-ambient_snowcap-401656.mp3", title: "D.A.A.S", artist: "Umbrella", cover: "https://carterogunsola.com/lab/covers/umbrella.jpg" },
  { src: "https://carterogunsola.com/lab/music/embrace-364091.mp3", title: "Embrace", artist: "Evgeny Bardyuzha", cover: "https://carterogunsola.com/lab/covers/embrace.jpg" },
  { src: "https://carterogunsola.com/lab/music/running-night-393139.mp3", title: "Running Night", artist: "Alex Make Music", cover: "https://carterogunsola.com/lab/covers/running-night.jpg" }
];
const SECTIONS = [
  { kind: "min", text: "Scroll the page — the bar on the right wakes up" },
  { kind: "min", text: "Pause, or hover it, and it blooms into a clock" },
  { kind: "min", text: "Normal scrolling still works — it just has a pulse" },
  { kind: "music", text: "A note appears. Tap it — the player is live" },
  { kind: "music", text: "Now playing. Hover to expand, drag the timeline to seek" },
  { kind: "min", text: "Back to default — clock only, no player" }
];
const clockSvg = `<svg viewBox="0 0 20 20" fill="none" class="sb__clock-face"><rect data-hour x="9.5" y="4" width="1" height="5.5" rx="0.5" fill="currentColor"/><rect data-min x="9.5" y="2" width="1" height="8" rx="0.5" fill="currentColor"/><circle cx="10" cy="10" r="1.25" fill="currentColor"/></svg>`;
const noteSvg = `<svg viewBox="0 0 20 20" fill="none"><path d="M19.5 14C19.5 15.933 17.933 17.5 16 17.5C14.067 17.5 12.5 15.933 12.5 14C12.5 12.067 14.067 10.5 16 10.5C16.98 10.5 17.865 10.903 18.5 11.552V5.59L7.5 7.423V16C7.5 17.933 5.933 19.5 4 19.5C2.067 19.5 0.5 17.933 0.5 16C0.5 14.067 2.067 12.5 4 12.5C4.98 12.5 5.865 12.903 6.5 13.552V2.576L19.5 0.41V14Z" fill="currentColor"/></svg>`;
const waveSvg = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><line x1="2" y1="15" x2="2" y2="9"/><line x1="7" y1="19.5" x2="7" y2="4.5"/><line x1="12" y1="22" x2="12" y2="2"/><line x1="17" y1="19.5" x2="17" y2="4.5"/><line x1="22" y1="15" x2="22" y2="9"/></svg>`;
const prevSvg = `<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="10 5 1 12 10 19"/><polygon points="22 5 13 12 22 19"/></svg>`;
const nextSvg = `<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="14 19 23 12 14 5"/><polygon points="2 19 11 12 2 5"/></svg>`;
const playSvg = `<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5.2 12 5.2 3 13 7.5 20.8 12 13 16.5 5.2 21"/></svg>`;
const pauseSvg = `<svg viewBox="0 0 24 24" fill="currentColor"><rect x="6.5" y="5.5" width="3" height="13" rx="0.4"/><rect x="14.5" y="5.5" width="3" height="13" rx="0.4"/></svg>`;
const STYLE_ID = "exp-scrollbar-style";
const CSS = `
.sb {
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-family: var(--font-sans);
  --sb-paper: #f2f2f2;
  --sb-rest: #d5d5d5;
  --sb-ink: #000;
  --sb-accent: #ff4d00;
  --sb-muted: #727272;
  --sb-track: #282828;
}

.sb__scroll {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
}

.sb__track {
  will-change: transform;
}

.sb__section {
  height: var(--sb-vh,100%);
  display: grid;
  place-items: center;
  padding: 2rem 4rem;
  box-sizing: border-box;
}

.sb__caption {
  max-width: 22ch;
  text-align: center;
  color: var(--ink-muted);
  font-size: clamp(1.1rem,2vw,1.6rem);
  line-height: 1.25;
  letter-spacing: var(--track);
  text-wrap: balance;
}

.sb__bar {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  width:$ {
    MUSIC_W
  }
  px;
  pointer-events: none;
  z-index: 5;
}

.sb__thumb {
  position: absolute;
  top: 0;
  right: 0;
  width:$ {
    THUMB_W
  }
  px;
  height:$ {
    THUMB_H
  }
  px;
  background: var(--sb-rest);
  color: var(--sb-paper);
  border-radius:$ {
    RADIUS
  }
  px;
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
}

.sb__thumb::before {
  content: "";
  position: absolute;
  inset: -16px;
}

.sb__inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.sb__min {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
  opacity: 0;
  transform: translateX(20%);
  filter: blur(30px);
  pointer-events: none;
}

.sb__min-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.sb__clock {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sb-paper);
  color: var(--sb-accent);
}

.sb__clock-face {
  width: 22px;
  height: 22px;
}

.sb__note {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--sb-accent);
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  will-change: transform,filter,opacity;
}

.sb__note svg {
  width: 16px;
  height: 16px;
}

.sb__time {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 10.8px;
  letter-spacing: -0.43px;
  line-height: 1.1;
  color: var(--sb-paper);
}

.sb__time .ampm {
  opacity: .75;
}

.sb__music {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 20px;
  box-sizing: border-box;
  opacity: 0;
  transform: translateX(100%);
  filter: blur(30px);
  pointer-events: none;
  gap: 32px;
}

.sb__cover {
  position: relative;
  width: 160px;
  height: 160px;
  align-self: center;
  border-radius: 20px;
  overflow: hidden;
  flex: none;
}

.sb__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sb__player {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sb__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
}

.sb__meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.sb__title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.64px;
  color: var(--sb-paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb__artist {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.64px;
  color: var(--sb-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb__wave {
  width: 32px;
  flex: none;
  color: var(--sb-accent);
}

.sb__wave svg {
  width: 100%;
  height: auto;
}

.sb__timeline {
  position: relative;
  height: 3px;
  border-radius: 100vw;
  overflow: hidden;
  cursor: pointer;
  background: var(--sb-track);
}

.sb__progress {
  position: absolute;
  inset: 0;
  background: var(--sb-rest);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.sb__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--sb-paper);
}

.sb__ctrl {
  cursor: pointer;
  color: var(--sb-paper);
  transition: opacity .2s var(--ease-out-quad),scale .15s var(--ease-out-quad);
}

.sb__ctrl:hover {
  opacity: .7;
}

.sb__ctrl:active {
  scale: .9;
}

.sb__ctrl svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sb__ctrl--sm {
  width: 28px;
  height: 28px;
}

.sb__toggle {
  position: relative;
  width: 32px;
  height: 32px;
}

.sb__toggle > * {
  position: absolute;
  inset: 0;
  width: 32px;
  height: 32px;
}

.sb__pause {
  opacity: 0;
  scale: .5;
  pointer-events: none;
}

.sb__credits {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sb__credit {
  text-align: center;
  font-size: 12px;
  letter-spacing: -0.48px;
  line-height: 1.3;
  color: var(--sb-paper);
}

.sb__credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .sb__scroll {
    scroll-behavior: auto;
  }
}
`;
function injectStyle() {
  if (document.getElementById(STYLE_ID)) return;
  const el = document.createElement("style");
  el.id = STYLE_ID;
  el.textContent = CSS;
  document.head.appendChild(el);
}
const experiment = {
  mount(root) {
    injectStyle();
    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const P = { ...DEFAULTS };
    const ac = new AbortController();
    const { signal } = ac;
    const sb = document.createElement("div");
    sb.className = "sb";
    const scroll = document.createElement("div");
    scroll.className = "sb__scroll";
    const track = document.createElement("div");
    track.className = "sb__track";
    SECTIONS.forEach((s) => {
      const sec = document.createElement("section");
      sec.className = "sb__section";
      sec.dataset.kind = s.kind;
      sec.innerHTML = `<p class="sb__caption">${s.text}</p>`;
      track.appendChild(sec);
    });
    scroll.appendChild(track);
    const bar = document.createElement("div");
    bar.className = "sb__bar";
    const thumb = document.createElement("div");
    thumb.className = "sb__thumb";
    thumb.innerHTML = `
      <div class="sb__inner">
        <div class="sb__min">
          <div class="sb__min-top">
            <div class="sb__clock">${clockSvg}</div>
            <div class="sb__note" role="button" aria-label="Open player">${noteSvg}</div>
          </div>
          <div class="sb__time"><span data-time>00:00</span><span class="ampm" data-ampm>AM</span></div>
        </div>
        <div class="sb__music">
          <div class="sb__cover"><img alt="" decoding="async"/></div>
          <div class="sb__player">
            <div class="sb__head">
              <div class="sb__meta"><span class="sb__title" data-title></span><span class="sb__artist" data-artist></span></div>
              <div class="sb__wave">${waveSvg}</div>
            </div>
            <div class="sb__timeline" data-timeline><div class="sb__progress" data-progress></div></div>
            <div class="sb__controls">
              <div class="sb__ctrl sb__ctrl--sm" data-prev role="button" aria-label="Previous">${prevSvg}</div>
              <div class="sb__toggle">
                <div class="sb__ctrl sb__play" data-play role="button" aria-label="Play">${playSvg}</div>
                <div class="sb__ctrl sb__pause" data-pause role="button" aria-label="Pause">${pauseSvg}</div>
              </div>
              <div class="sb__ctrl sb__ctrl--sm" data-next role="button" aria-label="Next">${nextSvg}</div>
            </div>
            <div class="sb__credits">
              <p class="sb__credit">Icons :: <a href="https://angularicons.com/" target="_blank" rel="noreferrer">Angular Icons</a> / <a href="https://www.osmo.supply/" target="_blank" rel="noreferrer">Osmo</a></p>
              <p class="sb__credit">Original /Motion :: Xavier Jac (<a href="https://x.com/KMkota0" target="_blank" rel="noreferrer">@KMkota0</a>)</p>
            </div>
          </div>
        </div>
      </div>`;
    bar.appendChild(thumb);
    sb.append(scroll, bar);
    root.appendChild(sb);
    const q = (s) => thumb.querySelector(s);
    const minEl = q(".sb__min");
    const musicEl = q(".sb__music");
    const hourHand = q("[data-hour]");
    const minHand = q("[data-min]");
    const timeEl = q("[data-time]");
    const ampmEl = q("[data-ampm]");
    const tickClock = () => {
      const d =  new Date();
      const h = d.getHours();
      const m = d.getMinutes();
      gsap.to(hourHand, { rotation: h % 12 * 30 + m * 0.5, transformOrigin: "center bottom", duration: 0.5, ease: "power2.out", overwrite: "auto" });
      gsap.to(minHand, { rotation: m * 6, transformOrigin: "center bottom", duration: 0.5, ease: "power2.out", overwrite: "auto" });
      timeEl.textContent = `${String(h % 12 || 12).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
      ampmEl.textContent = h >= 12 ? "PM" : "AM";
    };
    tickClock();
    const clockInt = window.setInterval(tickClock, 1e3);
    const audio = new Audio();
    audio.preload = "none";
    let trackIdx = 0;
    const coverImg = q(".sb__cover img");
    const titleEl = q("[data-title]");
    const artistEl = q("[data-artist]");
    const progressEl = q("[data-progress]");
    const timelineEl = q("[data-timeline]");
    const playBtn = q("[data-play]");
    const pauseBtn = q("[data-pause]");
    const waveLines = [...thumb.querySelectorAll(".sb__wave line")];
    let waveTl = null;
    const startWave = () => {
      waveTl?.kill();
      waveTl = gsap.timeline({ repeat: -1 });
      waveLines.forEach((ln, i) => {
        const y1 = +ln.getAttribute("y1");
        const y2 = +ln.getAttribute("y2");
        const h = Math.abs(y2 - y1) * 0.4;
        waveTl.to(ln, { attr: { y1: y1 - h, y2: y2 + h }, duration: 0.4 + i * 0.05, ease: "sine.inOut", yoyo: true, repeat: -1 }, i * 0.08);
      });
    };
    const stopWave = () => {
      waveTl?.kill();
      waveTl = null;
      waveLines.forEach((ln) => {
        const y1 = ln.dataset.y1;
        const y2 = ln.dataset.y2;
        gsap.to(ln, { attr: { y1, y2 }, duration: 0.3, ease: "power2.out" });
      });
    };
    waveLines.forEach((ln) => {
      ln.dataset.y1 = ln.getAttribute("y1");
      ln.dataset.y2 = ln.getAttribute("y2");
    });
    const load = (i, play = false) => {
      trackIdx = (i + TRACKS.length) % TRACKS.length;
      const t = TRACKS[trackIdx];
      audio.src = t.src;
      coverImg.src = t.cover;
      titleEl.textContent = t.title;
      artistEl.textContent = t.artist;
      gsap.set(progressEl, { scaleX: 0 });
      if (play) audio.play().catch(() => {
      });
    };
    audio.addEventListener("play", () => {
      gsap.to(playBtn, { opacity: 0, scale: 0.5, pointerEvents: "none", duration: 0.3, ease: "power2.out" });
      gsap.to(pauseBtn, { opacity: 1, scale: 1, pointerEvents: "auto", duration: 0.3, ease: "power2.out" });
      startWave();
    }, { signal });
    audio.addEventListener("pause", () => {
      gsap.to(playBtn, { opacity: 1, scale: 1, pointerEvents: "auto", duration: 0.3, ease: "power2.out" });
      gsap.to(pauseBtn, { opacity: 0, scale: 0.5, pointerEvents: "none", duration: 0.3, ease: "power2.out" });
      stopWave();
    }, { signal });
    audio.addEventListener("timeupdate", () => {
      if (audio.duration) gsap.set(progressEl, { scaleX: audio.currentTime / audio.duration });
    }, { signal });
    audio.addEventListener("ended", () => load(trackIdx + 1, true), { signal });
    playBtn.addEventListener("click", (e) => {
      e.stopPropagation();
      audio.play().catch(() => {
      });
    }, { signal });
    pauseBtn.addEventListener("click", (e) => {
      e.stopPropagation();
      audio.pause();
    }, { signal });
    q("[data-prev]").addEventListener("click", (e) => {
      e.stopPropagation();
      load(trackIdx - 1, !audio.paused);
    }, { signal });
    q("[data-next]").addEventListener("click", (e) => {
      e.stopPropagation();
      load(trackIdx + 1, !audio.paused);
    }, { signal });
    timelineEl.addEventListener("click", (e) => {
      e.stopPropagation();
      const r = timelineEl.getBoundingClientRect();
      if (audio.duration) audio.currentTime = (e.clientX - r.left) / r.width * audio.duration;
    }, { signal });
    load(0);
    let state = "default";
    const sizes = {
      default: [THUMB_W, THUMB_H, RADIUS],
      min: [MIN_W, MIN_H, RADIUS],
      music: [MUSIC_W, MUSIC_H, RADIUS]
    };
    const dims = { w: THUMB_W, h: THUMB_H, r: RADIUS };
    const applyDims = () => {
      thumb.style.width = `${dims.w}px`;
      thumb.style.height = `${dims.h}px`;
      thumb.style.borderRadius = `${dims.r}px`;
    };
    const setState = (next) => {
      if (next === state) return;
      state = next;
      const showMin = next === "min";
      const showMusic = next === "music";
      const [w, h, r] = sizes[next];
      const dur = reduced ? 0 : next === "default" ? P.morphOut : P.morphIn;
      gsap.to(dims, { w, h, r, duration: dur, ease: "power3.inOut", overwrite: true, onUpdate: applyDims });
      gsap.to(thumb, { backgroundColor: next === "default" ? C_REST : C_INK, duration: reduced ? 0 : BG_MORPH, ease: next === "default" ? "power3.inOut" : "power3.out", overwrite: "auto" });
      gsap.to(minEl, { opacity: showMin ? 1 : 0, x: showMin ? "0%" : "20%", filter: `blur(${showMin ? 0 : 30}px)`, duration: reduced ? 0 : 0.6, ease: "power3.inOut", pointerEvents: showMin ? "auto" : "none", overwrite: "auto" });
      gsap.to(musicEl, { opacity: showMusic ? 1 : 0, x: showMusic ? "0%" : "100%", filter: `blur(${showMusic ? 0 : 30}px)`, duration: reduced ? 0 : showMusic ? 0.65 : 0.6, ease: "power3.inOut", pointerEvents: showMusic ? "auto" : "none", overwrite: "auto" });
    };
    let target = 0;
    let cur = 0;
    let vel = 0;
    let maxScroll = 0;
    let progress = 0;
    let hovering = false;
    let barDrag = false;
    let sectionKind = "min";
    let restTimer = null;
    const measureScroll = () => {
      sb.style.setProperty("--sb-vh", `${scroll.clientHeight}px`);
      maxScroll = Math.max(0, track.scrollHeight - scroll.clientHeight);
      target = clamp(target, 0, maxScroll);
    };
    const ro = new ResizeObserver(measureScroll);
    ro.observe(scroll);
    measureScroll();
    sb.addEventListener("wheel", (e) => {
      e.preventDefault();
      target = clamp(target + e.deltaY, 0, maxScroll);
    }, { passive: false, signal });
    let touchY = 0;
    sb.addEventListener("touchstart", (e) => {
      touchY = e.touches[0].clientY;
    }, { passive: true, signal });
    sb.addEventListener("touchmove", (e) => {
      e.preventDefault();
      const y = e.touches[0].clientY;
      target = clamp(target + (touchY - y) * 1.5, 0, maxScroll);
      touchY = y;
    }, { passive: false, signal });
    let barStartY = 0;
    let barStartTarget = 0;
    thumb.addEventListener("pointerdown", (e) => {
      if (state === "music") return;
      if (e.target.closest(".sb__note")) return;
      barDrag = true;
      barStartY = e.clientY;
      barStartTarget = target;
      thumb.setPointerCapture?.(e.pointerId);
    }, { signal });
    window.addEventListener("pointermove", (e) => {
      if (!barDrag) return;
      const range = Math.max(1, bar.clientHeight - sizes[state][1]);
      target = clamp(barStartTarget + (e.clientY - barStartY) / range * maxScroll, 0, maxScroll);
    }, { signal });
    window.addEventListener("pointerup", () => barDrag = false, { signal });
    const currentKind = () => {
      const mid = cur + scroll.clientHeight / 2;
      const idx = clamp(Math.floor(mid / scroll.clientHeight), 0, SECTIONS.length - 1);
      return SECTIONS[idx].kind;
    };
    const note = q(".sb__note");
    let noteShown = false;
    gsap.set(note, { y: "100%", opacity: 0, scale: 0.5, filter: "blur(20px)", pointerEvents: "none" });
    const showNote = (on) => {
      if (on === noteShown) return;
      noteShown = on;
      gsap.to(note, {
        y: on ? "0%" : "100%",
        opacity: on ? 1 : 0,
        scale: on ? 1 : 0.5,
        filter: on ? "blur(0px)" : "blur(20px)",
        duration: on ? 0.6 : 0.45,
        ease: "power3.inOut",
        pointerEvents: on ? "auto" : "none"
      });
    };
    let hoverLeaveTimer = null;
    thumb.addEventListener("pointerenter", () => {
      if (hoverLeaveTimer) {
        clearTimeout(hoverLeaveTimer);
        hoverLeaveTimer = null;
      }
      hovering = true;
      if (state === "default") setState("min");
    }, { signal });
    thumb.addEventListener("pointerleave", () => {
      hovering = false;
      if (hoverLeaveTimer) clearTimeout(hoverLeaveTimer);
      hoverLeaveTimer = setTimeout(() => {
        hoverLeaveTimer = null;
        if (!hovering && state === "min" && !barDrag) setState("default");
      }, 120);
    }, { signal });
    note.addEventListener("click", (e) => {
      e.stopPropagation();
      if (sectionKind === "music") setState("music");
    }, { signal });
    musicEl.addEventListener("pointerleave", (e) => {
      if (state !== "music") return;
      if (thumb.contains(e.relatedTarget)) return;
      setState("min");
    }, { signal });
    const tick = (_t, dtMs) => {
      const dt = Math.min(dtMs, 64) / 1e3 || 0.016;
      const prev = cur;
      cur = reduced ? target : damp(cur, target, 9, dt);
      if (Math.abs(target - cur) < 0.05) cur = target;
      vel = cur - prev;
      track.style.transform = `translate3d(0, ${-cur}px, 0)`;
      progress = maxScroll > 0 ? cur / maxScroll : 0;
      sectionKind = currentKind();
      showNote(sectionKind === "music");
      const scrolling = Math.abs(vel) > 0.15 || Math.abs(target - cur) > 0.6;
      if (state === "music" && !barDrag && (scrolling || sectionKind !== "music")) {
        setState("min");
      } else if (!hovering && !barDrag) {
        if (scrolling || sectionKind === "music") {
          if (restTimer) {
            clearTimeout(restTimer);
            restTimer = null;
          }
          if (state === "default") setState("min");
        } else if (state === "min" && !restTimer) {
          restTimer = setTimeout(() => {
            restTimer = null;
            if (!hovering && !barDrag && state === "min") setState("default");
          }, P.restDelay);
        }
      }
      const slimCentre = progress * (bar.clientHeight - THUMB_H) + THUMB_H / 2;
      const barY = clamp(slimCentre - dims.h / 2, 0, Math.max(0, bar.clientHeight - dims.h));
      thumb.style.transform = `translateY(${barY}px)`;
    };
    gsap.ticker.add(tick);
    if (!reduced) gsap.from(thumb, { opacity: 0, duration: 0.6, ease: "power2.out", delay: 0.1 });
    const set = (key, value) => {
      if (key === "accent") {
        sb.style.setProperty("--sb-accent", String(value));
      } else if (key in P) {
        P[key] = Number(value);
      }
    };
    const destroy = () => {
      ac.abort();
      gsap.ticker.remove(tick);
      ro.disconnect();
      clearInterval(clockInt);
      if (restTimer) clearTimeout(restTimer);
      if (hoverLeaveTimer) clearTimeout(hoverLeaveTimer);
      waveTl?.kill();
      audio.pause();
      audio.src = "";
      gsap.killTweensOf([thumb, dims, minEl, musicEl, note, playBtn, pauseBtn, progressEl, ...waveLines]);
      sb.remove();
    };
    return { destroy, set };
  }
};
experiment.mount(document.querySelector(".stage"));

Dynamic Scrollbar

Experiment coming soon Loading experiment

Dynamic Scrollbar — Lab experiment