# Roller Conveyor Order Tracker with a Taped Parcel That Rides Steel Rollers past Four Enamel Station Signs with Lamps > Order tracker drawn as a roller conveyor: a taped parcel rides steel rollers and a lamp lights on each station sign it reaches. Free React and HTML code. A shadcn/ui block from the [@weinc](https://we.inc/components?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/weinc/roller-conveyor-order-tracker-with-a-taped-parcel-that-rides-steel-rollers-past-four-enamel-station-signs-with-lamps). - Page, with a live preview: https://shadcn.exchange/r/weinc/roller-conveyor-order-tracker-with-a-taped-parcel-that-rides-steel-rollers-past-four-enamel-station-signs-with-lamps - Screenshot: https://shadcn.exchange/shot/weinc/roller-conveyor-order-tracker-with-a-taped-parcel-that-rides-steel-rollers-past-four-enamel-station-signs-with-lamps/light.png - Registry item: https://we.inc/r/roller-conveyor-order-tracker-with-a-taped-parcel-that-rides-steel-rollers-past-four-enamel-station-signs-with-lamps.json - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/weinc/roller-conveyor-order-tracker-with-a-taped-parcel-that-rides-steel-rollers-past-four-enamel-station-signs-with-lamps.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `framer-motion` ## Files ### `components/we-inc/roller-conveyor-order-tracker-with-a-taped-parcel-that-rides-steel-rollers-past-four-enamel-station-signs-with-lamps.tsx` ```tsx 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 (
); } ```