Ghost pass

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useLayoutEffect,  useRef,  useState,  type CSSProperties,  type KeyboardEvent as ReactKeyboardEvent,  type PointerEvent as ReactPointerEvent,  type ReactNode,} from 'react';import { DemoPointer, runDemo, type Point } from './demo-pointer';import { PassBack, PassFront } from './pass-art';import { useAutoplay } from './use-autoplay';import styles from './ghost-pass.module.css';/* * Ghost pass: the page an invite code lands on. A glossy pastel ticket with a glowing ghost floats * above the words "You've been sent a Ghost Pass", the code in a pill with a Copy button, and the * two ways in.

// Copyright (c) 2026 Bruno Delorence. MIT License.import { useId } from 'react';import styles from './ghost-pass.module.css';/* * The pass, drawn: a ticket bent a little around a vertical axis, so its top and bottom edges bow * upwards. The body holds the art (a pastel sky with rays, a glowing ghost, two coins); past a * thin gap, the stub carries the issuer's mark, its left edge scalloped where it would tear off. * * Every outline is computed once here from a few numbers, in the drawing's own units (290 wide). * A darker copy of each outline, a few units lower, is the card's thickness. The rays, the coins, * the ghost's blink and the shine are groups the stylesheet moves by transforms. *//** The drawing's width; the body ends at BODY, the stub starts at STUB. */const W = 290;const BODY = 216;const STUB = 219;/** The top and bottom edges at the two ends, and how much the middle bows up. */const TOP = 13;const BOTTOM = 211;const BOW = 12;/** Outer and inner corner radii. */

/* Ghost pass (ghost-pass.tsx): a lavender wash fading to white down the stage, the pass floating   at the top, the words, the code pill and the two buttons under it. At night the wash is a deep   violet over near-black; the pass itself keeps its pastel colours.   Every size is a multiple of --u: 1px on a stage 880px wide or more, scaling down with the   stage's width (a container query) to 0.66px, under which the headline wraps instead.   Colours are the tokens below, light-dark(light, dark) where the two differ: the component takes   the color-scheme it inherits from the page, or the one its colorScheme prop sets.   Motion. The entrance is CSS animations keyed by data-phase (wait, intro, ready). The float, the   rays, the coins and the blink are endless CSS animations, paused offscreen (data-paused) and   off under reduced motion. The lean and the spin are a transform the script writes. */.root {  --surface: #fff;  --wash: #e1dffd;  --wash-2: #f3f1ff;  --wash-3: #fdfcff;  --wash-side: #d9d4fe;  --ink: #252128;  --muted: #64616b;  --faint: #9c9aa2;  --accent: #9078fa;

// 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, so nothing runs frame by frame. * The points of the flight are handed to whoever wants to move along with it (the pass, which * tilts towards 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. `visible` and `reduced` are passed on too, so * the component can pause its own loops offscreen and keep still under reduced motion. */export function useAutoplay<T extends HTMLElement>(idle = 6000) {  const ref = useRef<T>(null);  const [visible, setVisible] = useState(false);  const [reduced, setReduced] = useState(false);  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);