Thinking shimmer

# No packages beyond React.

"use client";
// Shimmer: a status phrase with a band of light sweeping through its letters. Press it to step to the next phrase.
// The sweep is a CSS loop, so it holds still while off screen and under reduced motion.
import { useEffect, useRef, useState, type CSSProperties } from "react";

export type ShimmerCue = "next";

export type ShimmerProps = {
  /** The phrases, shown one at a time in order. */
  phrases?: string[];
  /** Sound hook: "next" when the phrase changes. */
  onSound?: (cue: ShimmerCue) => void;
  className?: string;
  style?: CSSProperties;
};

const DEFAULT_PHRASES = ["Thinking…", "Reading the file…", "Drafting a reply…"];

export function Shimmer({ phrases = DEFAULT_PHRASES, onSound, className, style }: ShimmerProps) {
  const root = useRef<HTMLButtonElement>(null);
  const [turn, setTurn] = useState(0);

  useEffect(() => {
    const el = root.current;
    if (!el || typeof IntersectionObserver === "undefined") return;
    const watch = new IntersectionObserver(([seen]) => el.toggleAttribute("data-off", !seen.isIntersecting), { rootMargin: "160px" });
    watch.observe(el);
    return () => watch.disconnect();
  }, []);

  const shown = phrases[turn % Math.max(1, phrases.length)];
  return (
    <button
      ref={root}
      type="button"
      className={["shm-root", className].filter(Boolean).join(" ")}
      style={style}
      onClick={() => {
        onSound?.("next");
        setTurn(turn + 1);
      }}
    >
      <span key={turn} className="shm-text">
        {shown}
      </span>
    </button>
  );
}

.shm-root,
.shm-root * {
  box-sizing: border-box;
}
.shm-root {
  padding: 6px 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-family: var(--ts-font, system-ui, sans-serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
}
.shm-root:focus-visible {
  outline: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--ts-raised), 0 0 0 4px var(--ts-accent);
}

.shm-text {
  display: inline-block;
  color: transparent;
  background-image: linear-gradient(90deg, var(--ts-fg-faint) 35%, var(--ts-fg) 50%, var(--ts-fg-faint) 65%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shm-sweep 1.6s linear infinite, shm-arrive 0.4s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
@keyframes shm-sweep {
  from {
    background-position: 110% 0;
  }
  to {
    background-position: -110% 0;
  }
}
@keyframes shm-arrive {
  from {
    opacity: 0;
    filter: blur(6px);
    translate: 0 4px;
  }
}

/* nothing to see: freeze the loop */
.shm-root[data-off] .shm-text {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .shm-text {
    animation: none;
  }
}

/*
 * Teseria tokens — the only colours, fonts and corner radii a block reads.
 *
 * Every name sits under --ts- so it never collides with your app's own variables. Include this file once, or point
 * the names at your theme (e.g. --ts-accent: var(--brand)). Light by default; dark follows [data-theme="dark"] on
 * any ancestor, or the OS setting unless [data-theme="light"] is set.
 *
 *   Surfaces   page → raised (cards, popovers) · sunken (wells, tracks) · tint-1..3 (neutral fills, light to deep)
 *   Text       fg → secondary → tertiary → muted → faint · fg-inverse sits on an fg-coloured fill
 *   Lines      border · edge (the box-shadow a filled surface uses instead of an outline: soft in light, nothing in
 *              dark; composes with other shadows)
 *   Signals    accent · focus · success · warning · danger
 *   Corners    controls are always pills · r-panel (dialogs, sheets, cards) · r-pop (menus, popovers, toasts) · r-inner
 *              (thumbnails, inner cards); a row inside a panel uses the panel radius minus the panel padding
 */
:root {
  --ts-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ts-r-panel: 24px;
  --ts-r-pop: 18px;
  --ts-r-inner: 12px;

  --ts-page: #ffffff;
  --ts-raised: #ffffff;
  --ts-sunken: #f3f2f0;
  --ts-tint-1: #f5f4f2;
  --ts-tint-2: #ecebe8;
  --ts-tint-3: #e3e1dd;

  --ts-fg: #161514;
  --ts-fg-rgb: 22, 21, 20;
  --ts-fg-secondary: #3a3836;
  --ts-fg-tertiary: #585552;
  --ts-fg-muted: #6d6a66;
  --ts-fg-faint: #89857f;
  --ts-fg-inverse: #ffffff;

  --ts-border: rgba(22, 21, 20, 0.1);
  --ts-edge: 0 0 0 1px rgba(22, 21, 20, 0.07), 0 1px 2px rgba(22, 21, 20, 0.05);

  --ts-accent: #3446eb;
  --ts-focus: #3446eb;
  --ts-success: #13804a;
  --ts-warning: #a9650b;
  --ts-danger: #df474e;
}

:root[data-theme="dark"] {
  --ts-page: #0b0a09;
  --ts-raised: #24221f;
  --ts-sunken: #0d0c0b;
  --ts-tint-1: #131211;
  --ts-tint-2: #1b1a18;
  --ts-tint-3: #2b2926;

  --ts-fg: #f6f5f3;
  --ts-fg-rgb: 246, 245, 243;
  --ts-fg-secondary: #bab8b4;
  --ts-fg-tertiary: #9e9b97;
  --ts-fg-muted: #8e8b86;
  --ts-fg-faint: #72706c;
  --ts-fg-inverse: #0b0a09;

  --ts-border: rgba(246, 245, 243, 0.1);
  --ts-edge: 0 0 #0000;

  --ts-accent: #3446eb;
  --ts-focus: #7f8cff;
  --ts-success: #3ccf80;
  --ts-warning: #efa130;
  --ts-danger: #df474e;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ts-page: #0b0a09;
    --ts-raised: #24221f;
    --ts-sunken: #0d0c0b;
    --ts-tint-1: #131211;
    --ts-tint-2: #1b1a18;
    --ts-tint-3: #2b2926;

    --ts-fg: #f6f5f3;
    --ts-fg-rgb: 246, 245, 243;
    --ts-fg-secondary: #bab8b4;
    --ts-fg-tertiary: #9e9b97;
    --ts-fg-muted: #8e8b86;
    --ts-fg-faint: #72706c;
    --ts-fg-inverse: #0b0a09;

    --ts-border: rgba(246, 245, 243, 0.1);
    --ts-edge: 0 0 #0000;

    --ts-accent: #3446eb;
    --ts-focus: #7f8cff;
    --ts-success: #3ccf80;
    --ts-warning: #efa130;
    --ts-danger: #df474e;
  }
}

import { Shimmer } from "./Shimmer";
import "./Shimmer.css";

export default function Demo() {
  return <Shimmer />;
}