Wireframe laptop

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useCallback,  useEffect,  useEffectEvent,  useId,  useLayoutEffect,  useRef,  useState,  type KeyboardEvent as ReactKeyboardEvent,  type PointerEvent as ReactPointerEvent,} from 'react';import { DemoPointer, runDemo, type Point } from './demo-pointer';import {  HEIGHT,  KEYS,  VIEW,  deck,  keyAt,  keySolid,  lid,

/* Wireframe laptop (wireframe-laptop.tsx): a framed card with the laptop drawn in hairlines, the   intensity slider and the theme button under it, then a caption and a row of tags. Near-white by   day, near-black at night, and the lines a mid grey for outlines and a faint one for creases.   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 or its theme button sets (data-color-scheme).   The drawing's line colours and width are registered custom properties, so the flash on a change   of scheme can ease them: every path takes them from the drawing, and one animation on the   drawing restyles them all.   Memory. The card is one layout boundary sized from its width; the drawing is one SVG of about   two hundred paths, and only the keys that move are redrawn, one frame at a time. */@property --wl-line {  syntax: '<color>';  inherits: true;  initial-value: #9c9c9c;}@property --wl-faint {  syntax: '<color>';  inherits: true;  initial-value: #dadada;

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The laptop's drawing, worked out in three dimensions and projected to the page. * * - The projection is the 2:1 isometric of technical drawings: a step along the laptop's width *   (x) goes one unit right and half a unit down, a step towards its front edge (y) one unit left *   and half a unit down, and a step up (z) one unit up. Lines along x and y slope at 26.57°. * - Every solid is a rounded rectangle in plan, extruded: the deck, each key (whose top is a *   little smaller than its foot), and the lid, tipped back on its hinge. A solid draws as two *   lines: its outline (the convex hull of its top and its foot, projected) in the ink, and the *   outline of its top in the faint ink, which shows as the crease along its front edges. * - Units are those of the drawing's viewBox (1278 × 1023, twice the card's px at its own size of *   640 px), so the numbers below are the sizes the drawing was measured at. */export type Point = [number, number];/** The viewBox: the card, at twice its px. */export const VIEW = { width: 1278, height: 1023 };/** Where the back left corner of the deck's top lands on the page. */const ORIGIN: Point = [521, 511];

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import type { CSSProperties, Ref } from 'react';/* * The demo's pointer, and the steps that move it. A demo is a script of awaited steps: wait, or * glide the pointer somewhere. 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. * * Each glide is a curved flight played by the Web Animations API. The points of the flight are * handed to whoever wants to move along with it; the laptop reads where the pointer is from its * transform instead, each frame, to press the keys under it. The arrow and the hand are HTML boxes * that swap by their visibility: a change of style inside an SVG would lay the SVG out again. */export type Point = { x: number; y: number };/** A glide's path and timing, for an animation that plays along with it. */export type Flight = { points: Point[]; timing: KeyframeAnimationOptions };export type Demo = {

// 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. It also says whether the component is on * screen (`visible`) and whether the reader asks for less motion (`reduced`), for the work it * does whoever is in charge. */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;