Tactile button

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useRef,  useState,  type KeyboardEvent as ReactKeyboardEvent,  type PointerEvent as ReactPointerEvent,} from 'react';import { PRINTS, PRINT_BOX } from './fingerprint';import { useAutoplay } from './use-autoplay';import styles from './tactile-button.module.css';/* * Tactile button: a glossy violet key on a darker slab, that sinks when pressed and keeps the * fingerprint of every press. * * - The key is three layers in CSS: the slab (the key's side, seen below its face), the face *   (a vertical gradient), and a gloss over the face (inset light at its rims, top and bottom). *   Pressing slides the face down onto the slab, by the slab's whole depth, and narrows it by *   2 %; the drop shadow tightens and the gloss dims. Down in 70 ms, back up in 110 ms, by

/* Tactile button (tactile-button.tsx): a violet key on a pale lilac stage, or at night on a   near-black one. Every size is in --v, one 40th of the label's type, so the whole key scales   with its font-size: the face is 108 v tall with a 20 v radius, the slab under it 10 v deep,   which is also how far the face travels. The type is 4.12 % of the stage's width (a container   query), so the key keeps its share of the stage, never under 16 px type.   Colours are the tokens below, light-dark(light, dark) where the two differ: 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).   Memory. The stage is one layout boundary sized from outside. The press moves the face by a   transform and dims the gloss by opacity; only the slab's small shadow repaints. */.root {  /* The stage. */  --stage: #f0eef4;  --line: rgb(0 0 0 / 0.04);  /* The face, top to bottom, and its words. */  --face-1: #7d44ea;  --face-2: #7638e7;  --face-3: #7031e5;  --face-4: #6826e0;  --ink: #fff;  --ink-shadow: rgb(52 8 150 / 0.35);

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The fingerprints a press leaves on the button, drawn once as SVG paths. * * A print is a family of ridges around a core: each ridge is a loop a little wider than the one * inside it, its radius nudged by a few slow waves so the loops wander like skin, the inner ones * drawn open at the bottom (a loop pattern, not a bullseye). Every ridge is broken into strokes * of random length with short gaps, as ridges end and fork on a real finger. The art fits a * 100 × 130 box; the stylesheet fades its edge with a radial mask. Three prints are drawn from * fixed seeds when the module loads, so the server and the browser draw the same ones. *//** The box every print is drawn in. */export const PRINT_BOX = { width: 100, height: 130 };/** A small seeded random generator (mulberry32), so the prints are the same on every load. */function random(seed: number) {  let state = seed >>> 0;  return () => {    state = (state + 0x6d2b79f5) >>> 0;    let t = state;    t = Math.imul(t ^ (t >>> 15), t | 1);    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);

// Copyright (c) 2026 Bruno Delorence. MIT License.'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(