Intelligence Router: why one AI router beats one expensive model, visualised in Three.js

Sending every task to your most expensive AI model is the easiest way to burn a budget. The Intelligence Router is a premium Three.js WebGL scene from AETumi that makes the alternative visible. A stream of work flows into a crystal router, splits into four lanes by difficulty, and each lane shows what it costs per day. In the example, the same 100 daily tasks cost $66 routed instead of $500 sent to the top model, which saves 87%.

It is built as a one-screen "explainer you can touch". The scene is WebGL. The rules, cost bars, a 90-minute build timeline and business cards around it are live, readable HTML. This guide breaks down how the scene is engineered: the stage-to-3D mapping, the crystal, the lane tubes and the orbit control. It also explains why the finished premium 3D web template is the fastest way for AI startups, agencies and educators built on AETumi to explain AI model routing.

What is an intelligence router?

An intelligence router, or model router, is the layer that decides which model or workflow handles each task. Cheap, fast models get routine work. Parallel sub-agents take broad searches. Long-context sessions handle big documents. Only hard judgment calls reach the most capable (and most expensive) tier, and a final step verifies every output before it ships. The template turns these five rules into a scene. It has one input stream, one router and four lanes: 3D Web·Three.js (routine), 3D·Section (broad search), WebGL (long context) and AETumi·MAX (hard judgment). Each lane has its own daily task count and price.

Why routing is easier to sell when people can see it

"We route tasks across models" is an abstract sentence. A crystal that splits light into four priced lanes is something a buyer remembers after the call. Visualising the router does three jobs at once. It explains the product in seconds. It makes the cost argument impossible to miss. It signals that the team behind it builds with craft. That makes the scene a strong hero for AI agencies, LLM-ops tools, AI courses and investor decks.

What you'll learn

• How to map a 1920 × 1080 design "stage" onto a perspective 3D camera, pixel for pixel.
• How the crystal router is drawn: a real tilted octahedron with layered additive glows.
• How each lane is built from crossed ribbon strips with a dashed line flowing inside a fragment shader.
• How to give a whole scene a 360° orbit with momentum, parallax and an idle sway, while the dashboard stays still.
• How the rules, costs, timeline and business cards are driven from one JSON file.

Map a design stage onto a 3D camera, pixel for pixel

Designers lay out a hero in pixels. The trick that keeps this scene pixel-perfect is to place the perspective camera at exactly the distance where the z = 0 plane maps 1 : 1 onto the 1920 × 1080 stage. Every element can then be positioned in design pixels. Depth only becomes visible when the visitor rotates the scene.

// stage-gl.js: stage pixels ↔ world units
export function createStageSpace({ width = 1920, height = 1080, fov = 30 } = {}) {
  const D = (height / 2) / Math.tan(THREE.MathUtils.degToRad(fov / 2)); // camera distance
  const toWorld = (sx, sy, z, out) => {
    const k = (D - z) / D;                  // keeps the front view on the same pixel at any depth
    out.x = (sx - width / 2) * k;
    out.y = (height / 2 - sy) * k;
    out.z = z;
    return out;
  };
  return { W: width, H: height, fov, D, toWorld };
}

Why it matters: the HTML labels that follow the orbs and the WebGL objects share one coordinate system. That makes hover tests, text placement and responsive scaling straightforward, and the front view matches the design file exactly.

Draw the router as a real 3D crystal

The router is a wireframe octahedron with its equator tilted 14°. It turns once every 18 seconds and has glowing vertex points. Four camera-facing glow quads sit behind it: a violet haze, a forward beam, a warm halo and a bright core. Hovering the crystal brightens every layer and spins it faster.

// router-crystal.js: four equator points, tilted 14°, rebuilt every frame
const turn = t * (2 * Math.PI / 18) + extra;          // one turn per 18 s, faster on hover
for (let k = 0; k < 4; k++) {
  const a = turn + k * Math.PI / 2, ex = 70 * Math.cos(a), ez = 70 * Math.sin(a);
  ring.push([cx + ex, cy + 2 - ez * 0.2426, ez * 0.97]); // tan(14°) = 0.2426, cos(14°) = 0.97
}
for (let k = 0; k < 4; k++) E.push(up, ring[k], down, ring[k], ring[k], ring[(k + 1) % 4]);
frameMat.opacity = 0.62 + 0.3 * hover;
halo.material.uniforms.uMul.value = 1 + 0.9 * hover;

Why it matters: a real 3D shape reads correctly from every angle when the scene orbits, which a flat sprite cannot do. Additive blending makes the glow layers add up to light, not muddy grey.

Build lanes that still have volume from the side

Each lane runs from the router to its model orb along a cubic Bézier. A single flat ribbon disappears when you look at it edge-on, so every lane is two crossed ribbon strips. A fragment shader gives them a soft body, a bright core and a dashed centre line that flows toward the model. Particle traffic rides along the tube, and the cursor pushes it aside. The lane end drifts on a three-harmonic Fourier path, so the scene is never static.

// lane.js: the dashed "data flow" line lives in the ribbon shader
float v    = vD / vHW;                                   // position across the ribbon, -1..1
float body = 1.0 - smoothstep(0.62, 1.0, abs(v));        // soft edges
float core = exp(-v * v * 5.0);                          // bright centre
float a    = uA * uGlow * (0.8 * body + 0.18 * core);
float line = 1.0 - smoothstep(0.55, 1.45, abs(vD));
float dash = step(0.52, fract(vU * uLen / 15.0 - uTime * 1.05));   // moving dashes
a += 0.5 * line * dash * smoothstep(0.03, 0.14, vU);

