60: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"] 61: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"] 62:T55e9,import { useEffect, useMemo, useRef, useState } from "react"; import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, SyntheticEvent } from "react"; import { AnimatePresence, motion, useReducedMotion } from "framer-motion"; type Page = { brand: string; nav: string[]; head: string[]; sub: string; facts: string[]; cta: string; src?: string; alt?: string; focus?: string }; // The sentences the board sets by itself, and the page each one turns into. Headline rows hold ten letters. const pages: (Page & { sentence: string })[] = [ { sentence: "A coffee roastery in Porto that posts fresh beans weekly", brand: "DRUM & DRIP", nav: ["BEANS", "VISIT", "POST"], head: ["FRESH", "ROAST BY", "FRIDAY"], sub: "SMALL BATCHES, POSTED WEEKLY", facts: ["OPEN 7 TO 4", "ROASTED HERE", "BEANS BY POST"], cta: "Order beans", focus: "62% 50%", src: "https://images.pexels.com/photos/31986827/pexels-photo-31986827.jpeg?auto=compress&cs=tinysrgb&w=640", alt: "Hot water poured from a kettle over ground coffee in a glass dripper" }, { sentence: "A bike workshop in Ghent with same day puncture repairs", brand: "SPOKE HOUSE", nav: ["REPAIRS", "HIRE", "VISIT"], head: ["BACK ON", "TWO WHEELS", "TODAY"], sub: "PUNCTURES MENDED WHILE YOU WAIT", facts: ["DROP IN BY TEN", "LOAN BIKES", "OPEN SIX DAYS"], cta: "Book a repair", focus: "50% 40%", src: "https://images.pexels.com/photos/31452612/pexels-photo-31452612.jpeg?auto=compress&cs=tinysrgb&w=640", alt: "A bicycle hanging in a lit workshop seen through a window from the street" }, { sentence: "A plant shop in Lyon that runs repotting evenings", brand: "FERN & CO", nav: ["PLANTS", "EVENINGS", "VISIT"], head: ["GREEN", "THINGS,", "WELL KEPT"], sub: "REPOTTING EVENINGS ON THURSDAYS", facts: ["BRING A POT", "SOIL SUPPLIED", "TEA AT SEVEN"], cta: "Save a seat", focus: "50% 45%", src: "https://images.pexels.com/photos/14515146/pexels-photo-14515146.jpeg?auto=compress&cs=tinysrgb&w=640", alt: "A small plant shop crowded with potted and hanging plants on wooden shelves" }, ]; const BLUE = "#4F98FB"; const HOLD = 4600; // how long the self-running demo leaves a finished page on the board const MAX = 72; // most characters the board accepts const COLS = 17, ROWS = 5; // the sentence is set in a grid of this many letters const CELL = 21, PITCH = 39; // letter width and row spacing for the sentence, in pixels const W = 560, H = 704; // the scene is drawn at this size and scaled to fit const FELT_W = 396, FELT_H = 520, PAD = 20; const SX = Math.round((FELT_W - COLS * CELL) / 2), SY = 132; const FONT = '"Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif'; const svg = (w: number, h: number, body: string) => `url("data:image/svg+xml,${encodeURIComponent(``)}")`; const FELT = svg(240, 240, ""); const GRAIN_H = svg(640, 64, ""); const GRAIN_V = svg(64, 640, ""); // Every letter sits a little crooked, the same way each time. const wobble = (n: number) => { const v = Math.sin(n * 127.1 + 31.7) * 43758.5453; return (v - Math.floor(v)) * 2 - 1; }; const WHITE = "0 -1px 0 #ffffff, 0 1.5px 0 #9c978b, 0 4px 4px rgba(0,0,0,0.9)"; const INKED = "0 -1px 0 #cfe3ff, 0 1.5px 0 #1f5fc4, 0 4px 4px rgba(0,0,0,0.9)"; // Break a sentence into rows of the grid without splitting words. function setType(s: string, cols: number) { const at: { r: number; c: number }[] = []; let r = 0, c = 0; for (let i = 0; i < s.length; i++) { if (s[i] === " ") { at.push({ r, c }); c += 1; continue; } if (i === 0 || s[i - 1] === " ") { let len = 0; while (i + len < s.length && s[i + len] !== " ") len += 1; if (c > 0 && c + len > cols) { r += 1; c = 0; } } if (c >= cols) { r += 1; c = 0; } at.push({ r, c }); c += 1; } const end = c >= cols ? { r: r + 1, c: 0 } : { r, c }; return { at, end, rows: r + 1 }; } const pageFrom = (words: string): Page => { const clean = words.trim().replace(/\s+/g, " ").replace(/[.!?]+$/, "").toUpperCase(); const set = setType(clean, 10); const head: string[] = []; set.at.forEach((p, i) => { if (p.r < 3 && p.c < 10) head[p.r] = (head[p.r] ?? "") + clean[i]; }); // Do not end the headline on a joining word. const rows = head.map((h) => h.trim()).filter(Boolean); if (set.rows > 3 && rows.length) rows[rows.length - 1] = rows[rows.length - 1].replace(/\s+(WITH|IN|THAT|FOR|AND|A|AN|THE|OF|WHERE|TO|ON|AT)$/, "") || rows[rows.length - 1]; return { brand: "YOUR PAGE", nav: ["ABOUT", "WORK", "CONTACT"], head: rows, sub: "SET FROM YOUR OWN SENTENCE", facts: ["WORDS BY YOU", "LAYOUT BY US", "YOURS TO EDIT"], cta: "Get in touch" }; }; type Fall = { d: number; j: number }; const drop = { hide: { opacity: 0, scale: 1.7 }, show: (f: Fall) => ({ opacity: 1, scale: 1, y: 0, rotate: f.j * 2.4, transition: { delay: f.d, type: "spring" as const, stiffness: 520, damping: 24 } }), gone: (f: Fall) => ({ y: FELT_H + 40, rotate: f.j * 70, transition: { duration: 0.5 + Math.abs(f.j) * 0.2, delay: Math.abs(wobble(f.j * 9)) * 0.16, ease: [0.55, 0, 1, 0.55] as [number, number, number, number] } }) }; // One row of plastic letters pushed into the grooves. function Line({ text, x, y, cell, size, row, blue, dim, right }: { text: string; x?: number; y: number; cell: number; size: number; row: number; blue?: boolean; dim?: boolean; right?: boolean }) { const left = right ? FELT_W - PAD - text.length * cell : x ?? PAD; return ( <> {text.split("").map((ch, i) => ch === " " ? null : ( {ch} ))} ); } export default function FeltLetterBoardPrompt() { const reduce = !!useReducedMotion(); const root = useRef(null); const field = useRef(null); const [k, setK] = useState(1); const [text, setText] = useState(() => pages[0].sentence.slice(0, pages[0].sentence.length - 3)); const [caret, setCaret] = useState(-1); // -1 follows the end of the text const [page, setPage] = useState(null); const [focus, setFocus] = useState(false); const [said, setSaid] = useState(""); const mine = useRef(false); // a visitor has started typing const timers = useRef([]); const later = (fn: () => void, ms: number) => { timers.current.push(window.setTimeout(fn, ms)); }; const stop = () => { timers.current.forEach((t) => window.clearTimeout(t)); timers.current = []; }; const shown = text.toUpperCase(); const set = useMemo(() => setType(shown, COLS), [shown]); useEffect(() => { const el = root.current; if (!el) return; const fit = () => setK(Math.max(0.5, Math.min(1.08, (el.clientWidth - 16) / W))); fit(); const ro = new ResizeObserver(fit); ro.observe(el); // The board leans a few degrees towards the pointer. const move = (e: PointerEvent) => { const r = el.getBoundingClientRect(); el.style.setProperty("--ry", `${(((e.clientX - r.left) / r.width - 0.5) * 9).toFixed(2)}deg`); el.style.setProperty("--rx", `${((0.5 - (e.clientY - r.top) / r.height) * 6).toFixed(2)}deg`); }; const leave = () => { el.style.setProperty("--ry", "0deg"); el.style.setProperty("--rx", "0deg"); }; el.addEventListener("pointermove", move); el.addEventListener("pointerleave", leave); return () => { ro.disconnect(); el.removeEventListener("pointermove", move); el.removeEventListener("pointerleave", leave); }; }, []); useEffect(() => { if (reduce) { setText(pages[0].sentence); setPage(pages[0]); return; } const play = (i: number, from: number) => { const s = pages[i].sentence; let n = from; setPage(null); setText(s.slice(0, n)); const key = () => { if (mine.current) return; n += 1; setText(s.slice(0, n)); if (n < s.length) later(key, 40 + ((n * 43) % 50)); else later(() => { setPage(pages[i]); setSaid(`Page set: ${pages[i].head.join(" ")}`); later(() => { setText(""); play((i + 1) % pages.length, 0); }, HOLD); }, from ? 160 : 420); }; later(key, from ? 70 : 900); }; play(0, pages[0].sentence.length - 3); return stop; // eslint-disable-next-line react-hooks/exhaustive-deps }, [reduce]); const take = () => { mine.current = true; stop(); setPage(null); setText(""); setCaret(-1); setSaid(""); }; const submit = () => { if (page) { take(); field.current?.focus(); return; } if (!text.trim()) { field.current?.focus(); return; } const demo = pages.find((p) => p.sentence === text); const next = demo ?? pageFrom(text); mine.current = true; stop(); setPage(next); setSaid(`Page set: ${next.head.join(" ")}`); }; const onKey = (e: ReactKeyboardEvent) => { if (e.key === "Enter") { e.preventDefault(); submit(); } }; const onSelect = (e: SyntheticEvent) => setCaret(e.currentTarget.selectionStart ?? -1); const onChange = (value: string, where: number) => { const v = value.replace(/\n/g, ""); if (setType(v.toUpperCase(), COLS).rows > ROWS) return; // the board is full mine.current = true; stop(); setPage(null); setText(v); setCaret(where); }; const ci = caret < 0 || caret > shown.length ? shown.length : caret; const cpos = ci < shown.length ? set.at[ci] : set.end; const ease = reduce ? { duration: 0 } : undefined; const side: CSSProperties = { position: "absolute" }; return (

