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:T5b23,import { useCallback, useEffect, useRef, useState } from "react"; import { motion, useReducedMotion, useSpring, useTransform } from "framer-motion"; /** The order and the four places it passes. Edit the list to rename or retime the stations. */ const order = { number: "OT-70418", courier: "Otterline", line: "Line 3", stations: [ { name: "Packed", place: "Halewick depot", time: "Tue 08:12", note: "Your parcel is packed and labelled at the Halewick depot." }, { name: "Sorted", place: "Ashby hub", time: "Tue 21:40", note: "It was sorted overnight at the Ashby hub." }, { name: "On the van", place: "Route 14", time: "Wed 07:05", note: "It is on the van for route 14 and due before noon." }, { name: "Delivered", place: "Front porch", time: "Wed 11:26", note: "Delivered to the front porch on Wednesday at 11:26." }, ], }; // Design pixels in the conveyor's own space: x runs along the line, y across it, z up off the floor. const L = 820; // length of the line const CW = 150; // width between the rails const CH = 74; // height of the roller tops const RAIL = 8; const PITCH = 24; // one roller every 24px const ROLL = 19; // roller diameter const PW = 118; // the parcel: length, depth, height const PD = 96; const PH = 70; const SIGN_W = 176; const SIGN_H = 252; const PLATE_H = 88; const SCENE_W = 940; const SCENE_H = 548; const TURN = -20; const TIP = 60; const START = 2; // the station the parcel is waiting at when the page loads const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); const svg = (s: string) => `url("data:image/svg+xml,${encodeURIComponent(s)}")`; const stops = order.stations.map((_, k) => 96 + k * ((L - 192) / (order.stations.length - 1))); const rollers = Array.from({ length: Math.floor((L - 6) / PITCH) }, (_, i) => 6 + i * PITCH); const fibre = svg( "", ); const grit = svg( "", ); const YELLOW = "#f0b21c"; const ENAMEL = "#143a31"; const kraft = (ribs: string, base: string) => ({ backgroundColor: base, backgroundImage: `${ribs}, ${fibre}`, backgroundSize: "auto, 220px 220px" }); const ribsX = "repeating-linear-gradient(90deg, rgba(255,240,214,0.08) 0 3px, rgba(60,34,8,0.07) 3px 6px)"; const ribsY = "repeating-linear-gradient(180deg, rgba(255,240,214,0.08) 0 3px, rgba(60,34,8,0.07) 3px 6px)"; const steel = "linear-gradient(90deg, #4c5359 0%, #8d969d 14%, #e9eef2 34%, #ffffff 42%, #c3cbd1 56%, #7b848b 78%, #3d4348 100%)"; const tapePaper = { backgroundColor: "#efe6d3", backgroundImage: fibre, backgroundSize: "200px 200px" }; export default function RollerConveyorTracker() { const reduce = !!useReducedMotion(); const wrapRef = useRef(null); const sceneRef = useRef(null); const [step, setStep] = useState(START); const [at, setAt] = useState(START); // the last station the parcel has actually reached const [running, setRunning] = useState(false); const [touched, setTouched] = useState(false); const live = useRef({ step: START, touched: false, paused: false, timer: 0 }); const x = useSpring(stops[START] - PW / 2, { stiffness: 22, damping: 10.5, mass: 1 }); const parcelT = useTransform(x, (v) => { const wave = (v / PITCH) * Math.PI * 2; return `translate3d(${v.toFixed(2)}px, 0px, ${(CH + 1 + Math.sin(wave) * 0.5).toFixed(2)}px) rotateY(${(Math.cos(wave) * 0.35).toFixed(3)}deg)`; }); const parcelO = useTransform(x, (v) => clamp(Math.min((v + 190) / 60, (L + 30 - v) / 70), 0, 1)); const shadowO = useTransform(parcelO, (o) => o * 0.6); const shadowT = useTransform(x, (v) => `translate3d(${(v + 4).toFixed(2)}px, 0px, ${CH + 0.6}px)`); useEffect( () => x.on("change", (v) => { const moving = Math.abs(x.getVelocity()) > 6; setRunning((r) => (r === moving ? r : moving)); const k = live.current.step; if (Math.abs(v + PW / 2 - stops[k]) < 14) setAt((a) => (a === k ? a : k)); }), [x], ); const go = useCallback( (k: number) => { const s = live.current; window.clearTimeout(s.timer); const from = s.step; s.step = k; setStep(k); const target = stops[k] - PW / 2; if (reduce) { x.jump(target); setAt(k); return; } if (k < from) { // a new parcel: the old one runs off the end and the next is fed on at the start setAt(-1); x.set(L + 60); s.timer = window.setTimeout(() => { x.jump(-190); x.set(target); }, 1300); } else x.set(target); }, [reduce, x], ); // self-playing demo: waits at the third station, then delivers and starts the next order useEffect(() => { if (reduce) return; const s = live.current; let id = window.setTimeout(function tick() { if (s.touched) return; if (!s.paused && !document.hidden) go((s.step + 1) % order.stations.length); id = window.setTimeout(tick, s.step === order.stations.length - 1 ? 3600 : s.step === 0 ? 4200 : 3000); }, 3500); return () => { window.clearTimeout(id); window.clearTimeout(s.timer); }; }, [go, reduce]); useEffect(() => { const wrap = wrapRef.current; const scene = sceneRef.current; if (!wrap || !scene) return; const measure = () => { const sc = clamp(wrap.clientWidth / (SCENE_W - 20), 0.36, 1.1); 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); return () => ro.disconnect(); }, []); const pick = (k: number) => { live.current.touched = true; setTouched(true); go(k); }; const p3 = "preserve-3d" as const; const stand = { transformOrigin: "50% 100%", transform: "rotateX(-90deg)" }; return (

(live.current.paused = true)} onPointerLeave={() => (live.current.paused = false)} className="relative w-full overflow-hidden" style={{ height: SCENE_H }}>

{/* floor: shadow under the line and a painted walkway stripe */}

{/* far legs */}

{[40, 300, 560, 790].map((lx) => (

))}

{/* station signs on posts behind the line */} {order.stations.map((s, k) => { const lit = k <= at && k <= step; const now = k === at && k === step; return (

{[ [9, 9], [SIGN_W - 14, 9], [9, PLATE_H - 14], [SIGN_W - 14, PLATE_H - 14], ].map(([sx, sy]) => ( ))} {/* the lamp */} {now && } 0{k + 1} {s.name} {s.place} {s.time}

); })} {/* the dark well under the rollers, then the rollers themselves */}

{rollers.map((rx, i) => (

))}

{/* the parcel and the shadow it drags across the rollers */} {/* front, end and top */}

{order.courier}

{`${order.courier} / tracked / `.repeat(4)} {order.courier} 14

{/* rail tops, the near rail with its bolts and legs, and the end of the line */}

{[44, 304, 564, 794].map((lx) => (

))}

{rollers.map((rx) => ( ))} {order.courier} / {order.line}

{/* the same four steps as real, full-size controls */}

Order {order.number} {order.stations[step].note}

); } 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/roller-conveyor-order-tracker-with-a-taped-parcel-that-rides-steel-rollers-past-four-enamel-station-signs-with-lamps.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]