Why it matters: all the motion (dashes, glow and pulse) is computed on the GPU from a time uniform, so four lanes cost almost nothing per frame. Hovering an orb, or the rule card that belongs to it, lights that lane and dims the others. The 3D and the HTML stay in one conversation.

A 360° orbit with momentum, parallax and idle sway

// stage-orbit.js: drag anywhere on the stage
rot.vy = dx * 0.0035;  rot.vp = dy * 0.0026;
rot.yaw  += rot.vy;                                  // yaw: free 360°
rot.pitch = clamp(rot.pitch + rot.vp, 1.1);          // pitch: ±1.1 rad
// after release: momentum decays; after 4 s idle: gentle automatic sway (if enabled)

Why it matters: a clamped pitch keeps the scene from flipping upside down and disorienting people, while a free yaw gives the satisfying "full spin" everyone tries first.

The whole story is data

The five router rules, the four lanes (name, task count, price, colour), the cost comparison, the 3D·Section stats, the six-step "build it in 90 minutes" timeline and the three business cards all live in router.json. A 48-second loop drives the scene and maps onto a 90-minute build clock. Eight themes and per-lane colour pickers sit in the ⚙ panel. Switching to Cyber Neon, for example, repaints the scene and the dashboard together.

// data/router.json (excerpt)
"lanes": [ { "id": "max", "name": "AETumi·MAX", "meta": "hard judgment · 5 tasks / day", "cost": "$25 / day",
             "note": "LOW → MED → HIGH → MAX effort", "particles": 32, "ring": true, "depth": 260 }, … ],
"rules": [ { "title": "routine →", "detail": "3D Web Three.js", "note": "$0.10 / task", "lane": 3 }, … ],
"cost":  { "max": 500, "saving": 87, "formula": "60 routine + 25 search + 10 long + 5 hard = 100 tasks",
           "rows": [ { "label": "ROUTER · 4 lanes", "value": 66 }, { "label": "ALL → AETumi MAX", "value": 500 } ] },
"timeline":   { "cycleSeconds": 48, "buildMinutes": 90, "steps": [ { "time": "0:00", "title": "Pick one expensive cognitive task" }, … ] },
"businesses": { "items": [ { "name": "VC RESEARCH", "price": "$3,000 / mo per fund", "clients": 36, "revenue": 108000 }, … ] }

Why it matters: an agency can turn the same scene into a customer-support router, a logistics dispatcher or a pricing explainer for its own AI product in an afternoon, without touching the WebGL code. The package includes a full re-skin example to prove it.

Production trade-offs: performance, accessibility, mobile, SEO

Performance: one renderer, one render loop, additive particles with size and halo computed in the vertex shader, and nothing rebuilt per frame except positions. Accessibility: every number and rule is real HTML, the controls are native elements, and reduced motion freezes on a representative frame. Mobile: the 1920 × 1080 stage scales to fit, and below phone width the dashboard stacks under the scene. SEO: search engines read the headline, rules, prices and business copy, while the WebGL canvas makes the page memorable. The scene is the hook; the HTML is what ranks.

Decision matrix: how to explain AI routing on your site

What ships in the template package

• 1 · Source data template: router.json, a blank template, a JSON Schema and a field guide, plus a complete re-skin example for a different industry.
• 2 · Full build prompt: one brief that rebuilds the whole scene from an empty folder with Claude Code, Cursor or Codex.
• 3 · Components: stand-alone modules with prompts and demos. These include router-crystal, lane, particle-stream, orb-swarm, stage-gl, stage-orbit, lane-focus, lane-labels, rule-list, cost-bars, build-timeline, build-clock, business-cards and scene-controls.
• 4 · Usage: a five-minute manual guide and a master prompt for rebranding, new data, deployment and self-checks.

Fonts are the free Jost and Onest (SIL OFL), and Three.js is bundled locally. There are no external requests and no tracking.

How AETumi builds premium 3D web templates

AETumi templates are built on a simple promise. The 3D explains something. The text stays readable and indexable. The data lives outside the code. The scene has one owner, one loop and a way to pause. The Intelligence Router applies that to AI economics. Its sister template, Aurum Singularity, applies it to a multi-agent intelligence desk with a real 5D hypercube. Explore both in the AETumi Three.js library, and read Three.js scene architecture for production websites for the engineering rules behind them.

FAQ

What is an AI model router? It is the layer that sends each task to the cheapest model or workflow that can do it well. Routine work goes to fast models, broad searches to parallel sub-agents, long documents to long-context sessions, and only hard judgment calls go to the top model. A final step verifies every output.

Are the $66 vs $500 and $3.85M figures real? They are an illustrative example built into the demo, not a guarantee or financial advice. The scene exists to explain the routing logic. All prices, task counts and business figures are editable in the JSON.

Is the Intelligence Router 100% WebGL? The 3D scene is Three.js on WebGL: the particle stream, crystal router, lanes, orbs and swarm. The rules, costs, timeline, labels and business cards are HTML (with a small Canvas 2D grid), so they stay sharp, accessible and crawlable.

Can I rename the lanes to my own models? Yes. Lane names, colours, task counts, prices, rules and the whole story live in one JSON file. The ⚙ panel also lets visitors change the theme and each lane's colour.

Does it need React or a build step? No. It is plain HTML, CSS and ES modules with Three.js r143 bundled locally, and it runs on any static host.

Conclusion & next step

The Intelligence Router turns a spreadsheet argument ($66 instead of $500 a day) into a scene people can spin, hover and remember. It is built on a pixel-exact stage-to-3D mapping, a real crystal, GPU-animated lanes and a data-driven story. If you sell, teach or fund AI products, it is the fastest way to show why routing matters.

Open the live demo → Get the AETumi library →

← All guides · See the Three.js library · WebGL guides