# Sushi Conveyor Product Carousel with Photographed Platters That Glide past on a Belt and Lift off onto a Black Counter > Product carousel built as a sushi bar: photographed platters glide past on a belt and the one you tap lifts off onto the counter. 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/sushi-conveyor-product-carousel-with-photographed-platters-that-glide-past-on-a-belt-and-lift-off-onto-a-black-counter). - Page, with a live preview: https://shadcn.exchange/r/weinc/sushi-conveyor-product-carousel-with-photographed-platters-that-glide-past-on-a-belt-and-lift-off-onto-a-black-counter - Screenshot: https://shadcn.exchange/shot/weinc/sushi-conveyor-product-carousel-with-photographed-platters-that-glide-past-on-a-belt-and-lift-off-onto-a-black-counter/light.png - Registry item: https://we.inc/r/sushi-conveyor-product-carousel-with-photographed-platters-that-glide-past-on-a-belt-and-lift-off-onto-a-black-counter.json - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/weinc/sushi-conveyor-product-carousel-with-photographed-platters-that-glide-past-on-a-belt-and-lift-off-onto-a-black-counter.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/sushi-conveyor-product-carousel-with-photographed-platters-that-glide-past-on-a-belt-and-lift-off-onto-a-black-counter.tsx` ```tsx import { useCallback, useEffect, useRef, useState } from "react"; import { useReducedMotion } from "framer-motion"; /** * The platters. Every photograph is shot on pure black, so on a black stage the picture has no edge. * `box` is where the plate and food sit in the square picture: left, top, right and front edge, as fractions. */ const plates = [ { name: "Salmon moriawase", detail: "14 pieces, salmon five ways", price: 24, src: "https://images.pexels.com/photos/36292346/pexels-photo-36292346.jpeg?auto=compress&cs=tinysrgb&w=1000", alt: "Round black plate of salmon sashimi, salmon nigiri, small rolls and pickled ginger", box: [0.18, 0.297, 0.849, 0.726] }, { name: "Counter selection", detail: "22 pieces, tuna and white fish", price: 31, src: "https://images.pexels.com/photos/36292347/pexels-photo-36292347.jpeg?auto=compress&cs=tinysrgb&w=1000", alt: "Black plate with tuna and white fish sashimi, salmon nigiri and a seaweed hand roll", box: [0.152, 0.276, 0.853, 0.737] }, { name: "Hot roll platter", detail: "30 pieces, fried and fresh", price: 36, src: "https://images.pexels.com/photos/36292343/pexels-photo-36292343.jpeg?auto=compress&cs=tinysrgb&w=1000", alt: "Large black plate of fried rolls with cream, salmon rolls and sashimi under shredded seaweed", box: [0.17, 0.245, 0.828, 0.725] }, { name: "Salmon nigiri", detail: "8 pieces on slate", price: 17, src: "https://images.pexels.com/photos/36292350/pexels-photo-36292350.jpeg?auto=compress&cs=tinysrgb&w=1000", alt: "Row of salmon nigiri on a black slate with a fan of cucumber and ginger", box: [0.148, 0.372, 0.86, 0.6] }, { name: "Uramaki for two", detail: "40 pieces, four rolls", price: 42, src: "https://images.pexels.com/photos/36292344/pexels-photo-36292344.jpeg?auto=compress&cs=tinysrgb&w=1000", alt: "Black plate filled with rows of inside-out rolls, salmon sashimi and crisp potato threads", box: [0.163, 0.29, 0.836, 0.725] }, { name: "Sashimi fans", detail: "12 slices of salmon", price: 19, src: "https://images.pexels.com/photos/36292348/pexels-photo-36292348.jpeg?auto=compress&cs=tinysrgb&w=1000", alt: "Two fans of sliced salmon sashimi with cucumber on a black slate", box: [0.139, 0.328, 0.858, 0.591] }, { name: "Chef's round", detail: "26 pieces, sashimi and rolls", price: 34, src: "https://images.pexels.com/photos/36292345/pexels-photo-36292345.jpeg?auto=compress&cs=tinysrgb&w=1000", alt: "Round black plate of salmon and white fish sashimi with fried and fresh rolls", box: [0.177, 0.278, 0.841, 0.727] }, ]; const CURRENCY = "£"; const BELT_SPEED = 34; // pixels a second, right to left const BELT_SCALE = 0.5; // size of a plate on the belt against the one on the counter const HOLD_MS = 3600; // how long the demo leaves a plate on the counter const LIFT_STIFF = 70; const LIFT_DAMP = 13.5; const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); const N = plates.length; function layoutFor(w: number) { const big = clamp(w * 1.1, 400, 760); const small = big * BELT_SCALE; const beltLine = Math.round(80 + small * 0.49); const counterLine = Math.round(beltLine + 52 + big * 0.49); const wide = w >= 1060; const loop = Math.max(N * small * 0.84, w + small * 1.1); return { w, big, small, beltLine, counterLine, wide, loop, height: counterLine + Math.round(big * 0.07) + (wide ? 40 : 216) }; } export default function SushiConveyorCarousel() { const reduce = !!useReducedMotion(); const stageRef = useRef(null); const beltRef = useRef(null); const plateRefs = useRef<(HTMLDivElement | null)[]>([]); const [lay, setLay] = useState(() => layoutFor(1280)); const [sel, setSel] = useState(0); const [added, setAdded] = useState([]); const live = useRef({ lay, sel: 0, offset: 120, vel: BELT_SPEED, lift: plates.map((_, i) => (i === 0 ? 1 : 0)), liftV: plates.map(() => 0), drag: false, moved: 0, lastX: 0, lastT: 0, touched: false, since: 0 }); live.current.lay = lay; const choose = useCallback((i: number) => { live.current.sel = i; live.current.since = performance.now(); setSel(i); }, []); useEffect(() => { const el = stageRef.current; if (!el) return; const measure = () => setLay(layoutFor(el.clientWidth)); measure(); const ro = new ResizeObserver(measure); ro.observe(el); return () => ro.disconnect(); }, []); useEffect(() => { const s = live.current; let raf = 0; let last = performance.now(); let seen = true; s.since = last + 1700; // the first plate stays out a little longer const io = new IntersectionObserver(([e]) => (seen = e.isIntersecting)); if (stageRef.current) io.observe(stageRef.current); const frame = (now: number) => { raf = requestAnimationFrame(frame); if (!seen || document.hidden) { last = now; return; } const dt = Math.min(0.032, (now - last) / 1000); last = now; const L = s.lay; if (!s.drag && !reduce) { s.vel += (BELT_SPEED - s.vel) * Math.min(1, dt * 1.6); // a flick coasts, then the motor takes over again s.offset += s.vel * dt; } const spacing = L.loop / N; const margin = L.small * 0.62; let best = -1; let bestD = 1e9; for (let i = 0; i < N; i += 1) { const el = plateRefs.current[i]; if (!el) continue; const b = plates[i].box; const target = i === s.sel ? 1 : 0; if (reduce) s.lift[i] = target; else { s.liftV[i] += (-LIFT_STIFF * (s.lift[i] - target) - LIFT_DAMP * s.liftV[i]) * dt; s.lift[i] += s.liftV[i] * dt; } const l = s.lift[i]; const e = clamp(l, 0, 1); const bx = ((((i * spacing - s.offset) % L.loop) + L.loop) % L.loop) - margin; const d = Math.abs(bx - L.w * 0.56); if (i !== s.sel && d < bestD) { bestD = d; best = i; } const sc = BELT_SCALE + (1 - BELT_SCALE) * l; const cx = bx + (L.w / 2 - bx) * e; const cy = L.beltLine + (L.counterLine - L.beltLine) * e - Math.sin(Math.PI * e) * L.big * 0.1; const midX = (b[0] + b[2]) / 2; el.style.transform = `translate3d(${(cx - sc * L.big * midX).toFixed(2)}px, ${(cy - sc * L.big * b[3]).toFixed(2)}px, 0) scale(${sc.toFixed(4)})`; const up = l > 0.03; el.style.mixBlendMode = up ? "normal" : "lighten"; el.style.zIndex = up ? (i === s.sel ? "6" : "5") : "2"; } if (beltRef.current) beltRef.current.style.backgroundPositionX = `${(-s.offset).toFixed(1)}px`; // the demo: swap the plate on the counter for whichever is passing the middle if (!reduce && !s.touched && !s.drag && now - s.since > HOLD_MS && best >= 0 && bestD < spacing * 0.3) choose(best); }; raf = requestAnimationFrame(frame); return () => { cancelAnimationFrame(raf); io.disconnect(); }; }, [choose, reduce]); // drag or flick the belt useEffect(() => { const s = live.current; const move = (e: PointerEvent) => { if (!s.drag) return; const now = performance.now(); const dx = e.clientX - s.lastX; s.moved += Math.abs(dx); s.offset -= dx; s.vel = s.vel * 0.5 + (-dx / Math.max(1, now - s.lastT)) * 1000 * 0.5; s.lastX = e.clientX; s.lastT = now; }; const up = () => { s.drag = false; s.vel = clamp(s.vel, -1400, 1400); }; window.addEventListener("pointermove", move); window.addEventListener("pointerup", up); window.addEventListener("pointercancel", up); return () => { window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); window.removeEventListener("pointercancel", up); }; }, []); const onBeltDown = (e: React.PointerEvent) => { if (e.button !== 0 || reduce) return; const s = live.current; s.drag = true; s.touched = true; s.moved = 0; s.lastX = e.clientX; s.lastT = performance.now(); }; const p = plates[sel]; const isAdded = added.includes(sel); const railTop = lay.beltLine + 5; return (
{/* the belt: a dark band that comes out of the shadow, slats sliding with it */}
); } ```