Vortex dismiss

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useCallback,  useEffect,  useEffectEvent,  useId,  useMemo,  useRef,  useState,  type CSSProperties,  type KeyboardEvent as ReactKeyboardEvent,  type ReactNode,} from 'react';import { DemoPointer, runDemo } from './demo-pointer';import { PromoCard } from './promo-card';import { useAutoplay } from './use-autoplay';import {  createField,  DEFAULT_PALETTE,  parseHex,  swirlMap,

/* Vortex dismiss (vortex-dismiss.tsx): a pale stage with the content in its middle, the × over   the content's top right corner, and the vortex's two canvases, one under the content and one   over it. At night the stage and the card go near-black; the vortex keeps its colours.   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).   Stacking: the stage isolates its layers. Under the content, the whirl; then the content; then   the light; then the ×, which stays crisp over the vortex until it collapses; then the demo   pointer. */.root {  /* The stage. */  --page: #f3f5f2;  /* The card, its hairline edge and its lift. */  --card: #fff;  --card-edge: rgb(0 0 0 / 0.085);  --card-shadow: rgb(0 0 0 / 0.05);  /* Title and copy. */  --ink: #212323;  --ink-2: #646464;  /* The call to action. */  --button: #fff;

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The light of the vortex, drawn by one fragment shader on two canvases: the back one, under the * content, holds the wide teal whirl and its grey shade; the front one, over the content, holds * everything that glows (the shock ring, the lime core, the torn edge, the sparks, the lens * flare, the white bloom, the flash and the burst). Each pixel works out where it sits from the * vortex's eye in "design px" (the size the effect was drawn at, scaled to the stage), so the * whole effect grows with the stage around it. Every layer is laid over the last with its own * alpha, never added, so the lime and the teal read as colours on a light page as on a dark one. * * Also here: the displacement map the content is twisted with, a picture of a swirl field that * an SVG feDisplacementMap reads (the content itself is never copied into a texture, so any * markup can be swallowed). *//** The effect's colours, as 0–255 RGB. */export type Palette = {  /** The wide whirl. */  glow: [number, number, number];  /** The darker shade that winds through it. */  shade: [number, number, number];  /** The core, the sparks, the shock ring and the flash. */  spark: [number, number, number];

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useId } from 'react';import styles from './vortex-dismiss.module.css';/* * The sample content the vortex swallows when nothing else is given: a promo card with a glossy * green creature on top, a title, a line of copy and a call to action. The art is one SVG of * gradients only (no filters, no raster), so it stays sharp at any size and costs nothing to * redraw while the card twists. *//** The creature: a soft four-armed blob, two arched eyes, a leaf scarf, a chain and a coin. */function Creature() {  // Gradient ids are per instance: two cards on a page must not share them.  const id = useId().replace(/[^a-zA-Z0-9]/g, '');  const ref = (name: string) => `url(#${id}${name})`;  return (    <svg      className={styles.creature}      viewBox="0 0 256 112"      preserveAspectRatio="xMidYMid slice"

'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 * card, should anything want to move along with 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 = {  /** 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;