Smart Conveyor Belt

Live Demos Hub
GitHub ↗

Smart Conveyor Belt

Interactive Shadcn-quality hypermedia component for Hyperstack.

Interactive Preview

Production Line HMI

Main Packaging Line 02

1450 RPM

HTML Source

<!-- Smart Industrial Conveyor Belt HMI -->
<div class="smart-conveyor-belt p-5 rounded-3xl bg-slate-900 border border-slate-800 shadow-xl space-y-3">
  <div class="flex items-center justify-between pb-2 border-b border-slate-800/80">
    <div>
      <span class="text-[10px] font-black uppercase tracking-widest text-indigo-400">Production Line HMI</span>
      <h3 class="text-xs font-bold text-white">Main Packaging Line 02</h3>
    </div>
    <span class="text-[10px] font-extrabold px-2 py-0.5 rounded-full border bg-emerald-500/10 text-emerald-400 border-emerald-500/20">1450 RPM</span>
  </div>
  <div class="flex items-center gap-3">
    <button class="flex-1 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs active:scale-95 transition-all" hx-action="$appz.haptic('success')">Start VFD</button>
    <button class="flex-1 py-2 rounded-xl bg-rose-600 hover:bg-rose-500 text-white font-bold text-xs active:scale-95 transition-all" hx-action="$appz.haptic('error')">Emergency Stop</button>
  </div>
</div>