Card reveal

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useEffectEvent, useId, useRef, useState, type CSSProperties } from 'react';import { DemoCursor, playDemo } from './demo-cursor';import { spring } from './spring';import { useAutoplay } from './use-autoplay';import styles from './card-reveal.module.css';/* * Card reveal: a card number with its middle digits hidden ("4921 •••• •••• 3087") and an eye * button. Revealing rolls each hidden digit into place, one after another, and the eye turns into * a copy button; copying turns it green with a check for a moment. A ring round the button runs * down the time left, and then the number hides itself again. * * - Each hidden digit sits in a slot one line tall, on a reel of two glyphs, the dot and the *   digit. Revealing slides the reel up by a line on a bouncy spring, a little later for each *   slot; the glyphs cross-fade with a touch of blur, and each digit lands faint and inks in. *   Hiding plays it back down. * - All of it is CSS transitions keyed off one data attribute, so nothing runs at rest. * - The button keeps its place and its label says what it does: show, copy, copied. Escape hides *   the number. Screen readers get the number digit by digit, and the changes announced. * - While on screen and untouched, a demo cursor reveals the number and copies it (the demo

/* Card reveal (card-reveal.tsx): a stage with the card number in a field raised on it. The root's   data-state (hidden, shown or copied) drives every transition.   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). */.root {  /* The stage, its dot grid and its edge; the field raised on it, its hairline and its lift. */  --surface: #e4e4e7;  --grid: rgb(0 0 0 / 0.055);  --line: rgb(0 0 0 / 0.06);  --surface-2: #fff;  --edge: rgb(0 0 0 / 0.05);  --shadow-near: rgb(0 0 0 / 0.04);  --shadow: rgb(0 0 0 / 0.22);  /* The words: the caption, the number shown, and the number while partly hidden. */  --caption: #636366;  --ink: #1d1d1f;  --ink-muted: #6e6e73;  /* The hidden digits' dots, and the faint colour a digit lands in before it takes the ink. */  --faint: #aeaeb2;  --pale: #c7c7cc;  /* The button: the eye's (tinted, its glyph in the accent), the copy's, then the check's. */

/* * 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 handed to CSS * transitions as an easing. */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 { Ref } from 'react';import styles from './demo-cursor.module.css';/* * The demo's cursor. While a demo plays on its own, an arrow glides to the controls and presses * them, so the demo reads like someone using the component. Each glide is a CSS transition, one * per axis with a different easing, which bends the path into a gentle arc: nothing runs between * moves. */export function DemoCursor({ ref }: { ref: Ref<HTMLSpanElement> }) {  return (    <span ref={ref} className={styles.cursor} data-state="hidden" aria-hidden="true">      <span className={styles.vertical}>        <span className={styles.ripple} />        <svg className={styles.arrow} viewBox="0 0 20 20">          <path d="M4 2.5 15 13h-4.6l2.4 5.2-2.4 1-2.4-5.2L4 17.2z" />        </svg>      </span>    </span>  );}

/* The demo's cursor (demo-cursor.tsx): an arrow whose tip sits at (--x, --y) in its stage. The   outer box carries the horizontal move, the inner one the vertical move, eased differently. Its   colours are the stage's tokens (card-reveal.module.css). */.cursor {  --x: 0px;  --y: 0px;  --move: 0ms;  position: absolute;  top: 0;  left: 0;  z-index: 10;  pointer-events: none;  opacity: 0;  transform: translateX(var(--x));  transition:    opacity 0.25s ease,    transform var(--move) cubic-bezier(0.45, 0, 0.25, 1);}.cursor[data-state='shown'],.cursor[data-state='pressed'] {  opacity: 1;}.vertical {

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