During the recent engineering sprint for SignBuilder 2.0 on architecturalnumbers.com, we encountered a classic 3D e-commerce UX challenge: translating physical, real-world architectural metal specifications into an intuitive, real-time in-browser experience. Custom cast metal house numbers and architectural lettering range from 4 inches to 18 inches in height, with physical casting depths scaling from 3/8-inch up to 1-1/2 inches. To give customers absolute confidence before placing multi-hundred-dollar custom orders, we replaced static 2D preview diagrams with a dynamic 3D isometric dimensional profile featuring real-time architectural CAD ruler measurement graphics and true-font vector glyph extrusion. To push the boundaries of modern AI-assisted engineering, I paired with Space Bunny Alpha (stealth/space-bunny-alpha)—the anonymous 1M-context model newly available on OpenRouter—to tackle the WebGL projection math, shader pipelines, and container box-model refactoring.

The Production Challenge: Modernizing SignBuilder for Cast Metal

Architectural Numbers manufactures solid cast aluminum and bronze numbers, letters, and plaques. For over a decade, online customizers relied on static 2D tables or outdated preview scripts that failed to reflect the tactile reality of deep metal casting. A common customer hesitation stemmed from depth perception: when a client selects a 12-inch numeral with a 1-1/4-inch solid return, how thick does that physical letter actually look from an architectural viewing angle?

In the initial release of SignBuilder 2.0, Column 3 under (2) Select Size featured a static 2D vector SVG illustrating a generic numeral with fixed "H" and "D" indicators. While it served as a placeholder, it was fundamentally disconnected from user state: it did not adjust when the customer switched from a 6-inch to a 12-inch numeral, it ignored physical depth changes across font families, and it could not showcase custom finishes like Satin Brass or Polished Chrome.

Our objective was straightforward yet technically demanding:

• Dynamic 3D Orthographic CAD Projection: Replace the static graphic with an axonometric Three.js orthographic viewport rendering the active TrueType font glyph with authentic bevels and material shaders.
• Architectural CAD Ruler Measurement Graphics: Project the 3D bounding box corners into 2D screen space to render live drafting ruler lines—including dashed leader extensions with drafting overshoot, solid dimension lines, sharp arrowheads, quarter-interval tick graduations, and dynamic dimension badges (D 1-1/4" and H 12").
• Container Height Expansion: Double the height of the size selection pill container from roughly 100px to 220px, eliminating excessive scrolling in Column 3.

Enter Space Bunny: Testing OpenRouter's 1M-Context Stealth Model

In late September 2026, OpenRouter introduced an anonymous model titled Space Bunny Alpha (identifier: stealth/space-bunny-alpha). Promoted as an experimental preview, the model quickly caught attention across developer circles due to its extraordinary technical specifications:

• 1,000,000 Token Context Window: Massive context capacity capable of ingesting entire multi-file frontend codebases, legacy database schemas, and documentation simultaneously.
• Up to 524,288 Completion Tokens: Unprecedented output token limits, eliminating truncate-and-continue loops during large refactors.
• High-Throughput Reasoning Engine: Highly responsive inference latency paired with configurable reasoning effort levels, with community consensus linking its architecture to advanced non-autoregressive and hybrid reasoning families like MiniMax M3.1.

Rather than evaluating Space Bunny on synthetic coding puzzles, I loaded the complete SignBuilder 2.0 client architecture into the context window: our Three.js r128 rendering pipeline, OpenType.js glyph parser, CSS flexbox stylesheets, and the legacy MySQL schema mapping styles, stylePrice, and finishes.

My goal was to observe how effectively an ultra-high-context stealth model handles spatial trigonometry, matrix transformations, and DOM synchronization when guided by an experienced systems engineer.

Mathematical Architecture: Dynamic Orthographic CAD Rulers

The core technical requirement was ensuring that the dimensional profile rendered in Column 3 matched the company's brand logo (images/logo_iso_5.png), which depicts an architectural numeral '5' viewed in pure isometric perspective with drafting calipers.

1. Axonometric Orthographic Camera Setup

A common error in 3D WebGL configurators is utilizing a perspective camera for technical diagrams. Perspective projection introduces foreshortening, meaning the rear face of the extruded glyph appears smaller than the front face, distorting perceived thickness. We configured a THREE.OrthographicCamera with a fixed frustum size to achieve pure axonometric projection:

// Orthographic projection eliminates vanishing perspective distortion
const aspect = stageWidth / stageHeight;
const frustumSize = 4.2;
const camera = new THREE.OrthographicCamera(
    (frustumSize * aspect) / -2,
    (frustumSize * aspect) / 2,
    frustumSize / 2,
    frustumSize / -2,
    0.1,
    100
);
// Standard CAD axonometric viewing angle looking toward origin
camera.position.set(6, 4.5, 6);
camera.lookAt(0, 0, 0);

2. Proportional Physical Extrusion Scaling

In physical foundry casting, depth is not arbitrary; it is governed by rigid mold specifications stored in cast_metal_specifications. To guarantee that a 4-inch letter with a 3/8-inch depth appears noticeably slimmer than a 15-inch letter with a 1-1/2-inch depth, we derived a proportional extrusion ratio:

// Extrusion depth derived from database specifications
const depthRatio = Math.max(0.05, depthInches / sizeInches);
const extrudeDepth = targetHeight * depthRatio;

const extrudeSettings = {
    depth: extrudeDepth,
    bevelEnabled: true,
    bevelSegments: 3,
    steps: 1,
    bevelSize: Math.min(0.04, extrudeDepth * 0.15),
    bevelThickness: Math.min(0.04, extrudeDepth * 0.15)
};

