Assembly

A factory-operations interface with a wireframe production line, machine-health dials, maintenance planning and animated energy flows.

• Best forDevelopers building manufacturing, machine-monitoring and maintenance interfaces.

• Line

  Select a fictional production line and shift, inspect OEE and output charts, filter events and open a machine from the wireframe model.

• Machines

  Filter machine cards, select a station and review simulated OEE rings, vibration, temperature and uptime information.

• Maintenance

  Scrub a fictional failure timeline, schedule a local work order, move jobs between stages and reorder demonstration spare parts.

• Energy

  Trace animated Sankey energy flows, inspect machine consumption, switch kW or cost views and toggle chart series.

• Wireframe production line

  A single canvas draws six stations with an orthographic projection, indexing conveyor, welding sparks, inspection beam and sensor pings.

• Connected interface state

  Line, shift and selected-machine controls update the relevant views; selecting a station opens its machine detail.

• Machine exploration

  OEE rings, warning thresholds, sensor sparklines and uptime bars demonstrate machine-health presentation.

• Maintenance workflow

  Scrub a simulated failure timeline, schedule work orders into a planned stop and change their local workflow stage.

• Energy breakdown

  Animated Sankey flows, a peak-demand gauge and consumption series provide a separate energy workspace.

• Replaceable simulated feed

  Data lives in lib/data.ts and a local live-feed timer. Supply production telemetry, history and maintenance services separately.

Responsive layouts, keyboard-accessible navigation and reduced-motion support.

Machines, sensor readings, failure predictions and energy costs are simulated in the browser. Work orders and reorders change local UI state; no PLC, SCADA, MQTT, historian, CMMS or energy-meter connection is included.

• IncludedFictional demonstration data and local interactions, ready to edit. The included README identifies the data files and model.
• Not includedBackend, database, authentication, payments or AI services. Features that look connected are simulated; connect your own services when you adapt the code.

• Complete Next.js project
• 4 animated views
• Source files and project assets
• README with setup and customization
• LICENSE.md

Stack and requirements

• StackNext.js 16, React 19, TypeScript, Tailwind CSS v4, Framer Motion, Lucide
• FontsHanken Grotesk, Geist Mono
• RequiresNode.js 20.9 or later, npm, and working knowledge of React and Next.js

Run it locally

Extract the ZIP, open a terminal in the project folder, then run:

npm install
npm run dev

Open localhost:3000. The README covers the data, colors, fonts and animations.

• Price$9 USD, one-time payment. No subscription or renewal.
• TaxesApplicable VAT and sales tax are included in the price. The total is shown before you pay.
• LicenseUnlimited personal and client projects. No resale or redistribution of the source. Read the license
• DeliveryAfter payment, Polar emails your receipt and a download link for the ZIP.
• RefundsIf the files don’t install or run as described and can’t be fixed within 7 days, you get a full refund. Refund policy
• Supporthello@buildindex.dev for the template as delivered.

Secure checkout by Polar. More answers in the questions.