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:T6451,import { useEffect, useRef, useState } from "react"; import type { KeyboardEvent as ReactKeyboardEvent, ReactNode } from "react"; import { animate, motion, useMotionValue, useReducedMotion, useSpring, useTransform } from "framer-motion"; import type { MotionValue } from "framer-motion"; // Each proof is one sheet folded in three. PW and PH are the size of a single fold. const PW = 300; const PH = 184; const PIN = "#4F98FB"; // the pin pushed through the chosen proof, and the dot in the active pill const HOLD = 3600; // how long the self-running demo leaves a page open, in milliseconds const GRAIN = "url(\"data:image/svg+xml;utf8,\")"; function Photo({ src, alt, tone, focus = "50% 50%", className = "" }: { src: string; alt: string; tone: string; focus?: string; className?: string }) { return (

); } // The three designs for one invented florist. Every design is three folds: top, middle, bottom. const designs: { name: string; note: string; paper: string; folds: ReactNode[] }[] = [ { name: "Poster", note: "Loud colour, one huge line", paper: "#F2552C", folds: [

HALLOWAY ShopWeddingsVisit

Flowers that
show up loud.

Order a bouquet

In the buckets this week

{[["Dahlias", "$38"], ["Ranunculus", "$42"], ["Marigold", "$24"]].map(([n, p]) => (

{n} {p}

))}

Come by
the shop.

14 Wren Street, by the tram stop
Tuesday to Sunday, from eight

DeliveryCare notesJournal

HALLOWAY

