{tabs.map((tx) => (

))}

{children}

); } /** The soft shadow a standing piece throws on the leaf behind it. */ function Cast({ x, w, h, d, radius }: { x: number; w: number; h: number; d: number; radius: string }) { return (

); } /** The shadow at the foot of a standing piece, lying on the base leaf. */ function Foot({ x, w, d }: { x: number; w: number; d: number }) { return (

); } export default function PopUpHomepageCard() { const reduce = useReducedMotion(); const wrapRef = useRef(null); const sceneRef = useRef(null); const cardRef = useRef(null); const typedRef = useRef(null); const [standing, setStanding] = useState(true); const sim = useRef({ a: 58, va: 0, target: OPEN, yaw: -10, tyaw: 0, dragging: false, y0: 0, a0: 0, moved: 0, scale: 1, nextDip: 0, held: false, user: false }); useEffect(() => { const wrap = wrapRef.current; const scene = sceneRef.current; const card = cardRef.current; if (!wrap || !scene || !card) return; const s = sim.current; let raf = 0; let visible = true; let last = performance.now(); const t0 = last; s.nextDip = last + 5200; if (reduce) s.a = s.target; const measure = () => { const sc = clamp(wrap.clientWidth / 770, 0.4, 1); s.scale = sc; wrap.style.height = `${Math.round(SCENE_H * sc)}px`; scene.style.transform = `translateX(-50%) scale(${sc.toFixed(4)})`; }; measure(); const ro = new ResizeObserver(measure); ro.observe(wrap); const paint = (now: number) => { const idle = reduce ? 0 : Math.sin((now - t0) / 2600) * 5; s.yaw += (-10 + idle + s.tyaw - s.yaw) * 0.08; card.style.setProperty("--a", s.a.toFixed(2)); card.style.setProperty("--s", clamp((s.a - 30) / 55, 0, 1).toFixed(3)); card.style.setProperty("--dim", clamp((70 - s.a) / 90, 0, 0.55).toFixed(3)); card.style.transform = `rotateX(-27deg) rotateY(${(reduce ? -10 : s.yaw).toFixed(2)}deg)`; const t = typedRef.current; if (t) { const n = Math.round(site.sentence.length * clamp((s.a - 20) / 52, 0, 1)); if (t.dataset.n !== String(n)) { t.dataset.n = String(n); t.textContent = site.sentence.slice(0, n); } } }; const tick = (now: number) => { const dt = Math.min(0.033, (now - last) / 1000); last = now; if (reduce) { s.a = s.target; } else if (!s.dragging) { const acc = 58 * (s.target - s.a) - 8.2 * s.va; s.va += acc * dt; s.a = clamp(s.a + s.va * dt, 2, 112); // the idle demo: press the card down, let the sentence clear, and let it stand again if (!s.user && !s.held && now > s.nextDip) { if (s.target === OPEN) { s.target = 16; s.nextDip = now + 1500; } else { s.target = OPEN; s.nextDip = now + 6200; } } } paint(now); if (visible) raf = requestAnimationFrame(tick); }; const io = new IntersectionObserver(([e]) => { const was = visible; visible = e.isIntersecting; if (visible && !was) { last = performance.now(); raf = requestAnimationFrame(tick); } }); io.observe(wrap); raf = requestAnimationFrame(tick); const down = (e: PointerEvent) => { if (e.button !== 0 || (e.target as HTMLElement).closest("button")) return; s.dragging = true; s.y0 = e.clientY; s.a0 = s.a; s.moved = 0; s.va = 0; scene.setPointerCapture(e.pointerId); }; const move = (e: PointerEvent) => { const r = wrap.getBoundingClientRect(); s.tyaw = clamp(((e.clientX - r.left) / r.width - 0.5) * 2, -1, 1) * 12; if (!s.dragging) return; const dy = (s.y0 - e.clientY) / s.scale; s.moved = Math.max(s.moved, Math.abs(dy)); const next = clamp(s.a0 + dy * 0.42, 2, 110); s.va = (next - s.a) * 30; s.a = next; }; const up = () => { if (!s.dragging) return; s.dragging = false; const open = s.moved < 5 ? s.target !== OPEN : s.a + s.va * 0.12 > 46; s.target = open ? OPEN : FLAT; s.user = !open; s.nextDip = performance.now() + 9000; setStanding(open); }; const leave = () => { s.tyaw = 0; }; scene.addEventListener("pointerdown", down); scene.addEventListener("pointermove", move); scene.addEventListener("pointerup", up); scene.addEventListener("pointercancel", up); scene.addEventListener("pointerleave", leave); return () => { cancelAnimationFrame(raf); ro.disconnect(); io.disconnect(); scene.removeEventListener("pointerdown", down); scene.removeEventListener("pointermove", move); scene.removeEventListener("pointerup", up); scene.removeEventListener("pointercancel", up); scene.removeEventListener("pointerleave", leave); }; }, [reduce]); const toggle = () => { const s = sim.current; const open = s.target !== OPEN; s.target = open ? OPEN : FLAT; s.user = !open; s.nextDip = performance.now() + 9000; setStanding(open); }; const hold = (v: boolean) => () => { sim.current.held = v; if (!v) sim.current.nextDip = performance.now() + 4000; }; const grain: CSSProperties = { backgroundImage: "repeating-linear-gradient(92deg, rgba(120,100,60,0.018) 0px, rgba(120,100,60,0) 3px, rgba(120,100,60,0.014) 7px), repeating-linear-gradient(1deg, rgba(120,100,60,0.014) 0px, rgba(120,100,60,0) 4px)" }; const arch = "104px 104px 4px 4px"; const sans = '"Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif'; return (

{/* shadow of the whole card on the table */}

{/* the leaf that lies on the table: it carries the sentence */}

One sentence

{site.sentence}

{/* the leaf that stands up: the page itself */}

{site.links.map((l) => ( {l} ))}

{site.headline.map((l) => ( {l} ))}

{site.sub} {site.note[0]}, {site.note[1]}.

{/* the pieces that stand in front of the page, back to front */}

{t.label}

{site.cta}

); } ```