"use client"; /** * @author: @dorianbaffier * @description: Boarding Pass * @version: 1.0.0 * @date: 2026-10-22 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { Plane } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { useEffect, useLayoutEffect, useRef, useState } from "react"; import { cn } from "@/lib/utils"; const EASE_OUT = [0.23, 1, 0.32, 1] as const; /** Radius of the notches on either side of the tear line, in px. */ const NOTCH = 10; export type FlightStatus = "on-time" | "delayed" | "gate-change" | "boarding"; export interface Flight { airline: string; number: string; from: { code: string; city: string; time: string }; to: { code: string; city: string; time: string }; date: string; gate: string; boards: string; seat: string; group: string; passenger: string; status: FlightStatus; /** One line under the status, like "Delayed 25 min". */ note?: string; } export interface BoardingPassProps { /** Leave out to watch a demo flight get a gate change and a delay. */ flight?: Flight; className?: string; } const BASE: Flight = { airline: "Northwind", number: "NW 214", from: { code: "LIS", city: "Lisbon", time: "10:40" }, to: { code: "CPH", city: "Copenhagen", time: "15:05" }, date: "Thu, 12 Nov", gate: "B12", boards: "10:05", seat: "14A", group: "2", passenger: "Maya Chen", status: "on-time", }; const DEMO: Flight[] = [ BASE, { ...BASE, gate: "B31", status: "gate-change", note: "Gate moved to B31, 6 min walk", }, { ...BASE, gate: "B31", boards: "10:30", from: { ...BASE.from, time: "11:05" }, to: { ...BASE.to, time: "15:30" }, status: "delayed", note: "Delayed 25 min, late inbound aircraft", }, { ...BASE, gate: "B31", boards: "10:30", from: { ...BASE.from, time: "11:05" }, to: { ...BASE.to, time: "15:30" }, status: "boarding", note: "Group 2 is boarding now", }, ]; const STATUS: Record = { "on-time": { label: "On time", tone: "bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400", }, "gate-change": { label: "Gate change", tone: "bg-orange-50 text-orange-700 dark:bg-orange-500/10 dark:text-orange-400", }, delayed: { label: "Delayed", tone: "bg-red-50 text-red-700 dark:bg-red-500/10 dark:text-red-400", }, boarding: { label: "Boarding", tone: "bg-sky-50 text-sky-700 dark:bg-sky-500/10 dark:text-sky-400", }, }; /** Remembers the value before the last change, so it can sit struck under the new one. */ function usePrevious(value: string) { const [state, setState] = useState({ now: value, was: null as string | null, }); if (state.now !== value) { setState({ now: value, was: state.now }); } return state.was; } /** * A value where only the characters that changed roll over, one after * another, like a departures board updating one slot. */ function Flap({ value, className, reduceMotion, }: { value: string; className?: string; reduceMotion: boolean; }) { const was = usePrevious(value); let changed = 0; return ( {value} {[...value].map((char, i) => { const moved = was !== null && was[i] !== char; const order = moved ? changed++ : 0; return ( ); })} ); } function Field({ label, value, previous, reduceMotion, large, }: { label: string; value: string; previous: string; reduceMotion: boolean; large?: boolean; }) { const changed = previous !== value; return (

{label}

{changed && ( {previous} )}

); } /** A barcode drawn from the passenger and flight, so each pass gets its own. */ function Barcode({ seed }: { seed: string }) { let n = 7; for (const c of seed) { n = (n * 31 + c.charCodeAt(0)) % 2_147_483_647; } const bars: { x: number; w: number }[] = []; let x = 0; while (x < 200) { n = (n * 16_807) % 2_147_483_647; const w = 1 + (n % 3); n = (n * 16_807) % 2_147_483_647; const gap = 1 + (n % 3); bars.push({ x, w }); x += w + gap; } return ( ); } /** * A boarding pass that keeps itself current. When the gate or times change, * only the characters that moved roll over, the new value turns orange, and * the old one stays underneath, struck through, so you can see what changed. */ export default function BoardingPass({ flight, className }: BoardingPassProps) { const [step, setStep] = useState(0); const reduceMotion = Boolean(useReducedMotion()); const current = flight ?? DEMO[step]; // What the pass said when it was issued: the baseline for "changed". const [issued] = useState(current); const cardRef = useRef(null); const tearRef = useRef(null); const [tearY, setTearY] = useState(0); useEffect(() => { if (flight) { return; } const id = window.setInterval( () => setStep((s) => (s + 1) % DEMO.length), 3200 ); return () => window.clearInterval(id); }, [flight]); useLayoutEffect(() => { const measure = () => { if (tearRef.current) { setTearY(tearRef.current.offsetTop); } }; measure(); const observer = new ResizeObserver(measure); if (cardRef.current) { observer.observe(cardRef.current); } return () => observer.disconnect(); }, []); const status = STATUS[current.status]; const fade = { duration: reduceMotion ? 0 : 0.22, ease: EASE_OUT }; const notches = `radial-gradient(circle ${NOTCH}px at 0 ${tearY}px, #0000 97%, #000 100%), radial-gradient(circle ${NOTCH}px at 100% ${tearY}px, #0000 97%, #000 100%)`; return (

{current.airline} {current.number}

{status.label}

{current.from.code}

{current.from.city} ·{" "}

{current.to.code}

{" "} · {current.to.city}

{current.note ?? `${current.date} · Doors close 15 min before departure`}

{/* The tear line, between the notches. */}

Passenger

{current.passenger}

{current.date}

{/* Outlines for the notches, which the mask cut out of the border. */} {tearY > 0 && [0, 1].map((side) => ( ))}

); }

Boarding Pass

On this page