20:Te933,

<script lang="ts">
  import type { Snippet } from "svelte";

  let {
    accent = "#FF6A1F",
    wipeMs = 800,
    direction = "leftward",
    borderWidth = 3,
    autoPlay = false,
    children,
  }: {
    accent?: string;
    wipeMs?: number;
    direction?: "leftward" | "rightward";
    borderWidth?: number;
    autoPlay?: boolean;
    children?: Snippet;
  } = $props();

  let hovered = $state(false);
  let focused = $state(false);
  let pressed = $state(false);
  let autoActive = $state(false);
  let reduced = $state(false);

  let active = $derived(hovered || focused || pressed || (autoPlay && autoActive));
  let discDiameter = $derived(Math.max(46 - borderWidth * 2, 4));
  let parkedRight = $derived(direction === "leftward");
  // The resting coin sits flush against the border, so side padding must clear its full
  // diameter (plus a gap) or the label's characters land under it at near-zero contrast.
  let sidePadding = $derived(discDiameter + 10);

  let firstTimer = 0;
  let hideTimer = 0;
  let loopTimer = 0;
  let mql: MediaQueryList | undefined;

  function clearAutoTimers() {
    clearTimeout(firstTimer);
    clearTimeout(hideTimer);
    clearInterval(loopTimer);
  }

  function startAutoPlay() {
    clearAutoTimers();
    const run = () => {
      autoActive = true;
      hideTimer = window.setTimeout(() => {
        autoActive = false;
      }, wipeMs + 300);
    };
    firstTimer = window.setTimeout(run, 700);
    loopTimer = window.setInterval(run, wipeMs + 2200);
  }

  $effect(() => {
    mql = window.matchMedia("(prefers-reduced-motion: reduce)");
    reduced = mql.matches;
    const onChange = () => {
      reduced = mql?.matches ?? false;
    };
    mql.addEventListener("change", onChange);
    return () => mql?.removeEventListener("change", onChange);
  });

  $effect(() => {
    if (autoPlay) startAutoPlay();
    else clearAutoTimers();
    return clearAutoTimers;
  });

  function onPointerEnter(event: PointerEvent) {
    if (event.pointerType === "mouse") hovered = true;
  }
  function onPointerLeave(event: PointerEvent) {
    if (event.pointerType === "mouse") hovered = false;
    pressed = false;
  }
  function onPointerDown() {
    pressed = true;
  }
  function onPointerUp() {
    pressed = false;
  }
  function onPointerCancel() {
    pressed = false;
  }
</script>

<button
  type="button"
  class="wipe-fill-button"
  class:pressed
  style="--wipe-accent: {accent}; --wipe-height: 46px; --wipe-border: {borderWidth}px; padding: 0 {sidePadding}px"
  onpointerenter={onPointerEnter}
  onpointerleave={onPointerLeave}
  onpointerdown={onPointerDown}
  onpointerup={onPointerUp}
  onpointercancel={onPointerCancel}
  onfocus={() => (focused = true)}
  onblur={() => (focused = false)}
