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:T4ec0,import { useEffect, useRef, useState } from "react"; import { AnimatePresence, motion, useReducedMotion } from "framer-motion"; // The pages that take turns in the carrier. Each is a rolled print: a photograph over a strip of paper. const drafts = [ { name: "Halloway Flowers", paper: "#F3EEE4", ink: "#26221C", tone: "#2E9CC4", focus: "50% 22%", src: "https://images.pexels.com/photos/5254322/pexels-photo-5254322.jpeg?auto=compress&cs=tinysrgb&w=640", alt: "A woman holding white carnations against a blue backdrop, printed on a rolled sheet" }, { name: "Halloway Flowers, new hero", paper: "#F2552C", ink: "#170803", tone: "#C4621C", focus: "40% 30%", src: "https://images.pexels.com/photos/9956564/pexels-photo-9956564.jpeg?auto=compress&cs=tinysrgb&w=640", alt: "A man in profile holding a bouquet against an orange wall, printed on a rolled sheet" }, { name: "Halloway Flowers, evening menu", paper: "#15161B", ink: "#EFEBE4", tone: "#0A0A0C", focus: "50% 55%", src: "https://images.pexels.com/photos/17498111/pexels-photo-17498111.jpeg?auto=compress&cs=tinysrgb&w=640", alt: "Poppies in a glass vase against a black background, printed on a rolled sheet" }, ]; const BLUE = "#4F98FB"; const RELOAD = 1500; // milliseconds between a carrier leaving and the next one rising into the tube const EVERY = 4400; // how often the self-running demo presses the button const STEEL = "linear-gradient(90deg,#15171b 0%,#4a4f58 9%,#aeb5c0 22%,#f1f4f8 31%,#8d949f 44%,#444951 62%,#6f7681 78%,#2a2d33 92%,#111215 100%)"; const RUBBER = `linear-gradient(90deg,#123a7c 0%,#2f74dc 12%,${BLUE} 24%,#b9d8ff 33%,${BLUE} 44%,#2f74dc 66%,#1c4c9c 86%,#0e2d63 100%)`; function Screw({ className }: { className: string }) { return ( ); } function Collar({ bottom, lit, delay, reduce }: { bottom: string; lit: number; delay: number; reduce: boolean }) { return (

{/* A light ring in the collar that flashes as the carrier passes. */}

); } export default function PublishButtonPneumaticTube() { const reduce = !!useReducedMotion(); const root = useRef(null); const [sent, setSent] = useState(0); // how many carriers have gone up const [busy, setBusy] = useState(false); const [down, setDown] = useState(false); const [live, setLive] = useState(false); const [gone, setGone] = useState(false); // the carrier has left and the next has not arrived const [armed, setArmed] = useState(false); // pointer or focus is on the key: the air builds const busyRef = useRef(false); const touched = useRef(-1e9); const timers = useRef([]); const fire = () => { if (busyRef.current) return; busyRef.current = true; setBusy(true); setSent((n) => n + 1); timers.current.push(window.setTimeout(() => { setLive(true); setGone(true); }, reduce ? 0 : 560)); timers.current.push(window.setTimeout(() => { busyRef.current = false; setBusy(false); setGone(false); }, reduce ? 900 : RELOAD + 900)); }; useEffect(() => { if (reduce) return; let seen = true; const io = new IntersectionObserver(([e]) => { seen = e.isIntersecting; }); if (root.current) io.observe(root.current); let next = performance.now() + 5200; const tick = window.setInterval(() => { const now = performance.now(); if (!seen || document.hidden || busyRef.current || now - touched.current < 7000 || now < next) return; next = now + EVERY; setDown(true); timers.current.push(window.setTimeout(() => { setDown(false); fire(); }, 190)); }, 200); return () => { window.clearInterval(tick); io.disconnect(); timers.current.forEach((t) => window.clearTimeout(t)); timers.current = []; }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [reduce]); const d = drafts[sent % drafts.length]; return (

{/* The station. */}

{/* The glass tube, from the station up and out of the frame. */}

{/* Air rushing up behind the carrier. */} {sent > 0 && !reduce ? [14, 30, 46, 61, 75].map((x, i) => ( )) : null}

{/* the carrier: two rubber ends and a clear sleeve */}

{/* the rolled page */}

HALLOWAY

{/* the curve of the roll, and the loose edge of the sheet */}

{/* reflections on the front of the glass */}

{/* The lamp plate on the top collar. */}

{/* pressure gauge */}

Air

{/* the button: a thick pill in a milled slot */}

{gone ? "Sent. The site is live." : `${drafts[(busy && !gone ? sent + drafts.length - 1 : sent) % drafts.length].name}: ready to send`}

); } 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/publish-button-that-fires-a-rolled-up-site-up-a-glass-pneumatic-tube.tsx","content":"$64","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]