Streak badges

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useId,  useLayoutEffect,  useRef,  useState,  type CSSProperties,  type PointerEvent,} from 'react';import { Badge, paletteOf, rollUp } from './badge';import { GhostPointer, runDemo } from './ghost-pointer';import { MILESTONES, type Milestone } from './milestones';import { easingOf, spring } from './spring';import { useAutoplay } from './use-autoplay';import styles from './streak-badges.module.css';/* * Streak badges: a shelf of milestone badges for a daily streak, and the moment a new one is * earned. *

/* Streak badges (streak-badges.tsx, badge.tsx). Sizes are in em: the stage sets the font-size   from its own width (a container query), so the card grows with the room it has. --spring and   --rise, the easings of the springy transitions, come from the component.   Colours are the tokens below, each light-dark(light, dark): the component takes the   color-scheme it inherits from the page (light unless the page says otherwise), or the one its   colorScheme prop sets (data-color-scheme). The badges are medal art (badge.tsx): their colours   are the same in both. The sheet's colours that follow its badge (--tint, --glow, --deep,   --spark and their night tones) come from the component, set on the sheet. */.root {  /* The stage and its dots; the card on it; the sheet, a step lighter again at night. */  --surface: #e8e8eb;  --dots: rgb(0 0 0 / 0.05);  --surface-2: #fff;  --sheet-bg: #fff;  /* The words: titles and figures; the lines under them; a locked badge's name (the same on     both). */  --ink: #1c1c1e;  --ink-muted: #6e6e73;  --ink-faint: #8e8e93;  /* Hairlines: the stage's edge, the card's, the sheet's; the rule over the shelf; the track of     the next badge's bar. */  --line: rgb(0 0 0 / 0.06);

import { useId, type ReactNode } from 'react';import type { Emblem, Milestone } from './milestones';/* * A streak badge, drawn in SVG so it stays crisp at any size. Every badge is made of the same * layers, from the back: * * - a soft shadow on the ground, and the edge: a darker copy of the hexagon just below it; * - the rim, a rounded hexagon, and the face, a smaller and lighter one, both lit from the top; * - the emblem, raised: a darker copy below it, its fill, a light line along its top; * - the number of days, embossed the same way, and "days" under it; * - the sheen, a band of light, hidden until the badge tilts (the stylesheet shows it). * * Only the colours and the emblem change from one badge to the next. A locked badge is drawn in * greys under a frost of white specks, its number still readable. * * The number is set digit by digit, each in a slot of the same width, so that a digit can roll: * a `rolling` badge draws each digit as a strip of digits behind a window, and `rollUp` slides * the strips up. */export type Palette = {  rim: readonly [string, string];  edge: string;

/* * The streak's milestones: the badges on the shelf, in order of days. Each one has an emblem and * a colour of its own, and the words its sheet shows when it is earned. *//** The raised shape behind a badge's number. */export type Emblem = 'leaf' | 'ribbon' | 'flower' | 'flame' | 'star' | 'crown' | 'gem';export type Milestone = {  /** The streak, in days, that earns it. */  days: number;  /** Its name, under it on the shelf. */  name: string;  emblem: Emblem;  /** Its colour, drawn in pastel tones: a hue (0 to 360) and a saturation (0 to 100). */  hue: number;  saturation: number;  /** The heading of its sheet, and the line under it. */  title: string;  line: string;};export const MILESTONES: readonly Milestone[] = [  {

/* * Springs as CSS easings. A spring pulls a value to its target and lets it settle: fast at first, * then slowing down, overshooting a little and coming back if it is bouncy. CSS `linear()` draws * any curve through a list of points, so the spring's motion is sampled once, and the same curve * serves CSS transitions and the Web Animations API. */export type Spring = {  /** The curve, as a CSS `linear()` easing. */  easing: string;  /** How long it takes to settle, in ms: the duration to play the curve over. */  duration: number;};/** Points sampled along the curve: plenty for a smooth motion. */const SAMPLES = 40;/** * A spring that covers most of the distance in about `response` ms. With a `bounce` of 0 it * settles without overshooting; at 0.3 it overshoots by about 5% and comes back. */export function spring(bounce: number, response: number): Spring {  // The damping ratio (1: no overshoot) and the natural frequency, in radians per second.  const damping = 1 - bounce;

'use client';import type { CSSProperties, Ref } from 'react';/* * The demo's ghost pointer, and the timeline that moves it. A demo is a script of awaited steps: * wait, glide the pointer onto a control, press it and call the component's own handler, as a * click would. Stopping the demo (the reader takes over, or it scrolls away) ends the step in * progress at once: its promise rejects, which ends the script right there, and the pointer * fades out. */export type Demo = {  /** Resolves after `ms`. */  wait: (ms: number) => Promise<void>;  /** Glides the pointer onto `target`: its middle, or a point given as shares of its size. */  moveTo: (target: Element | null | undefined, at?: { x: number; y: number }) => Promise<void>;  /** Presses and lets go; `action` runs as the pointer goes down. */  press: (action: () => void) => Promise<void>;};/** What a stopped demo's pending step rejects with. */class Stopped extends Error {}

'use client';import { useCallback, useEffect, useRef, useState } from 'react';/* * When a demo may play on its own: while part of it is on screen and the tab is visible, never * under reduced motion, and not while the reader is using it. `take()` hands it to the reader; it * takes back over `idle` ms after their last input. */export function useAutoplay<T extends HTMLElement>(idle = 6000) {  const ref = useRef<T>(null);  const [visible, setVisible] = useState(false);  const [reduced, setReduced] = useState(true);  const [taken, setTaken] = useState(false);  const timer = useRef(0);  useEffect(() => {    const element = ref.current;    if (!element) return;    let onScreen = false;    const update = () => setVisible(onScreen && !document.hidden);    const observer = new IntersectionObserver(      ([entry]) => {        onScreen = entry.isIntersecting;