Building the Matrix Demo

When we set out to build a public demo for QualityMax, the brief was simple: let people experience AI-powered test automation instead of just reading about it. No sign-up, no credit card, no sales call. Type a URL, describe what you want tested, and watch a real Playwright test execute in a real browser — all from a single page.

Somewhere along the way the page picked up a Matrix theme, a boot sequence, a red-pill / blue-pill choice mechanic, digital rain, and a terminal-green chat interface. Here's how it came together.

Why a Matrix Theme?

Test automation is powerful but rarely exciting. Most demos are screenshots of dashboards or silent screen recordings of browsers clicking buttons. We wanted something that made people feel the moment the AI takes over — the transition from "I described a test in English" to "a real browser is executing it right now."

The Matrix is the perfect metaphor. You take the red pill, you see how deep the rabbit hole goes. You type a plain-English instruction, and the AI shows you what's really happening on the page — every click, every assertion, every screenshot captured in real time.

The Boot Sequence

The demo page opens with a fake terminal boot sequence. Lines appear one by one — initializing systems, connecting to the AI, loading Playwright — each with a small random delay to feel organic.

QUALITYMAX SYSTEM v3.0.0
========================
[OK] Neural network initialized
[OK] Playwright engine loaded
[OK] Browser pool ready
[OK] AI test generation online
========================
SYSTEM READY. CHOOSE YOUR PATH.

It's pure theater — the actual system initializes in the background while the boot text entertains. But it sets the mood perfectly. By the time the choice appears, the user is already in the world.

Implementation-wise, it's a simple array of strings rendered line-by-line into a <pre> element with setTimeout chains. No framework, no animation library — just vanilla JS and careful timing.

Red Pill / Blue Pill

After the boot sequence, two glowing buttons appear: Red Pill and Blue Pill.

• Red Pill — opens the full chat terminal where you can type any URL and instructions
• Blue Pill — runs a pre-built demo against saucedemo.com so you can see results immediately without thinking of a test

The choice mechanic does double duty: it's a fun interaction that reinforces the theme, and it solves a real UX problem. First-time visitors don't know what to test. The Blue Pill gives them an instant "wow" moment, while the Red Pill is there for people who came with a specific site in mind.

The Chat Terminal

The core of the demo is a chat interface styled as a green-on-black terminal. You type messages, and the AI responds with streaming text — character by character, like a real terminal output.

Under the hood, the chat sends your message to our /api/demo/chat endpoint, which uses Claude to generate a conversational response. The streaming effect is achieved client-side: the full response arrives, and we render it character-by-character with a 15ms interval. Fast enough to feel responsive, slow enough to read.

When you ask the AI to generate a test, the flow changes. The system creates a test case with your URL and instructions, sends it to the backend, and the AI generates real Playwright code. That code is then displayed in a syntax-highlighted block right in the chat.

Live Test Execution

This is the part that makes people say "wait, that's actually running?" Yes. The generated Playwright test executes in a real headless browser on our infrastructure. The page polls for status updates and streams results back to the chat:

1. The Playwright code is sent to our execution service
2. A headless Chromium instance launches in a sandboxed environment
3. The test runs against the target website
4. Screenshots are captured at key moments
5. Video recording captures the entire session
6. Console logs are collected and streamed back
7. Results appear in the chat — pass/fail, screenshots, video player

The whole flow — from typing "test the checkout on saucedemo.com" to seeing a video of the browser completing a purchase — takes about 30-60 seconds. That's real AI test generation, real browser execution, and real artifact collection, all triggered from a chat message.

The Atmosphere

Digital Rain

The background features a canvas-based "digital rain" effect — falling green characters inspired by the Matrix films. The implementation uses requestAnimationFrame with a column-based rendering approach. Each column drops characters at slightly different speeds, creating the cascading effect.

Performance was a concern. The rain canvas runs at a reduced frame rate on mobile and automatically pauses when the tab is not visible (using the Page Visibility API). On very low-end devices, it degrades gracefully to a static gradient background.

Terminal Aesthetic

Every UI element follows the green-on-black terminal theme: monospace fonts, blinking cursors, scanline overlays, and subtle CRT-style glow effects using CSS text-shadow. Even the scrollbars are styled to match.

Audio

The page includes ambient audio — a subtle digital hum that plays when you enter the chat. Getting audio to work on mobile was one of the trickier parts. Mobile browsers require a user gesture before playing audio, so we attach listeners to click, keydown, and touchend events. We also keep the AudioContext alive with persistent touch listeners that call ctx.resume(), since mobile Safari aggressively suspends audio contexts.

Takeaways

Building the Matrix demo taught us a few things worth sharing:

• No framework needed. The entire demo is a single HTML file with vanilla JavaScript. No React, no Vue, no build step. It loads instantly and works everywhere. For a self-contained interactive page, this approach is hard to beat.
• Mobile audio is still painful. Every browser has different rules for when audio can play. Test on real devices early and often.
• Cloudflare Turnstile integration matters. We protect the demo endpoints with Turnstile to prevent abuse. Key lesson: Turnstile tokens are single-use — you can't reuse them across multiple API calls. Verify once at the entry point, then rate-limit the rest.
• Specific selectors beat generic instructions. When the AI generates test code from vague instructions, it produces vague selectors. For the pre-built saucedemo checkout, we pass exact data-test attribute selectors in the instructions. The result is rock-solid test code every time.
• Theater matters. The boot sequence, the pill choice, the digital rain — none of it is functionally necessary. But it transforms the experience from "here's a tool" to "here's a world." Users stay longer, explore more, and remember the product.

If you haven't tried the demo yet, take the red pill.