Deterministic Model-Routing Loom

Design and implement Threadline, a responsive model-routing simulator for an AI platform engineer. This is an illustrative local scenario with fictional models and values; it must not call an AI provider, claim benchmark accuracy, or imply compatibility with a real model. The operator's job is to change a routing goal, watch request types reweave through constraints, and inspect the chosen route's latency, cost, and context tradeoff.

Do not build a SaaS hero with an animated mesh behind it. Make the model-routing loom itself the product surface: a deterministic Canvas warp, semantic request lanes for Chat, Extract, and Plan, fictional model heddles Atlas Small, Atlas Reason, and Atlas Long, routing-goal controls, one selected-route ledger, and a complete text table equivalent. The loom must stop in a readable final state rather than running ambiently.

Use this exact content: THREADLINE; Route by constraint, not by glow.; Illustrative routing scenario · fictional models; Balanced; Lower latency; Lower scenario cost; Route for lower latency; Chat; Extract; Plan; Atlas Small; Atlas Reason; Atlas Long; Selected route; Atlas Small; 420 ms scenario latency; $0.004 scenario cost per request; 32k fictional context; Tradeoff; Shorter fictional context than Atlas Long; No provider connected; Replay route. Do not add real model names, quality scores, accuracy, customer traffic, uptime, token claims, savings, production readiness, or a recommendation presented as universal.

Use loom black #141816, flax #eee7d2, indigo #315a78, carmine #c9574c, brass #d2a640, moss #5f7a61, and chalk #faf7ee. Pair a compact industrial display with a neutral sans and mono route notation. Use warp columns, heddle labels, thread order, knots, and one restrained shuttle marker only where they encode request routing. Avoid gradients, generic mesh deformation, glowing AI nodes, fake terminal windows, side navigation, emoji, SVG/CSS textile illustration, and decorative particles.

Route for lower latency is the deterministic five-second action. During 0–1.0 seconds Lower latency locks as the routing goal and the three request lanes queue. During 1.0–2.6 seconds the fixed Chat, Extract, and Plan threads reweave through the fictional model heddles. During 2.6–3.8 seconds the Chat route settles on Atlas Small while the other routes remain visible as alternatives. During 3.8–5.0 seconds 420 ms scenario latency, $0.004 scenario cost per request, 32k fictional context, and the shorter-context tradeoff lock into the route ledger. The same seed, geometry, and timings must replay.

Support balanced, lower-latency-selected, lower-cost-selected, weaving, route-selected, tradeoff-ready, no-route, stale-scenario, loading, error, visible-focus, reduced-motion, Canvas-fallback, and table-only states. Goal controls must be semantic; every Canvas thread must have a row in the route table. Announce route selection and ledger readiness only. Put one data-preview-ready marker on the settled loom and exactly one data-preview-action marker on Route for lower latency.

At 960×600, preserve the full loom, three request lanes, fictional model heddles, goal controls, route table, and tradeoff ledger inside the first 16:10 frame. Below 740px, order goal controls, text route table, selected tradeoff, then a simplified Canvas loom; never hide meaning inside motion or require horizontal scrolling. Under prefers-reduced-motion or Save-Data, show the final Atlas Small route and complete ledger immediately with no moving shuttle.

Return one complete standalone responsive HTML document with internal CSS and JavaScript. Use no framework, external runtime, AI API, network request, real model metadata, stock image, placeholder, handmade SVG/CSS illustration, emoji, random motion, lorem ipsum, or prose outside the product. Include one quiet source-prompt link and label every model and value fictional or scenario-based.