Helelai
What’s next
All work

01 Product site · WebGL + interactive demos

Helelai CRM

Six hand-written GLSL shaders and a page that performs the product — the AI answers WhatsApp and takes a call on screen while you watch.

Anchor project WebGLAIProduct SiteVanilla JS
View live site All the work
Role
Art direction, code, copy and infrastructure — all in-house
Helelai CRM home page: the headline “It replies. It answers. You close.” beside an interactive radar shader, above a line describing the AI working WhatsApp and the phone line.

AThe problem

Helelai CRM — an AI that answers the business’s WhatsApp, takes calls with a voice agent and shows the whole operation on a live panel — needed a site that communicated “the AI answers, you supervise and close” by demonstrating the product on screen instead of describing it. Early drafts built from static sections read as generic. And mid-project, the previous hosting provider froze deployments on plan limits, which meant migrating the infrastructure without taking the site offline.

BWhat we built

A one-page site written entirely by hand — vanilla HTML, CSS and JavaScript, no runtime framework — on the same Monochrome & Signal token system this portfolio runs on, which is the point of a token system: the identity transfers as code. Every section demonstrates the product over an original GLSL background, the copy came out of multi-agent orchestration, and no visual iteration shipped without automated Playwright captures verifying it first.

CSignature pieces

The parts worth looking at.

  1. 01

    Six shaders, zero libraries

    Each dark section sits on its own hand-written GLSL background — an instrument radar that tracks the mouse, inbound streams converging on a phone, interfering wavefronts, a constellation of operations, a topographic survey and a starfield — running on a purpose-built engine: shaders compile lazily as their section approaches the viewport, each canvas gets a pixel budget so 2x and 4K screens render at bounded fill-rate, everything pauses offscreen, reduced-motion gets a static frame, and a CSS fallback catches compilation failure.

  2. 02

    The product demos itself

    Instead of screenshots, the page performs: a WhatsApp phone where the AI types, replies and drops voice notes through three scripted rotating conversations; a call that answers itself with a live waveform, a progressive transcript and an end-of-call summary; and an operations feed streaming in with animated counters.

  3. 03

    A working CRM demo at /app

    A functional client-side slice of the real product — contact kanban and pipeline with drag and drop, persisted locally — so a prospect touches the thing instead of reading about it.

  4. 04

    A deploy freeze, resolved the same day

    When the previous host blocked deployments on plan limits, the site moved to Cloudflare Pages the same day: apex and www with automatic SSL, per-file cache rules, and DNS surgery that preserved mail — MX, SPF, DKIM — and every subdomain already in production.

  5. 05

    Copy by jury, pixels by Playwright

    The copy was produced by multi-agent orchestration — creative directions in parallel, a judge panel with distinct criteria, a final synthesis — and every visual pass shipped only after headless Playwright captured each section, checked for GLSL and JS runtime errors, diffed frames to confirm motion, and validated the reduced-motion mode.

DDelivered

  • The landing at helelai.com: hero, WhatsApp demo, voice-call demo, live panel, use cases, features and close
  • Six original GLSL shaders on a purpose-built WebGL engine
  • Three DOM-animated product demos and a seamless operations ticker in Geist Mono
  • A functional CRM demo at /app: contact kanban and pipeline with drag and drop, client-side persistence
  • Cloudflare Pages migration: apex + www, automatic SSL, per-file cache rules, mail-preserving DNS
  • Load discipline: one ~110 KB HTML document (~25 KB on the wire), font preloads, a favicon cut from 152 KB to 9.3 KB, timers paused on hidden tabs

EOutcome

In production at helelai.com and verified live: HTTP 200, correct MIME types, zero console errors and zero GLSL compilation errors. About 130 KB over the network on a first visit and ~25 KB on repeat visits thanks to immutable font caching. The hosting migration resolved the deploy freeze the same day and left publishing unlimited at no platform cost.

FStack

  • HTML/CSS/JS (vanilla)
  • WebGL1 / GLSL
  • IntersectionObserver
  • Python (static generator)
  • Playwright (visual QA)
  • Cloudflare Pages
  • Cloudflare DNS
  • Wrangler CLI
  • Geist / Geist Mono (self-hosted)
  • Git
Back to the work What happens next