Supply Chain Simulator

This template is a single-page shipping and logistics simulator built around cause and effect. A live map of the western US and inbound Pacific lanes shows every in-transit load as an animated dot moving along its route, colored green, amber or red by delivery risk. Next to it sits a board of disruption switches: flip "Port of Oakland +5 days" or "Reciprocal tariff" and the affected routes flash, warehouse nodes shift status one by one, and the KPI strip recalculates in front of the audience.

The simulation engine goes beyond visual effects. Trade policy scenarios bind duty at the customs entry date, so a congestion delay can push a load past a tariff's effective window and change what it owes. Physical disruptions decay with distance, tariff front-running produces a booking surge ahead of the deadline, and recovery plays like air expedite and dual-sourcing only apply to loads that haven't sailed yet. The strip tracks four separate signals: on-time delivery, cash due at entry, landed cost and open exceptions.

Everything runs on deterministic demo data for a fictional distributor, Meridian Freight & Fulfillment: 113 loads across in-transit, booked and planned stages, 12 suppliers, 10 ports and 4 warehouses. The data layer is one file, so swapping in your own network, lanes and scenarios propagates through the map, engine and KPIs automatically.

There is no login and no backend setup. The app is a single page designed for demos, workshops and stakeholder conversations, and it renders identically on every load thanks to a fixed data seed.

Features & capabilities

Live geographic network map

Real longitude and latitude projected onto a Pacific-centered map of the western US, with inbound arcs from overseas ports drawn as curved routes.

Animated shipment dots

In-transit loads move along their routes continuously, colored green, amber or red as delivery risk shifts.

Shipment hover cards

Hover any dot for contents, supplier, ETA and the specific risk driver behind its status.

Transit mode filters

Toggle ocean, air, road and rail layers with filter chips to declutter the map.

Pan and zoom

Drag to pan and scroll to zoom with focal-point precision, so you can frame the lane you're talking about.

Disruption scenario switches

Physical rocker switches for port delays, supplier outages, lane closures, blank sailings and demand spikes.

Trade policy scenarios

Section 301 tranches, reciprocal tariffs and de minimis repeal, each with an effective date the engine tests every load against.

Staggered ripple animation

Flipping a scenario flashes affected routes and shifts downstream warehouse nodes to amber or red one by one.

Four-signal KPI strip

On-time delivery, cash due at entry, landed cost and open exceptions, each moving independently as scenarios stack.

Forward order book

Loads tracked across in-transit, booked and planned stages, with duty exposure broken out by what can still be acted on.

Recovery plays

Air expedite and dual-sourcing switches that respect physical state: loads already sailing are reported as stranded, not silently fixed.

Entry-date duty math

Duty attaches at customs entry, including merchandise processing and harbor maintenance fees, so congestion can push a load across a tariff boundary.

Dark and light themes

A dark control-room aesthetic by default with a one-click light mode, both remembered across visits.

Deterministic demo data

Every figure is generated from a fixed seed, so the app renders identically on server and client and every demo run looks the same.

Best use cases

Executive risk briefings

Walk leadership through what a port delay or new tariff tranche actually does to on-time delivery and cash due at entry. The ripple animation makes the causal chain legible to a non-technical room in seconds.

Sales and conference demos

The animated map and scenario board are built to hold attention on a projector. Flip a switch mid-pitch and let the audience watch routes flash and warehouse nodes turn amber one by one.

Tariff and sourcing what-if analysis

Trade policy scenarios model entry-date duty binding, customs fees and front-running surges. Compare doing nothing against air expedite or dual-sourcing, with the engine honoring which loads can still be acted on.

Training and onboarding

Give new ops hires a sandbox where disruptions are safe to trigger. The simulator teaches how port congestion, lane closures and demand spikes propagate through a network without touching real systems.

Getting started

Step 1: Remix this template

Click "Remix" to create your copy. You'll have a working simulator you can explore before adding your own network.

Step 2: Familiarize yourself with the project

Go to User > Settings > Knowledge, and read what's under "Project knowledge" to understand the intended architecture and access control model. You can also ask Lovable in the chat for more details.

Step 3: Customize your brand

Update colors, fonts and the company name. The template ships with a dark control-room look and a light theme, both driven by design tokens you can restyle in minutes.

Step 4: Add your network and scenarios

Replace the demo warehouses, ports, suppliers and shipments with your own network in the data layer. Locations take real longitude and latitude, and the map, engine and KPIs derive automatically. Rewrite the scenario switches to name disruptions relevant to your lanes.

Step 5: Share with your team

Send the link to ops, sales or leadership. There's no login, so anyone can flip scenarios and explore the ripple immediately.

Step 6: Go live

Deploy with one click and share it anywhere. Lovable handles hosting and performance.

Step 7: Iterate and make it yours

Continue building: add scenarios, tune the engine's assumptions, or extend the map with your own routes and modes.