, ], }, { name: "Journal", note: "Cream paper, quiet serif", paper: "#F3EEE4", folds: [

HallowayWeddingsVisit us

Florist on Wren Street

Seasonal stems, arranged by hand.

See this week’s bunches

From the bench No. 12

{[ { t: "The table bunch", tone: "#8FA7AE", f: "50% 50%", src: "https://images.pexels.com/photos/3148500/pexels-photo-3148500.jpeg?auto=compress&cs=tinysrgb&w=640", alt: "A bouquet of gerberas and chrysanthemums against a grey blue backdrop" }, { t: "Wedding work", tone: "#D9D9DA", f: "50% 40%", src: "https://images.pexels.com/photos/13697230/pexels-photo-13697230.jpeg?auto=compress&cs=tinysrgb&w=640", alt: "A woman in a pale suit balancing a bouquet against a white wall" }, { t: "Kept and dried", tone: "#69B5EE", f: "50% 60%", src: "https://images.pexels.com/photos/7698525/pexels-photo-7698525.jpeg?auto=compress&cs=tinysrgb&w=640", alt: "A figure in a pale costume holding a red rose in front of a painted sky" }, ].map((p) => (

{p.t}

))}

We buy from growers we know by name, and we write every card by hand.

Reserve a bunch

14 Wren StreetCare notesOpen from eight

, ], }, { name: "Midnight", note: "Dark room, flowers lit like a still life", paper: "#0E0F13", folds: [

HallowayMenu

Night-cut flowers for long tables.

Book a table piece

What we make

{[["01", "Table pieces", "from $64"], ["02", "The Sunday bunch", "from $28"], ["03", "Weddings", "by request"]].map(([n, t, p]) => (

{n} {t} {p}

))}

Open late
on Fridays.

14 Wren Street
Tuesday to Sunday

, ], }, ]; const clamp = (v: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, v)); function Face({ children, crease }: { children: ReactNode; crease?: boolean }) { return (

{children}

{crease ? ( <>

) : null}

); } function PaperBack() { return (

); } type Place = { x: number; y: number; rotate: number; scale: number; z: number }; function Proof({ d, place, open, chosen, flex, reduce, onPick }: { d: (typeof designs)[number]; place: Place; open: boolean; chosen: boolean; flex: MotionValue; reduce: boolean; onPick: () => void }) { const pB = useSpring(open ? 1 : 0, { stiffness: 120, damping: 15, mass: 1 }); const pC = useSpring(open ? 1 : 0, { stiffness: 105, damping: 13, mass: 1 }); useEffect(() => { if (reduce) { pB.jump(open ? 1 : 0); pC.jump(open ? 1 : 0); return; } // Opening: the middle fold drops first and the last one peels off it. Closing runs the other way round. const first = open ? pB : pC, second = open ? pC : pB; first.set(open ? 1 : 0); const t = window.setTimeout(() => second.set(open ? 1 : 0), open ? 230 : 190); return () => window.clearTimeout(t); }, [open, reduce, pB, pC]); // A sheet that has been folded never lies quite flat again: the folds rest a few degrees open and flex with the pointer. const rotB = useTransform([pB, flex], ([p, f]: number[]) => -179.3 + clamp(p, 0, 1.12) * (170.3 - 4 * f)); const rotC = useTransform([pC, flex], ([p, f]: number[]) => 178.6 - clamp(p, 0, 1.1) * (163.6 - 7 * f)); const shadeB = useTransform(rotB, [-179, -90, -12, 0], [0.6, 0.5, 0.12, 0.02]); const sheenC = useTransform(rotC, [178, 80, 22, 0], [0, 0.42, 0.02, 0]); const shadeC = useTransform(rotC, [178, 100, 30], [0.35, 0.12, 0]); const reach = useTransform([pB, pC], ([b, c]: number[]) => 1 + clamp(b, 0, 1) * 0.96 + clamp(c, 0, 1) * 0.94); const stack = useTransform(pB, [0, 0.25], [1, 0]); const move = reduce ? { duration: 0 } : { type: "spring" as const, stiffness: 150, damping: 19, mass: 1 }; return ( {/* Shadow on the table: it stretches as the sheet opens. */} {/* The edges of the two folds tucked behind, seen as a thin stack under the top fold. */}

{d.folds[0]}

{d.folds[1]} {d.folds[2]}

{/* The pin that marks the choice. */} ); } export default function ThreeFoldedDesignProofs() { const reduce = !!useReducedMotion(); const stage = useRef(null); const radios = useRef<(HTMLButtonElement | null)[]>([]); const [chosen, setChosen] = useState(1); const [open, setOpen] = useState(true); const [hand, setHand] = useState(false); const [width, setWidth] = useState(1280); const timers = useRef([]); const touched = useRef(-1e9); const busy = useRef(0); // the demo waits until this moment before it moves again const chosenRef = useRef(1); const flexRaw = useMotionValue(0); const flex = useSpring(flexRaw, { stiffness: 60, damping: 12 }); useEffect(() => { const el = stage.current; if (!el) return; const ro = new ResizeObserver(() => setWidth(el.clientWidth)); ro.observe(el); setWidth(el.clientWidth); return () => ro.disconnect(); }, []); // With nobody near, the open page breathes a little, as paper does in moving air. const breath = useRef<{ stop: () => void } | null>(null); const breathe = () => { breath.current?.stop(); if (!reduce) breath.current = animate(flexRaw, [-0.75, 0.75], { duration: 2.6, repeat: Infinity, repeatType: "mirror", ease: "easeInOut" }); }; useEffect(() => { breathe(); return () => breath.current?.stop(); /* eslint-disable-next-line react-hooks/exhaustive-deps */ }, [reduce]); const clear = () => { timers.current.forEach((t) => window.clearTimeout(t)); timers.current = []; }; const later = (fn: () => void, ms: number) => { timers.current.push(window.setTimeout(fn, ms)); }; // Fold the open page away, bring the next proof to the middle, then open it. const show = (i: number, viaHand: boolean) => { clear(); if (reduce) { chosenRef.current = i; setChosen(i); setHand(false); setOpen(true); return; } busy.current = performance.now() + (viaHand ? 2250 : 1080) + HOLD; setOpen(false); if (viaHand) { later(() => setHand(true), 760); later(() => { chosenRef.current = i; setChosen(i); setHand(false); }, 1750); later(() => setOpen(true), 2250); } else { later(() => { chosenRef.current = i; setChosen(i); setHand(false); }, 620); later(() => setOpen(true), 1080); } }; // Self-running demo: deals the hand again and picks the next design, until someone takes over. useEffect(() => { if (reduce) return; let seen = true; const io = new IntersectionObserver(([e]) => { seen = e.isIntersecting; }); if (stage.current) io.observe(stage.current); const tick = window.setInterval(() => { const now = performance.now(); if (!seen || document.hidden || now - touched.current < 9000 || now < busy.current) return; show((chosenRef.current + 1) % designs.length, true); }, 400); busy.current = performance.now() + HOLD + 2600; return () => { window.clearInterval(tick); io.disconnect(); clear(); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [reduce]); const pick = (i: number) => { touched.current = performance.now(); if (i === chosenRef.current && !hand) { clear(); setOpen(true); return; } show(i, false); }; const onKey = (e: ReactKeyboardEvent, i: number) => { const n = designs.length; const next = e.key === "ArrowRight" || e.key === "ArrowDown" ? (i + 1) % n : e.key === "ArrowLeft" || e.key === "ArrowUp" ? (i + n - 1) % n : e.key === "Home" ? 0 : e.key === "End" ? n - 1 : -1; if (next < 0) return; e.preventDefault(); pick(next); radios.current[next]?.focus(); }; const compact = width < 640; const s = compact ? Math.min(0.82, (width - 24) / 400) : 1; const half = width / 2 / s; const sideX = Math.min(392, half - 96); const handX = Math.min(236, half - 158); const rest = designs.map((_, i) => i).filter((i) => i !== chosen); const placeOf = (i: number): Place => { if (hand) return { x: (i - 1) * handX, y: 176 + Math.abs(i - 1) * 20, rotate: (i - 1) * 8, scale: 1, z: 2 + i }; if (i === chosen) return { x: 0, y: 0, rotate: 0, scale: 1, z: 12 }; const side = rest.indexOf(i) === 0 ? -1 : 1; return { x: side * sideX, y: compact ? 318 : 214, rotate: side * (compact ? 13 : 9), scale: compact ? 0.9 : 0.96, z: 2 + i }; }; return (

{ breath.current?.stop(); breath.current = null; const b = e.currentTarget.getBoundingClientRect(); flexRaw.set(clamp(((e.clientY - b.top) / b.height) * 2 - 1, -1, 1)); }} onPointerLeave={breathe} className="relative min-h-[620px] w-full select-none overflow-hidden bg-[#F6F4EF] bg-[radial-gradient(90%_70%_at_38%_22%,#FDFCF9_0%,#F6F4EF_45%,#E7E2D7_100%)] text-[#0B0D12] sm:min-h-[800px]" style={{ fontFamily: '"Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif' }} >

{designs.map((d, i) => ( pick(i)} /> ))}

{designs.map((d, i) => ( ))}

{designs[chosen].note}

); } 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/three-folded-design-proofs-dealt-like-a-hand-where-the-chosen-one-unfolds-into-a-full-page.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]