62: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"] 63: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"] 64:T4b68,import { useEffect, useRef, useState } from "react"; import type { CSSProperties, ReactNode } from "react"; import { useReducedMotion } from "framer-motion"; /** Everything printed on the card. Change the business here. */ const site = { sentence: "A sourdough bakery in Lisbon that takes orders for Saturday pickup.", brand: "Forno Lume", links: ["Bread", "Mornings", "Find us"], headline: ["Bread worth", "waking up", "for."], sub: "Slow dough, shaped by hand in Alfama.", cta: "Order for Saturday", note: ["Saturday pickup", "8 until 1"], hero: { src: "https://images.pexels.com/photos/4881596/pexels-photo-4881596.jpeg?auto=compress&cs=tinysrgb&w=600", alt: "Round sourdough loaf on a dark surface dusted with flour" }, tiles: [ { label: "Country loaf", src: "https://images.pexels.com/photos/4881589/pexels-photo-4881589.jpeg?auto=compress&cs=tinysrgb&w=300", alt: "Sliced sourdough seen from above on a floured black table", tone: "#2a2420" }, { label: "Almond croissant", src: "https://images.pexels.com/photos/13439695/pexels-photo-13439695.jpeg?auto=compress&cs=tinysrgb&w=300", alt: "Two almond croissants on white paper", tone: "#d9d2c8" }, { label: "Seeded rye", src: "https://images.pexels.com/photos/17890200/pexels-photo-17890200.jpeg?auto=compress&cs=tinysrgb&w=300", alt: "Dark crusted loaf cut open on a cloth", tone: "#3a2c22" }, ], }; const BLUE = "#4F98FB"; const INK = "#0B0D12"; const PAPER = "#F8F6F1"; // Design pixels. The whole scene is scaled to fit its frame. const W = 580; // card width const H = 360; // height of the leaf that stands up const D = 330; // depth of the leaf that lies on the table const SCENE_W = 900; const SCENE_H = 740; const OPEN = 97; // degrees between the two leaves when the card is standing const FLAT = 7; const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); const stand = "rotateX(calc(var(--a) * 1deg - 90deg))"; /** A die-cut piece that stands parallel to the back leaf, `d` pixels in front of the fold, held by paper tabs. */ function Flat({ x, w, h, d, radius, tabs, edge = "#cfcabf", children }: { x: number; w: number; h: number; d: number; radius: string; tabs: number[]; edge?: string; children: ReactNode }) { return (

{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}

); } 61:["$","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"}]]}]}]]}],["$","$L62",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L63",null,{"files":[{"path":"components/we-inc/pop-up-card-where-a-typed-sentence-stands-up-as-a-layered-paper-homepage.tsx","content":"$64","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]