Split slider

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useImperativeHandle,  useLayoutEffect,  useRef,  useState,  type CSSProperties,  type FocusEvent,  type KeyboardEvent,  type PointerEvent,  type Ref,} from 'react';import { clickSound, type ClickSound } from './click-sound';import { GhostPointer, runDemo, type Point } from './ghost-pointer';import { useAutoplay } from './use-autoplay';import styles from './split-slider.module.css';/* * Split slider: a value slider whose dark fill carries its label, a thin handle and, as it grows, * its value.

/* Split slider (split-slider.tsx). Its proportions follow its height, --h (the height prop sets it   inline). The component writes where the fill is as it moves: --p (its end, 0 to 1 of the width),   --over and --under (how far it is stretched past the right or the left end, in px) and --squash   (how much a stretch thins it). --handle-inset and --handle-start come from the component's   GEOMETRY. *//* The palette, on both roots (the slider and the demo's stage). Each colour is a light-dark() pair,   so it follows the color-scheme in force: the page's, or the one the colorScheme prop sets. The   pairs sit in @supports, where a build step that rewrites light-dark() for older browsers leaves   them as written: rewritten, they would need a color-scheme the same step had rewritten too, and   on a page that sets none every colour would drop. Without light-dark(), the light colours stay. */.stage,.slider {  --surface: #fff;  --surface-2: #eee;  --hover: #f2f2f4;  --line: rgb(0 0 0 / 0.06);  --ink: #111;  --ink-muted: #7c7c7c;  --icon: #8e8e93;  --icon-hover: #3a3a3c;  --accent: #303030;  --accent-2: #141414;  --accent-ink: #fff;

/* * The slider's click: a soft, short tick synthesised with the Web Audio API, no audio file. Each * tick is a sine blip that drops in pitch, over a breath of filtered noise for its edge, shaped by * an envelope a few milliseconds long. Higher values tick higher and louder. * * Browsers allow sound only after a gesture of the reader's, so nothing plays before their first * press or key on a slider. One AudioContext serves every slider on the page: it is created on * that first gesture, suspended when the ticks stop (an idle context still runs its audio thread), * and closed when the last slider is gone. *//** A tick's length, in seconds. */const LENGTH = 0.05;/** Ticks closer than this (ms) are skipped: a fast drag would buzz. */const MIN_GAP = 22;/** After this long without a tick (ms), the audio is suspended. */const REST = 1500;let context: AudioContext | null = null;let noise: AudioBuffer | null = null;let users = 0;let lastTick = 0;let restTimer = 0;

'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 somewhere, press, drag, let go. A glide is a curved flight played by the * Web Animations API; a drag runs frame by frame, so that the script can move a slider along with * the pointer. 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 Point = { x: number; y: number };export type Demo = {  /** Resolves after `ms`. */  wait: (ms: number) => Promise<void>;  /** Glides the pointer to `to`, in the stage's own px. */  moveTo: (to: Point) => Promise<void>;  /** Presses and holds: the arrow dips. */  press: () => Promise<void>;  /** Drags to `to` over `ms`, eased, handing each point on the way to `each`. */  drag: (to: Point, ms: number, each: (point: Point) => void) => Promise<void>;

'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;