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:T5305,import { useEffect, useLayoutEffect, useRef, useState } from "react"; import type { CSSProperties, PointerEvent as ReactPointerEvent, ReactNode } from "react"; import { motion, useReducedMotion } from "framer-motion"; // One glass valve per feature, left to right. `tag` is the short word printed on the display cell. const parts = [ { id: "book", name: "Bookings", tag: "Book" }, { id: "shop", name: "Shop", tag: "Shop" }, { id: "blog", name: "Blog", tag: "Blog" }, { id: "form", name: "Contact", tag: "Form" }, ] as const; const school = "Tidewater Surf School"; const headline = "Lessons at first light."; const W = 520, H = 600; // drawn at this size, then scaled as one object const LIFT = 58; // how far a pulled valve hangs above its socket const FONT = '"Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif'; const LIT = "#cfe3ff"; const useIsoLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect; function Glyph({ id, size = 26, stroke = 2 }: { id: string; size?: number; stroke?: number }) { return ( ); } // Anything that glows is wrapped in this: it stutters up like a heater coming to temperature and fades out when the valve is pulled. function Warm({ on, delay = 0, className, style, children }: { on: boolean; delay?: number; className?: string; style?: CSSProperties; children?: ReactNode }) { const reduce = useReducedMotion(); return ( ); } function Valve({ part, index, on, onToggle }: { part: (typeof parts)[number]; index: number; on: boolean; onToggle: () => void }) { const reduce = useReducedMotion(); return ( {/* pins */} {/* bakelite base with a chrome band */} {part.name} {/* exhaust tip on the crown */} {/* the glass envelope and everything inside it */} {/* glow filling the bottle */} {/* support rods */} {/* mica spacers */} {/* the plate: a folded grey metal box with the feature cut out of its face */} {/* silvered getter flash inside the crown */} {/* reflections on the glass; they slide a little with the pointer */} {/* bloom outside the glass */} ); } // A cell of the display. The unlit drawing stays faintly visible, the way a cold fluorescent display shows its segments. function Cell({ on, tag, delay, children }: { on: boolean; tag: string; delay: number; children: ReactNode }) { const body = ( {children} {tag} ); return ( {body} {body} ); } export default function FeatureValveChassis() { const reduce = useReducedMotion(); const root = useRef(null); const [scale, setScale] = useState(1); const [seated, setSeated] = useState([true, true, true, true]); const [auto, setAuto] = useState(true); const [tick, setTick] = useState(0); const [said, setSaid] = useState(""); useIsoLayoutEffect(() => { const el = root.current; if (!el) return; const fit = () => setScale(Math.min(1.22, (el.clientWidth - 20) / W)); fit(); const ro = new ResizeObserver(fit); ro.observe(el); return () => ro.disconnect(); }, []); // The self-running demo: four valves drop home in turn, then one is pulled and reseated every few seconds. useIsoLayoutEffect(() => { if (reduce || !auto) return; const ids: number[] = []; const at = (ms: number, fn: () => void) => { ids.push(window.setTimeout(fn, ms)); }; const put = (i: number, v: boolean) => setSeated((s) => s.map((x, k) => (k === i ? v : x))); setSeated([false, false, false, false]); parts.forEach((_, i) => at(240 + i * 290, () => put(i, true))); let n = 0; const cycle = () => { const i = [2, 0, 3, 1][n++ % 4]; put(i, false); at(1700, () => put(i, true)); at(5600, cycle); }; at(6600, cycle); return () => ids.forEach((id) => window.clearTimeout(id)); }, [reduce, auto]); useEffect(() => { if (reduce) return; const id = window.setInterval(() => setTick((t) => t + 1), 900); return () => window.clearInterval(id); }, [reduce]); const toggle = (i: number) => { setAuto(false); setSeated((s) => s.map((x, k) => (k === i ? !x : x))); setSaid(`${parts[i].name} valve ${seated[i] ? "pulled" : "seated"}.`); }; const all = seated.every(Boolean); const any = seated.some(Boolean); const setAll = () => { setAuto(false); setSeated(parts.map(() => !all)); setSaid(all ? "All valves pulled." : "All valves seated."); }; const onMove = (e: ReactPointerEvent) => { if (reduce) return; const b = e.currentTarget.getBoundingClientRect(); e.currentTarget.style.setProperty("--valve-chassis-site-mx", String(((e.clientX - b.left) / b.width - 0.5) * 2)); }; return (

{/* light spilling on the table */} {/* The top deck of the chassis, seen from just above, with four sockets */} {parts.map((p, i) => toggle(i)} />)} {/* The front of the chassis */}
{/* blue light from the valves falling down the face */} {/* engraved socket names */} {/* corner screws */} {["left-[9px] top-[9px]", "right-[9px] top-[9px]", "left-[9px] bottom-[10px]", "right-[9px] bottom-[10px]"].map((c) => ( ))} {/* The display: black glass over a blue fluorescent drawing of the site */}

{school} {parts.map((p, i) => {p.tag})}

{headline}

{Array.from({ length: 21 }, (_, k) => )} {[0, 1, 2].map((k) => )}

{/* fine grid of the display mesh, then the glass */}
{/* under the display: mains lamp, engraved line, one real button */}

{said}

); } 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/valve-chassis-where-glass-feature-tubes-plug-in-warm-up-and-light-parts-of-a-site-on-a-blue-display.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]