NDA badge

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useRef,  useState,  type PointerEvent as ReactPointerEvent,} from 'react';import { DemoPointer, runDemo, type Point } from './demo-pointer';import { useAutoplay } from './use-autoplay';import styles from './nda-badge.module.css';/* * NDA badge: the "View Work" pill of a project card. Its eye watches the pointer; on work under * a non-disclosure agreement, hovering or focusing the pill shuts the eye and the pill turns red: * "Under NDA". * * - The eye is drawn in HTML layers around two still drawings: the open eye with its pupil, a *   round box of its own, and the shut eye, a single curve. The pupil moves by a transform, and *   the eyes swap by squashing and fading their boxes, so no SVG is ever restyled. * - The pupil leans towards the pointer, wherever it is on the page: up to about 2 px, all the way

/* NDA badge (nda-badge.tsx): a white stage with the pill in its middle, or at night a near-black   one with the pill a step lighter. The pill's sizes are in em of its 13 px type, so the stage can   draw it larger from its own width (a container query).   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 (its width and its proportions),   so nothing inside it lays out the page. The pill paints on a small layer of its own, so its   colour change never repaints the page around it; the pupil and the demo pointer move by   transforms. */.root {  /* The stage, and the pill on it. */  --surface: #fff;  --surface-2: #f3f3f3;  /* The words and the open eye. */  --ink: #17191d;  /* The pupil: the stage seen through the eye, white by day and near-black at night. */  --pupil: #fff;  /* The stage's edge, and the pill's. */  --line: rgb(0 0 0 / 0.06);  --edge: rgb(17 17 17 / 0.05);

'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 eye of the * badge, which plays its own animation on the same clock). 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 = {  /** Resolves after `ms`. */  wait: (ms: number) => 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;