{/* Shadow on the wall, then the four mitred lengths of oak. */}

{/* The felt, with its ribs. Letters that fall are cut off at its edge. */}

{/* The request: a blue heading, the sentence as it is typed, and a hint. */}

{"WHAT SHOULD WE BUILD?".split("").map((ch, i) => ch === " " ? null : {ch})} {/* The caret is one blue peg. */} = COLS ? CELL - 4 : 2), top: SY + Math.min(cpos.r, ROWS - 1) * PITCH - 1, width: 5, height: 24, background: `linear-gradient(180deg,#b9d8ff,${BLUE} 40%,#2f74dc)`, boxShadow: `0 3px 4px rgba(0,0,0,0.9), 0 0 12px rgba(79,152,251,0.8)`, animation: "felt-letter-board-caret 1.1s steps(1) infinite" }} /> {"PRESS ENTER TO SET THE PAGE".split("").map((ch, i) => ch === " " ? null : {ch})}

{(page ? "" : shown).split("").map((ch, i) => ch === " " ? null : ( {ch} ))}

{page && ( {page.head.map((h, i) => )}

{page.src ? {page.alt}

: ( )}

{page.facts.map((f, i) => 0} />)} {page.cta} )} Describe what you want built in one sentence

{ setFocus(true); if (!mine.current || page) take(); }}
                onBlur={() => setFocus(false)}
                onChange={(e) => onChange(e.target.value, e.target.selectionStart ?? -1)}
                onSelect={onSelect}
                onKeyDown={onKey}
                className="felt-letter-board-field absolute inset-0 h-full w-full cursor-text resize-none overflow-hidden border-0 bg-transparent p-[20px] text-[16px] text-transparent outline-none"
                style={{ caretColor: "transparent" }}
              />
              <span aria-hidden="true" className="pointer-events-none absolute inset-0" style={{ boxShadow: `inset 0 8px 14px rgba(0,0,0,0.95), inset 5px 0 9px rgba(0,0,0,0.6), inset -3px 0 6px rgba(0,0,0,0.5), inset 0 -1px 0 rgba(255,255,255,0.12)${focus ? `, inset 0 0 0 2px ${BLUE}` : ""}` }} />
            </div>
          </div>