3. 3D-to-2D Screen Coordinate Projection & Vector Normal Derivation

The most impressive demonstration of Space Bunny's reasoning emerged during the implementation of updateRulerGraphics(). To render crisp drafting lines over the WebGL canvas, we layered an SVG viewport (#size-diagram-ruler-svg) directly above the canvas. Space Bunny accurately calculated the matrix transformation to project 3D world-space vertices into normalized device coordinates (NDC) and convert them to screen pixels:

function toScreenCoords(worldVec, camera, width, height) {
    const projected = worldVec.clone().project(camera);
    return {
        x: ((projected.x + 1) * width) / 2,
        y: ((-projected.y + 1) * height) / 2
    };
}

To draw leader extension lines that separate cleanly from the glyph without clipping, the model derived the 2D extrusion direction vector and its perpendicular normal unit vector:

// 2D extrusion vector between front-top and back-top vertices
const dx = pBack.x - pFront.x;
const dy = pBack.y - pFront.y;
const len = Math.hypot(dx, dy) || 1;

// Perpendicular unit normal vector for drafting leader lines
const nx = -dy / len;
const ny = dx / len;
const offsetDist = 18; // Drafting leader standoff in pixels

This mathematical formulation allowed us to generate dashed leader lines with authentic drafting overshoot, solid dimension bars with triangular arrowheads, quarter-interval tick graduations (at 25%, 50%, and 75% of letter height), and dynamic dimension badges that update synchronously as the customer explores sizing options.

Where Autonomous AI Models Meet Real-World Production Friction

While Space Bunny demonstrated exceptional agility with geometric algorithms and Three.js shader scaffolding, pairing with an AI model on a live production e-commerce property reveals critical boundaries where autonomous models fail without senior human guidance.

1. The Reality of HostGator Apache Caching

During our initial deployment of the size container height doubling, Space Bunny updated the CSS rule .size-list-container { min-height: 220px; }. In local testing, the container expanded as expected. However, when deployed to HostGator's shared Linux production environment, live visitors continued seeing the narrow 100px container.

The AI model assumed the deployment had succeeded because the file was updated on disk. It failed to account for aggressive downstream browser caching and upstream Apache caching headers. Resolving this required manual engineering intervention: injecting a versioned cache-buster query string into public_html/signbuilder2/index.php:

<link rel="stylesheet" href="/css/signbuilder2/signbuilder2.css?v=20261001_size2x">

Immediately upon cache-busting the stylesheet link, live browsers ingested the updated box-model rules.

2. Legacy Session Hydration vs. Naive Polling

Another subtle challenge arose with cart drawer synchronization. When customers added a custom sign from SignBuilder 2.0 to their order, the cart drawer populated correctly, but the header navigation badge (#nav-cart-badge) occasionally failed to update until a full page reload.

Space Bunny initially suggested an autonomous client-side setInterval polling loop against /api/signbuilder2/quote.php. In enterprise production, client-side polling loops are an anti-pattern: they inflate server request volume, exhaust Apache connection pools, and drain mobile battery life. Instead, we re-architected the session pre-population logic in PHP, dispatching a native CustomEvent (an:cart-updated) across the DOM window to achieve instant, zero-latency reactive synchronization without extra network overhead.

Container Height Expansion & Box-Model Metrics

In addition to the 3D isometric ruler engine, customer feedback indicated that Column 3's size selection pill list was overly constrained. The outer card had an inflexible height of 450px, leaving only ~108px for the size list after accounting for titles and the 3D diagram box. Customers had to scroll through a narrow window showing only three pills at a time.

We restructured the CSS flex hierarchy, increasing the outer card height to 560px and enforcing a min-height: 220px on the pill container:

Automated Verification & Live Production Sign-Off

To verify that our changes introduced zero regressions across the e-commerce funnel, we authored and executed automated Playwright end-to-end test suites (tests/signbuilder2-checkout.spec.js) against live production:

• DOM Geometry Verification: Playwright asserted that #size-list-container measured exactly 220px, confirming that the CSS cache-buster took effect globally.
• WebGL Shader & Canvas Health: Verified that the WebGL context initialized cleanly with zero shader compilation errors, correctly projecting the TrueType glyph into the orthographic camera frame.
• Live End-to-End Checkout: Placed live test transactions (Orders #31334 and #31335) through orderDone.php, confirming that custom sign configurations, 1:1 scale vector PDF drilling templates, and stud-mounting accessory parameters passed cleanly to fulfillment.

Developer Takeaways: Pairing with Frontier Stealth Models

Testing Space Bunny Alpha on OpenRouter for a complex 3D WebGL and e-commerce engineering milestone highlights several lessons for modern software practitioners:

"Frontier AI models are no longer limited to simple text completion or CRUD scaffolding. When supplied with full architectural context, high-context models like Space Bunny function as formidable mathematical and geometric calculators—capable of deriving 3D projection matrices, vector normals, and complex SVG drafting coordinates in seconds."

However, AI capability cannot replace systems engineering fundamentals. An AI model does not experience the friction of stale browser caches, flaky mobile touch handlers, or legacy session race conditions. The highest engineering leverage is achieved when the developer operates as an active architect and quality gatekeeper: defining exact mathematical constraints, validating DOM box models, and verifying production deployments through deterministic automated test suites.

SignBuilder 2.0 is live in production today on architecturalnumbers.com. Watch the complete video breakdown above for a direct look at the live 3D configurator and developer workflow in action.