# Ghost pass
> An invite page: a glossy pastel ticket with a glowing ghost flies in, rises, tilts to the pointer and spins, above a code to copy.
The page an invite code lands on. A bent, glossy ticket with a glowing ghost flies up into the middle of the stage as rays open behind it, then rises to its place while the headline comes in word by word, then the code and the two ways in. The ticket floats, leans towards the pointer with its shine sliding the other way, and spins round to show its back when dragged. Copy code copies the code and says so.
A React component by Bruno Delorence: https://brunodelorence.com/components/ghost-pass. MIT License, Copyright (c) 2026 Bruno Delorence.
Category: Media.
## Anatomy
1. **Pass**: A button holding a bent, glossy SVG ticket. It floats, leans towards the pointer, and a drag, tap or arrow key spins it round to its back.
2. **Shadow**: A soft radial ellipse under the pass that narrows and fades as the pass floats up.
3. **Headline**: A real h2; each word comes in on its own after the entrance, and the pass’s title is in the accent.
4. **Lede**: One line naming the issuer and what the code does.
5. **Code pill**: The code as plain text, selected whole by one click, with the copy button at its right end.
6. **Copy button**: Copies the code and turns to Copied for 1.8 s; both labels share one cell, so its width never changes.
7. **Ways in**: Download the app (filled) and Join the web waitlist (soft): links with their hrefs, buttons without.
8. **Note**: A small line for readers on a computer: copy the code, then open the app on the phone.
## When to use
- The page an invite or referral link lands on: one code to redeem, and one or two ways in.
- A launch or waitlist moment that should feel like receiving something: a ticket to hold, turn over and keep.
- A code that is typed on another device: the pill keeps it large and selectable, and Copy code says when it is copied.
- A playful brand whose mascot can live on the pass, drawn in SVG with no image files to load.
## When not to use
- Codes people type under pressure, like one-time passwords or 2FA. Use a plain code input with paste support.
- A list of several invites or tickets. Use a table or cards, each with its own copy button.
- A real boarding pass or event ticket that must scan. Use a wallet pass with a barcode.
- A sober product (banking, health, admin). The flying, floating, spinning pass reads as a game; use a simple card.
- Inside a dialog or a narrow column. It is a whole page section, scaled from 880 px down to about 580 px.
## Installation
Install it with the shadcn CLI, into components/ghost-pass of any React project:
```sh
npx shadcn@latest add https://brunodelorence.com/r/ghost-pass.json
```
Or copy all the source files below into one folder of your project. Either way it needs React 19 and a bundler with CSS Modules (Next.js, Vite).
It has a dark colour scheme. Its colours are CSS light-dark() pairs, kept inside @supports so that builds which rewrite light-dark() for older browsers leave them alone: it follows your page’s color-scheme (light unless the page sets one) or its colorScheme prop, with nothing to configure. Browsers without light-dark() show it light.
## Usage
```tsx
import { GhostPass } from './ghost-pass';
export function InvitePage({ code }: { code: string }) {
return (
);
}
```
## States
- **Settled**: After the entrance: the pass floating face front, the code ready to copy.
- **Leaning**: The pointer up and to the right: the pass tips towards it and its shine slides the other way.
- **Back**: Turned round by a drag or a key: the mirrored back with the issuer’s name. It springs to the front after a flick.
- **Copied**: A check and Copied in the same width as Copy code; a polite live region says Code copied.
- **Another issuer**: `appName`, `title` and `code` change the stub, the headline’s accent and the copy.
- **Light**: A lavender wash fading to white down the stage, whatever the page’s scheme.
- **Dark**: A deep violet wash over near-black; the pass keeps its pastel colours.
## How it works
- The ticket is one SVG drawn from a few numbers: its outlines are computed once, the top and bottom edges bowing upwards as one quadratic curve each (exact for a parabola), so the card looks bent round a vertical axis. A darker copy of each outline, a few units lower, is its thickness; the stub is a separate outline whose left edge is a row of small elliptical scallops.
- The art is layered gradients clipped to the body: a pink-to-periwinkle sky, slow rays, two coins with a rim, and the ghost, a dome clipped over a radial gradient with a blurred white copy behind it for the glow and a lavender fade at its foot.
- The entrance is CSS animations keyed by data-phase: the pass flies in from below, small and steeply turned, to the middle of the stage (an overshooting curve), rays open and turn behind it, then after 1.25 s it rises to its place in 0.42 s while the wash grows down the stage. The headline words then fade, unblur and lift 50 ms apart, and the lines below follow 110 ms apart.
- The float, the rays, the bobbing coins and the blink are endless CSS animations, paused offscreen or in a hidden tab, and off under reduced motion.
- The lean and the spin are springs run frame by frame only while something moves, written as one rotateX/rotateY transform on the card and two custom properties that slide the shine. A drag spins it; on release the throw picks the whole turn to land on, and a softer spring brings it there with a small bounce. The back is the other face of the same 3D box, mirrored so the stub is on the correct side.
- Copy code writes to the clipboard, and both labels share one grid cell so the button never changes width as Copy code turns into Copied.
- While on screen and untouched, a demo pointer sweeps over the pass (which leans after it, read from the pointer’s own animation each frame), flicks it round and presses Copy code without touching the clipboard. Any real input hands control to the reader.
- Every size is a multiple of one unit that follows the stage’s width (a container query), so the page scales as a whole down to about 580 px and below that the headline wraps instead.
## API reference
- **code** (`string`, default `'K4WX2PQN'`): The invite code shown in the pill, and copied.
- **appName** (`string`, default `'Veil'`): The issuer’s name: on the stub and the back of the pass, and in the copy.
- **title** (`string`, default `'Ghost Pass'`): The name of the pass, highlighted at the end of the headline.
- **downloadHref** (`string`): Where Download the app leads; without it, a plain button.
- **waitlistHref** (`string`): Where Join the web waitlist leads; without it, a plain button.
- **onCopy** (`(code: string) => void`): Called when the reader copies the code (also when the clipboard refuses).
- **intro** (`boolean`, default `true`): Plays the entrance the first time it comes on screen; false shows it settled at once.
- **autoplay** (`boolean`, default `true`): While on screen and untouched, a demo pointer tilts and spins the pass and presses Copy code.
- **defaultCopied** (`boolean`, default `false`): Opens with the button saying Copied, until it is pressed. Turns the demo off.
- **defaultFace** (`'front' | 'back'`, default `'front'`): Opens turned to its back. A drag, a tap or a key turns it to face front. Turns the demo off.
- **defaultLean** (`{ x: number; y: number }`): Opens leaning as if the pointer were at x, y (each -1 to 1 from the pass’s centre), its shine slid the other way. Turns the demo off.
- **colorScheme** (`'light' | 'dark' | 'system'`): Light or dark colours, or the reader’s; without it, the page’s color-scheme.
- **className** (`string`): Added to the root.
## Accessibility
- A section labelled with the pass’s name, with a real h2 headline, a paragraph, and buttons or links for every action.
- The pass is a button: arrow keys, Enter or Space spin it, and its label says so; the drawing inside is aria-hidden.
- The code is plain, selectable text (one click selects all of it), and Copy code announces Code copied through a polite live region.
- Every control shows a focus ring on keyboard focus only.
- Under reduced motion the entrance is skipped, nothing floats, turns or blinks, and the pass neither leans nor spins.
- The demo pointer is decorative (aria-hidden) and stops at the first real input.
## Source
### ghost-pass/ghost-pass.tsx
```tsx
// 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.
*
* - The entrance (once, when it first comes on screen): the pass flies up from below, small and
* steeply turned, and lands big in the middle of the stage with a little overshoot, while rays
* open out behind it and turn. After a beat it rises to its place and shrinks, the lavender wash
* grows down the stage, and the headline comes in word by word (each one fades, unblurs and
* lifts), then the rest, line by line. All of it is CSS animations keyed by data-phase.
* - The pass floats (a slow bob and sway, its shadow breathing under it), the rays on its art turn,
* the coins bob, and the ghost blinks now and then: CSS animations, paused offscreen.
* - It leans towards the pointer and its shine slides the other way; drag it sideways (or press
* Enter or Space on it) and it spins round, showing its back, then springs back to face front.
* The lean and the spin are springs run frame by frame only while they move, written as one
* transform and two custom properties.
* - Copy code writes the code to the clipboard; the button says Copied for a moment, and a live
* region says so.
* - While on screen and untouched, a demo pointer hovers the pass, flicks it round and presses
* Copy code. Any real input hands control to the reader.
*/
/** How far the pass leans towards the pointer, in degrees, and over what distance in px. */
const LEAN_X = 12;
const LEAN_Y = 16;
const REACH_X = 320;
const REACH_Y = 240;
/** Degrees of spin per px dragged. */
const DRAG = 0.55;
/** The springs: lean (snappy), and the spin settling back to face front (a little bounce). */
const LEAN = { k: 170, c: 20 };
const SETTLE = { k: 70, c: 11 };
/** The entrance, in ms: when the pass rises to its place. The text follows in the CSS. */
const RISE_AT = 1250;
/** How long Copied shows. */
const COPIED_FOR = 1800;
type Phase = 'wait' | 'intro' | 'ready';
const clamp = (value: number, min = -1, max = 1) => Math.min(max, Math.max(min, value));
export function GhostPass({
code = 'K4WX2PQN',
appName = 'Veil',
title = 'Ghost Pass',
downloadHref,
waitlistHref,
onCopy,
intro = true,
autoplay = true,
defaultCopied = false,
defaultFace = 'front',
defaultLean,
colorScheme,
className = '',
}: {
/** The invite code shown in the pill, and copied. */
code?: string;
/** The issuer's name: on the stub, and in the copy. */
appName?: string;
/** The name of the pass, highlighted at the end of the headline. */
title?: string;
/** Where Download the app leads; without it, a button that does nothing. */
downloadHref?: string;
/** Where Join the web waitlist leads; without it, a button that does nothing. */
waitlistHref?: string;
/** Called after the code is copied (or when copying is refused), with the code. */
onCopy?: (code: string) => void;
/** Plays the entrance the first time it comes on screen; false shows it settled at once. */
intro?: boolean;
/** While on screen and untouched, a demo pointer tilts and spins the pass and copies the code. */
autoplay?: boolean;
/** Opens with the button saying Copied (until it is pressed); turns the demo off. */
defaultCopied?: boolean;
/** Opens turned to its back; turns the demo off. A drag, a tap or a key turns it to face front. */
defaultFace?: 'front' | 'back';
/** Opens leaning as if the pointer were at x, y (each -1 to 1, from the pass's centre), the
* shine slid the other way; turns the demo off. It settles when the pointer leaves. */
defaultLean?: { x: number; y: number };
/** Light or dark colours, or the reader's ('system'); without it, the page's color-scheme. */
colorScheme?: 'light' | 'dark' | 'system';
className?: string;
}) {
const { ref: root, take, playing, visible, reduced } = useAutoplay(5000);
const [phase, setPhase] = useState(intro ? 'wait' : 'ready');
const [copied, setCopied] = useState(defaultCopied);
/** Opening in a given state holds it still: no demo. */
const held = defaultCopied || defaultFace === 'back' || defaultLean !== undefined;
const [message, setMessage] = useState('');
const tilt = useRef(null);
const slot = useRef(null);
const copyButton = useRef(null);
const pointer = useRef(null);
const copyTimer = useRef(0);
/** The motion: lean and spin with their speeds, and what drives them. */
const lean0 = {
x: defaultLean ? -clamp(defaultLean.y) * LEAN_X : 0,
y: defaultLean ? clamp(defaultLean.x) * LEAN_Y : 0,
};
const face0 = defaultFace === 'back' ? 180 : 0;
const motion = useRef({
rx: lean0.x,
ry: lean0.y,
vx: 0,
vy: 0,
spin: face0,
spinV: 0,
/** The turn the spin settles on (face front, or the back it opened on). */
home: face0,
/** Where the lean is heading. */
tx: lean0.x,
ty: lean0.y,
/** A drag in progress: where it started, the spin then, and the last moves for the flick. */
drag: null as null | { x: number; spin: number; last: number; at: number; v: number },
/** The demo's pointer is pressing the pass. */
demoDown: false,
frame: 0,
then: 0,
});
/** Repeats are made to differ, so screen readers announce them again. */
const announce = (text: string) => setMessage((now) => (now === text ? `${text} ` : text));
// The entrance plays when the stage first comes on screen; under reduced motion it is skipped.
useEffect(() => {
if (phase !== 'wait') return;
if (reduced) return setPhase('ready');
if (!visible) return;
const element = root.current;
const place = slot.current;
if (element && place) {
// The pass starts in the middle of the stage: how far below its place that is.
const middle = element.clientHeight / 2;
const own = place.offsetTop + place.offsetHeight * 0.42;
element.style.setProperty('--drop', `${Math.max(0, middle - own).toFixed(1)}px`);
}
setPhase('intro');
}, [phase, visible, reduced, root]);
useEffect(() => {
if (phase !== 'intro') return;
const timer = window.setTimeout(() => setPhase('ready'), RISE_AT);
return () => window.clearTimeout(timer);
}, [phase]);
/** One frame of the springs; keeps going while anything moves. */
const step = useEffectEvent((now: number) => {
const m = motion.current;
const dt = Math.min(0.032, (now - (m.then || now)) / 1000) || 1 / 60;
m.then = now;
// The demo's pointer drives the lean like a real one, from where its flight is right now.
if (playing && pointer.current && pointer.current.style.opacity === '1') {
const box = new DOMMatrixReadOnly(getComputedStyle(pointer.current).transform);
const size = pointer.current.offsetWidth;
aim(box.m41 + size * 0.15, box.m42 + size * 0.1, true);
}
const lean = (value: number, speed: number, target: number) => {
const accel = LEAN.k * (target - value) - LEAN.c * speed;
const v = speed + accel * dt;
return [value + v * dt, v];
};
[m.rx, m.vx] = lean(m.rx, m.vx, m.tx);
[m.ry, m.vy] = lean(m.ry, m.vy, m.ty);
if (!m.drag) {
const accel = SETTLE.k * (m.home - m.spin) - SETTLE.c * m.spinV;
m.spinV += accel * dt;
m.spin += m.spinV * dt;
}
write();
const still =
Math.abs(m.rx - m.tx) < 0.02 &&
Math.abs(m.ry - m.ty) < 0.02 &&
Math.abs(m.vx) + Math.abs(m.vy) < 0.05 &&
!m.drag &&
Math.abs(m.spin - m.home) < 0.05 &&
Math.abs(m.spinV) < 0.05 &&
!(playing && pointer.current?.style.opacity === '1');
if (still) {
// Whole turns are dropped (a back it opened on stays).
m.spin = ((m.home % 360) + 360) % 360;
m.home = m.spin;
m.spinV = 0;
m.frame = 0;
m.then = 0;
write();
return;
}
m.frame = requestAnimationFrame(step);
});
/** Writes the lean and the spin: one transform, and where the shine sits. */
const write = () => {
const m = motion.current;
const element = tilt.current;
if (!element) return;
element.style.transform = `rotateX(${m.rx.toFixed(2)}deg) rotateY(${(m.ry + m.spin).toFixed(2)}deg)`;
element.style.setProperty('--shine-x', (-m.ry * 3.2).toFixed(1));
element.style.setProperty('--shine-y', (m.rx * 3.2).toFixed(1));
};
const wake = () => {
const m = motion.current;
if (!m.frame) m.frame = requestAnimationFrame(step);
};
useEffect(() => () => cancelAnimationFrame(motion.current.frame), []);
// A pass opened leaning or turned is drawn so from the first paint.
useLayoutEffect(() => {
if (held) write();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
/** Leans the pass towards a point in the stage's px (the reader's pointer or the demo's). */
const aim = (x: number, y: number, fromDemo = false) => {
const m = motion.current;
const element = root.current;
const card = tilt.current;
if (!element || !card || reduced) return;
const stage = element.getBoundingClientRect();
const box = card.getBoundingClientRect();
const cx = box.left - stage.left + box.width / 2;
const cy = box.top - stage.top + box.height / 2;
m.tx = -clamp((y - cy) / REACH_Y) * LEAN_X;
m.ty = clamp((x - cx) / REACH_X) * LEAN_Y;
if (fromDemo) {
if (m.demoDown && m.drag) dragTo(x);
else if (m.demoDown) m.drag = { x, spin: m.spin, last: x, at: performance.now(), v: 0 };
else if (m.drag) release();
} else wake();
};
const dragTo = (x: number) => {
const m = motion.current;
if (!m.drag) return;
const now = performance.now();
const elapsed = Math.max(1, now - m.drag.at);
const v = ((x - m.drag.last) * DRAG * 1000) / elapsed;
m.drag.v = m.drag.v * 0.4 + v * 0.6;
m.drag.last = x;
m.drag.at = now;
m.spin = m.drag.spin + (x - m.drag.x) * DRAG;
};
const release = () => {
const m = motion.current;
if (!m.drag) return;
// A flick carries on: aim for the turn the throw would reach, and let the spring land it.
m.spinV = clamp(m.drag.v, -1400, 1400);
m.home = Math.round((m.spin + m.spinV * 0.35) / 360) * 360;
m.drag = null;
wake();
};
const local = (event: { clientX: number; clientY: number }) => {
const stage = root.current!.getBoundingClientRect();
return { x: event.clientX - stage.left, y: event.clientY - stage.top };
};
const onPointerMove = (event: ReactPointerEvent) => {
if (event.pointerType !== 'mouse' && !motion.current.drag) return;
take();
const at = local(event);
aim(at.x, at.y);
if (motion.current.drag) dragTo(at.x);
};
const onPointerLeave = () => {
const m = motion.current;
if (m.drag) return;
m.tx = 0;
m.ty = 0;
wake();
};
const onCardDown = (event: ReactPointerEvent) => {
take();
if (reduced || event.button !== 0) return;
event.currentTarget.setPointerCapture(event.pointerId);
const at = local(event);
const m = motion.current;
m.drag = { x: at.x, spin: m.spin, last: at.x, at: performance.now(), v: 0 };
wake();
};
const onCardUp = (event: ReactPointerEvent) => {
const m = motion.current;
const moved = m.drag ? Math.abs(m.spin - m.drag.spin) : 0;
release();
if (event.pointerType !== 'mouse') {
m.tx = 0;
m.ty = 0;
}
// A tap without a drag spins it once round.
if (moved < 4 && event.type === 'pointerup') spinOnce(m.ry >= 0 ? 1 : -1);
};
/** A full turn, as a keyboard press or a tap gives it. */
const spinOnce = (direction = 1) => {
if (reduced) return;
const m = motion.current;
m.home = Math.round(m.spin / 360) * 360 + 360 * direction;
m.spinV += 420 * direction;
wake();
};
const onCardKey = (event: ReactKeyboardEvent) => {
take();
if (event.key === 'ArrowLeft') spinOnce(-1);
if (event.key === 'ArrowRight') spinOnce(1);
};
const copy = async (fromDemo = false) => {
if (!fromDemo) {
take();
try {
await navigator.clipboard.writeText(code);
} catch {
// Refused (no permission, or not a secure page): the code is still on screen to select.
}
onCopy?.(code);
}
setCopied(true);
announce(fromDemo ? '' : 'Code copied');
window.clearTimeout(copyTimer.current);
copyTimer.current = window.setTimeout(() => setCopied(false), COPIED_FOR);
};
useEffect(() => () => window.clearTimeout(copyTimer.current), []);
// The demo: hover the pass from one side to the other, flick it round, then copy the code.
const demo = autoplay && !held && playing && phase === 'ready';
useEffect(() => {
if (!demo) return;
const stage = root.current;
const glyph = pointer.current;
const card = tilt.current;
const button = copyButton.current;
if (!stage || !glyph || !card || !button) return;
const m = motion.current;
const centre = (element: Element, dx = 0, dy = 0): Point => {
const s = stage.getBoundingClientRect();
const b = element.getBoundingClientRect();
return {
x: b.left - s.left + b.width * (0.5 + dx),
y: b.top - s.top + b.height * (0.5 + dy),
};
};
let stop = () => {};
// The pointer shows up once the words have settled.
const start = window.setTimeout(() => {
stop = runDemo(stage, glyph, async ({ wait, glide, glyph: show }) => {
wake();
for (;;) {
show('arrow');
await glide(centre(card, -0.32, -0.22), 900);
wake();
await wait(500);
await glide(centre(card, 0.34, 0.18), 1100);
await wait(400);
await glide(centre(card, 0.1, 0), 600);
show('hand');
await wait(200);
m.demoDown = true;
await glide(centre(card, -0.95, 0.06), 220);
m.demoDown = false;
await wait(1500);
show('arrow');
await glide(centre(button), 1000);
show('hand');
await wait(350);
button.dataset.pressed = '';
await wait(140);
delete button.dataset.pressed;
void copy(true);
await wait(2000);
show('arrow');
await glide(centre(stage, 0.36, 0.1), 1100);
await wait(2400);
}
});
}, 2400);
return () => {
window.clearTimeout(start);
stop();
m.demoDown = false;
if (m.drag) release();
m.tx = 0;
m.ty = 0;
wake();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [demo]);
const words = "You've been sent a".split(' ');
const titleWords = title.split(' ');
return (