<button type="button" onClick={submit} className="absolute left-1/2 top-[596px] flex h-[48px] w-[212px] -translate-x-1/2 items-center justify-center gap-[10px] rounded-full text-[15px] font-extrabold tracking-[-0.02em] text-white outline-none transition-transform duration-100 focus-visible:ring-2 focus-visible:ring-[#0B0D12] focus-visible:ring-offset-2 focus-visible:ring-offset-[#DAD5CB] active:translate-y-[1px]" style={{ background: "linear-gradient(180deg,#2a2e37 0%,#12141a 46%,#07080b 100%)", boxShadow: "0 12px 18px -8px rgba(40,30,15,0.7), inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -2px 3px rgba(0,0,0,0.8)", fontFamily: FONT }}>
            <span aria-hidden="true" className="h-[8px] w-[8px] rounded-full" style={{ background: BLUE, boxShadow: `0 0 8px 1px ${BLUE}` }} />
            {page ? "Clear the board" : "Set the page"}
          </button>
          <p className="absolute left-0 top-[662px] w-full text-center text-[12px] font-semibold tracking-[-0.005em] text-[#4a4840]">Click the board and type a sentence</p>
          <p className="sr-only" role="status">{said}</p>
        </div>
      </div>
    </div>
  );
}
5f:["$","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"}]]}]}]]}],["$","$L60",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L61",null,{"files":[{"path":"components/we-inc/felt-letter-board-prompt-box-where-typed-plastic-letters-drop-out-of-the-grooves-and-a-homepage-is-set-in-their-place.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>