61:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T64c7,import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import type { MutableRefObject, PointerEvent as ReactPointerEvent } from "react"; import { AnimatePresence, animate, motion, useMotionTemplate, useMotionValue, useReducedMotion, useSpring, useTransform } from "framer-motion"; /** The airline and the flights on offer. Each press books the one on show, the next press deals the next pass. */ const airline = "Ostrel Air"; const flights = [ { number: "OS 417", from: { code: "PCW", city: "Port Callow" }, to: { code: "SEV", city: "Saint Elvary" }, date: "14 MAR", boards: "09:40", gate: "B12", seat: "14A", fare: "184", photo: { src: "https://images.pexels.com/photos/8633909/pexels-photo-8633909.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "Turquoise cove under orange sea cliffs seen from the air", tone: "#1c8f96", focus: "42% 60%" }, }, { number: "OS 652", from: { code: "SEV", city: "Saint Elvary" }, to: { code: "KSB", city: "Kossu Bay" }, date: "21 MAR", boards: "16:05", gate: "A3", seat: "22F", fare: "129", photo: { src: "https://images.pexels.com/photos/15048076/pexels-photo-15048076.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "White surf breaking on pale cliffs above green water", tone: "#3f9c94", focus: "70% 60%" }, }, ]; // Design pixels. The pass is drawn at this size and the whole scene is scaled to fit. const SCENE_W = 900; const SCENE_H = 500; const H = 264; const MAIN_W = 478; const STUB_W = 176; const R = 16; // corner radius const NOTCH = 12; // the half-moon bites where the perforation meets the edges const HOLE = 2.3; // radius of each perforation const PITCH = 9.5; const OPEN = 17; // degrees the stub swings open before the last tooth lets go const REST = { x: 26, y: 40, r: 8 }; // where the loose stub comes to rest, relative to where it hung const INK = "#14213f"; const PAPER = "#f6f3ec"; const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); /** The two outlines. They share the same ragged teeth, so the halves mate exactly until they are torn apart. */ function outlines() { const ys: number[] = []; for (let y = NOTCH + 8; y <= H - NOTCH - 8 + 0.01; y += PITCH) ys.push(y); const jag = (i: number, k: number) => { const n = Math.sin((i + 1) * 91.7 + k * 37.3) * 43758.5453; return (n - Math.floor(n) - 0.5) * 2.1; }; let down = ""; ys.forEach((y, i) => { down += ` L ${MAIN_W} ${(y - HOLE).toFixed(2)} A ${HOLE} ${HOLE} 0 0 0 ${MAIN_W} ${(y + HOLE).toFixed(2)}`; if (i < ys.length - 1) down += ` L ${(MAIN_W + jag(i, 1)).toFixed(2)} ${(y + PITCH * 0.4).toFixed(2)} L ${(MAIN_W + jag(i, 2)).toFixed(2)} ${(y + PITCH * 0.62).toFixed(2)}`; }); let up = ""; [...ys].reverse().forEach((y, r) => { const i = ys.length - 1 - r; if (i < ys.length - 1) up += ` L ${jag(i, 2).toFixed(2)} ${(y + PITCH * 0.62).toFixed(2)} L ${jag(i, 1).toFixed(2)} ${(y + PITCH * 0.4).toFixed(2)}`; up += ` L 0 ${(y + HOLE).toFixed(2)} A ${HOLE} ${HOLE} 0 0 0 0 ${(y - HOLE).toFixed(2)}`; }); const main = `M ${R} 0 H ${MAIN_W - NOTCH} A ${NOTCH} ${NOTCH} 0 0 0 ${MAIN_W} ${NOTCH}${down} L ${MAIN_W} ${H - NOTCH} A ${NOTCH} ${NOTCH} 0 0 0 ${MAIN_W - NOTCH} ${H} H ${R} A ${R} ${R} 0 0 1 0 ${H - R} V ${R} A ${R} ${R} 0 0 1 ${R} 0 Z`; const stub = `M ${NOTCH} 0 H ${STUB_W - R} A ${R} ${R} 0 0 1 ${STUB_W} ${R} V ${H - R} A ${R} ${R} 0 0 1 ${STUB_W - R} ${H} H ${NOTCH} A ${NOTCH} ${NOTCH} 0 0 0 0 ${H - NOTCH}${up} L 0 ${NOTCH} A ${NOTCH} ${NOTCH} 0 0 0 ${NOTCH} 0 Z`; return { main, stub }; } function bars(seed: number, count: number) { const out: { x: number; w: number }[] = []; let x = 0; for (let i = 0; i < count; i++) { const n = Math.sin((i + 1) * 12.9898 + seed * 78.233) * 43758.5453; const f = n - Math.floor(n); const w = f < 0.5 ? 1.2 : f < 0.82 ? 2.4 : 3.6; if (i % 2 === 0) out.push({ x, w }); x += w; } return { list: out, total: x }; } const flecks = [ { y: 34, s: 3.2, dx: 16, dy: 22, spin: 140 }, { y: 78, s: 2.4, dx: 30, dy: 12, spin: -200 }, { y: 118, s: 3.6, dx: 12, dy: 40, spin: 90 }, { y: 150, s: 2.2, dx: 26, dy: 30, spin: 260 }, { y: 188, s: 3, dx: 9, dy: 26, spin: -120 }, { y: 222, s: 2.6, dx: 22, dy: 20, spin: 180 }, ]; const paperLight = "linear-gradient(128deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0) 32%, rgba(0,0,0,0) 62%, rgba(40,20,0,0.09) 100%)"; const label = "font-mono text-[8.5px] font-semibold uppercase leading-none tracking-[0.2em] text-[#5b6680]"; type Flight = (typeof flights)[number]; type Api = { tear: () => void }; function Plane({ className }: { className?: string }) { return ( ); } function Pass({ flight, reduce, startTorn, torn, scale, api, onTorn, onPress }: { flight: Flight; reduce: boolean; startTorn: boolean; torn: boolean; scale: MutableRefObject; api: MutableRefObject; onTorn: () => void; onPress: () => void }) { const shapes = useMemo(outlines, []); const code = useMemo(() => bars(flight.number.length + flight.seat.charCodeAt(0), 74), [flight]); const done = useRef(startTorn); const [burst, setBurst] = useState(false); const drag = useRef({ on: false, x: 0, y: 0, moved: 0, sx: 0, sy: 0, loose: false }); const tear = useMotionValue(startTorn ? 1 : 0); const sx = useMotionValue(startTorn ? REST.x : 0); const sy = useMotionValue(startTorn ? REST.y : 0); const sr = useMotionValue(startTorn ? REST.r - OPEN : 0); const lift = useMotionValue(0); const pull = useMotionValue(0); const recoil = useSpring(pull, { stiffness: 320, damping: 9, mass: 0.7 }); const stubRot = useTransform([tear, sr], (v) => (v[0] as number) * OPEN + (v[1] as number)); const stubScale = useTransform(lift, (v) => 1 + v * 0.035); const mainRot = useTransform(recoil, (v) => -v * 1.5); const mainX = useTransform(recoil, (v) => -v * 4); const shOx = useTransform(lift, (v) => 5 + v * 13); const shOy = useTransform(lift, (v) => 9 + v * 20); const shBl = useTransform(lift, (v) => 9 + v * 14); const shA = useTransform(lift, (v) => 0.42 - v * 0.14); const stubShadow = useMotionTemplate`drop-shadow(0 1px 0.5px rgba(70,20,0,0.5)) drop-shadow(${shOx}px ${shOy}px ${shBl}px rgba(84,22,0,${shA}))`; const detach = useCallback(() => { if (done.current) return; done.current = true; pull.set(0); if (reduce) { tear.set(1); sx.set(REST.x); sy.set(REST.y); sr.set(REST.r - OPEN); lift.set(0); } else { animate(sx, REST.x, { type: "spring", stiffness: 90, damping: 15, velocity: 120 }); animate(sy, REST.y, { type: "spring", stiffness: 80, damping: 12 }); animate(sr, REST.r - OPEN, { type: "spring", stiffness: 70, damping: 8, velocity: 60 }); animate(lift, [lift.get(), 1, 0], { duration: 0.62, times: [0, 0.35, 1], ease: "easeInOut" }); setBurst(true); } onTorn(); }, [lift, onTorn, pull, reduce, sr, sx, sy, tear]); // while the stub is still attached, how far it has opened also lifts it and tugs the pass useEffect( () => tear.on("change", (v) => { if (done.current) return; lift.set(Math.min(1, v * 1.5)); pull.set(v); }), [lift, pull, tear], ); const run = useCallback(() => { if (done.current) return; if (reduce) return detach(); // the teeth let go in fits and starts, never in one smooth pull const from = tear.get(); animate(tear, [from, 0.2, 0.16, 0.48, 0.43, 0.8, 0.76, 1].map((v) => Math.max(v, from)), { duration: 0.9, times: [0, 0.16, 0.22, 0.42, 0.5, 0.72, 0.8, 1], ease: "easeInOut" }).then(detach); }, [detach, reduce, tear]); useEffect(() => { api.current = { tear: run }; return () => { api.current = null; }; }, [api, run]); const onDown = (e: ReactPointerEvent) => { if (e.button !== 0) return; drag.current = { on: true, x: e.clientX, y: e.clientY, moved: 0, sx: sx.get(), sy: sy.get(), loose: done.current }; e.currentTarget.setPointerCapture(e.pointerId); }; const onMove = (e: ReactPointerEvent) => { const d = drag.current; if (!d.on) return; const dx = (e.clientX - d.x) / scale.current; const dy = (e.clientY - d.y) / scale.current; d.moved = Math.max(d.moved, Math.hypot(dx, dy)); if (done.current) { // once it is loose the stub is just a piece of paper you can push around the counter if (d.moved < 5) return; sx.set(clamp(d.sx + dx, -40, 150)); sy.set(clamp(d.sy + dy, -120, 130)); lift.set(0.6); return; } const t = clamp(Math.max(dx, dx * 0.6 + dy * 0.6) / 120, 0, 1); tear.set(t); if (t >= 1) detach(); }; const onUp = () => { const d = drag.current; if (!d.on) return; d.on = false; if (d.moved < 5) return onPress(); if (d.loose) { animate(lift, 0, { duration: 0.25 }); return; } if (done.current) return; if (tear.get() > 0.5) run(); else animate(tear, 0, { type: "spring", stiffness: 260, damping: 18 }); }; return ( {/* the part the airline keeps */} {/* crumbs of paper shaken out of the perforation as it gives */} {burst && flecks.map((f, i) => ( ))} {/* the stub you keep */}

Your stub {flight.number}

{flight.from.code} {flight.to.code}

{[ ["Seat", flight.seat], ["Gate", flight.gate], ["Boards", flight.boards], ["Date", flight.date], ].map(([k, v]) => (

{k}

{v}

))}

{flight.number.replace(" ", "")} {flight.seat} {flight.gate}

); } export default function BoardingPassTearCallToAction() { const reduce = !!useReducedMotion(); const wrapRef = useRef(null); const sceneRef = useRef(null); const scale = useRef(1); const api = useRef(null); const live = useRef({ touched: false, paused: false, clock: 0, torn: false }); const [idx, setIdx] = useState(0); const [torn, setTorn] = useState(false); useEffect(() => { if (!reduce) return; live.current.torn = true; setTorn(true); }, [reduce]); const flight = flights[idx % flights.length]; const px = useMotionValue(0); const py = useMotionValue(0); const tiltY = useSpring(useTransform(px, (v) => v * 7), { stiffness: 70, damping: 15 }); const tiltX = useSpring(useTransform(py, (v) => -v * 6), { stiffness: 70, damping: 15 }); const onTorn = useCallback(() => { live.current.torn = true; live.current.clock = 0; setTorn(true); }, []); const next = useCallback(() => { live.current.torn = false; live.current.clock = 0; setTorn(false); setIdx((i) => i + 1); }, []); const press = useCallback(() => { live.current.touched = true; if (live.current.torn) next(); else api.current?.tear(); }, [next]); // the demo: tear the pass shortly after it lands, admire it, deal the next one useEffect(() => { if (reduce) return; const s = live.current; const tick = window.setInterval(() => { if (s.touched || s.paused || document.hidden) return; s.clock += 100; if (!s.torn && s.clock === 800) api.current?.tear(); if (s.torn && s.clock >= 3600) next(); }, 100); return () => window.clearInterval(tick); }, [next, reduce]); useEffect(() => { const wrap = wrapRef.current; const scene = sceneRef.current; if (!wrap || !scene) return; const measure = () => { const sc = clamp(wrap.clientWidth / (SCENE_W - 170), 0.4, 1.3); scale.current = sc; wrap.style.height = `${Math.round(Math.max(SCENE_H * sc, 360) + 56)}px`; scene.style.transform = `translate(-50%, -50%) scale(${sc.toFixed(4)})`; }; measure(); const ro = new ResizeObserver(measure); ro.observe(wrap); return () => ro.disconnect(); }, []); return (

{ if (reduce || e.pointerType === "touch") return; const r = e.currentTarget.getBoundingClientRect(); px.set(((e.clientX - r.left) / r.width) * 2 - 1); py.set(((e.clientY - r.top) / r.height) * 2 - 1); }} onPointerEnter={() => (live.current.paused = true)} onPointerLeave={() => { live.current.paused = false; px.set(0); py.set(0); }} className="relative mx-auto w-full overflow-hidden" style={{ height: SCENE_H * 1.3 + 56 }} >

{airline} {flight.number} {torn ? "Stub is yours. Press for the next flight" : "Press the pass or pull the stub"}

{torn ? `Booked: seat ${flight.seat}, ${flight.from.city} to ${flight.to.city}.` : ""}

); } 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"framer-motion"}]]}]}]]}],["$","$L61",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"components/we-inc/boarding-pass-call-to-action-that-tears-along-its-perforation-when-you-book-and-drops-the-stub.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]