>
  {#if reduced}
    <span
      aria-hidden="true"
      class="disc disc-fade"
      style="opacity: {active ? 1 : 0}; transition-duration: {wipeMs}ms"
    ></span>
  {:else}
    <span
      aria-hidden="true"
      class="disc"
      class:disc-right={parkedRight}
      class:disc-left={!parkedRight}
      style="width: {active ? '100%' : discDiameter + 'px'}; background: {active ? 'var(--wipe-dark)' : 'var(--wipe-coin)'}; transition-duration: {wipeMs}ms"
    ></span>
  {/if}
  <span class="label">{@render children?.()}</span>
</button>

<style>
  .wipe-fill-button {
    --wipe-dark: #141210;
    --wipe-coin: #f5f1e8;
    --wipe-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    height: var(--wipe-height);
    padding: 0 18px;
    border-style: solid;
    border-width: var(--wipe-border);
    border-color: var(--wipe-accent);
    border-radius: 9999px;
    background: var(--wipe-accent);
    color: #fff;
    font: 400 18px/1 system-ui, sans-serif;
    letter-spacing: 0.01em;
    cursor: pointer;
    user-select: none;
    outline: none;
    transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .wipe-fill-button:focus-visible {
    box-shadow: 0 0 0 2px var(--wipe-accent);
    outline-offset: 2px;
  }
  .wipe-fill-button.pressed {
    transform: scale(0.95);
  }
  .label {
    position: relative;
    z-index: 1;
  }
  .disc {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 9999px;
    pointer-events: none;
    transition-property: width, background-color;
    transition-timing-function: var(--wipe-ease);
  }
  .disc-right {
    right: 0;
  }
  .disc-left {
    left: 0;
  }
  .disc-fade {
    inset: 0;
    background: var(--wipe-dark);
    transition-property: opacity;
    transition-timing-function: var(--wipe-ease);
  }
</style>

21:T12ba,--- interface Props { accent?: string; wipeMs?: number; direction?: "leftward" | "rightward"; borderWidth?: number; autoPlay?: boolean; } const { accent = "#FF6A1F", wipeMs = 800, direction = "leftward", borderWidth = 3, autoPlay = false } = Astro.props; const parkedRight = direction === "leftward"; const discDiameter = Math.max(46 - borderWidth * 2, 4); // The resting coin sits flush against the border, so side padding must clear its full // diameter (plus a gap) or the label's characters land under it at near-zero contrast. const sidePadding = discDiameter + 10; --- 22:Td5a6,

---
interface Props {
  accent?: string;
  wipeMs?: number;
  direction?: "leftward" | "rightward";
  borderWidth?: number;
  autoPlay?: boolean;
}
const { accent = "#FF6A1F", wipeMs = 800, direction = "leftward", borderWidth = 3, autoPlay = false } = Astro.props;
const parkedRight = direction === "leftward";
const discDiameter = Math.max(46 - borderWidth * 2, 4);
// The resting coin sits flush against the border, so side padding must clear its full
// diameter (plus a gap) or the label's characters land under it at near-zero contrast.
const sidePadding = discDiameter + 10;
---

<button
  type="button"
  class="wipe-fill-button"
  data-wipe-fill-button
  data-wipe-ms={wipeMs}
  data-auto-play={autoPlay ? "true" : "false"}
  style={`--wipe-accent: ${accent}; --wipe-height: 46px; --wipe-border: ${borderWidth}px; padding: 0 ${sidePadding}px`}
>
  <span
    aria-hidden="true"
    class:list={["wipe-fill-button__disc", parkedRight ? "wipe-fill-button__disc--right" : "wipe-fill-button__disc--left"]}
    data-wipe-disc
    style={`width: ${discDiameter}px`}
  ></span>
  <span class="wipe-fill-button__label"><slot /></span>
</button>

<style>
  .wipe-fill-button {
    --wipe-dark: #141210;
    --wipe-coin: #f5f1e8;
    --wipe-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    height: var(--wipe-height);
    padding: 0 18px;
    border-style: solid;
    border-width: var(--wipe-border);
    border-color: var(--wipe-accent);
    border-radius: 9999px;
    background: var(--wipe-accent);
    color: #fff;
    font: 400 18px/1 system-ui, sans-serif;
    letter-spacing: 0.01em;
    cursor: pointer;
    user-select: none;
    outline: none;
    transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .wipe-fill-button:focus-visible {
    box-shadow: 0 0 0 2px var(--wipe-accent);
    outline-offset: 2px;
  }
  .wipe-fill-button.is-pressed {
    transform: scale(0.95);
  }
  .wipe-fill-button__label {
    position: relative;
    z-index: 1;
  }
  .wipe-fill-button__disc {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--wipe-coin);
    border-radius: 9999px;
    pointer-events: none;
    transition-property: width, background-color;
    transition-timing-function: var(--wipe-ease);
  }
  .wipe-fill-button__disc--right {
    right: 0;
  }
  .wipe-fill-button__disc--left {
    left: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .wipe-fill-button__disc {
      inset: 0 !important;
      width: auto !important;
      background: var(--wipe-dark) !important;
      opacity: 0;
      transition-property: opacity;
    }
    .wipe-fill-button.is-active .wipe-fill-button__disc {
      opacity: 1;
    }
  }
</style>

<script>
  function setup(button: HTMLButtonElement) {
    const disc = button.querySelector<HTMLSpanElement>("[data-wipe-disc]");
    if (!disc) return;
    const wipeMs = Number(button.dataset.wipeMs ?? "800");
    const restWidth = disc.style.width;
    disc.style.transitionDuration = `${wipeMs}ms`;

    let hovered = false;
    let focused = false;
    let pressed = false;
    let autoActive = false;

    const apply = () => {
      const active = hovered || focused || pressed || autoActive;
      button.classList.toggle("is-active", active);
      disc.style.width = active ? "100%" : restWidth;
      disc.style.background = active ? "var(--wipe-dark)" : "var(--wipe-coin)";
    };

    button.addEventListener("pointerenter", (event) => {
      if (event.pointerType === "mouse") hovered = true;
      apply();
    });
    button.addEventListener("pointerleave", (event) => {
      if (event.pointerType === "mouse") hovered = false;
      pressed = false;
      apply();
    });
    button.addEventListener("pointerdown", () => {
      pressed = true;
      button.classList.add("is-pressed");
      apply();
    });
    const release = () => {
      pressed = false;
      button.classList.remove("is-pressed");
      apply();
    };
    button.addEventListener("pointerup", release);
    button.addEventListener("pointercancel", release);
    button.addEventListener("focus", () => {
      focused = true;
      apply();
    });
    button.addEventListener("blur", () => {
      focused = false;
      apply();
    });

    if (button.dataset.autoPlay === "true") {
      const run = () => {
        autoActive = true;
        apply();
        setTimeout(() => {
          autoActive = false;
          apply();
        }, wipeMs + 300);
      };
      setTimeout(run, 700);
      setInterval(run, wipeMs + 2200);
    }
  }

  document.querySelectorAll<HTMLButtonElement>("[data-wipe-fill-button]").forEach(setup);
</script>

Nearby