mirageweb.ai (opens in a new tab)
The studio site itself. Terminal / editorial direction — monospace chrome, warm ink palette, live composition, Gantt-rendered process.
§01 · Brief
Design and build the studio's own marketing site — in public, as a capability exemplar.
The page had to be the artifact: institutional voice, editorial density, visible craft. No stock aesthetic, no agency-template reuse. Each section earns its space — live-composition hero, scroll-revealed manifesto, Gantt-visualised process, dossier-grade case studies. Ships as a single long-form scroll with practice pages branching beneath.
§02 · Shipped
Live-composition hero
Typewriter that edits itself in front of the reader — states the studio's premise by writing it. Blinking caret, character jitter, reduced-motion fallback.
Availability timeline
A live 6-month booking grid. Each cell is a direct link to contact, colour-coded for booked / half / open / hold. Replaces the vague 'currently booking' line.
Gantt-rendered process
The studio's six-week build-out drawn as a project plan, not a diagram. Dashed weekly guides, hover-dims bars and their descriptions in sync.
Practice pages
Two long-form practice pages (/web-design-singapore, /ai-automation) with sticky section nav, magnetic featured-work rows, accordion FAQ, full JSON-LD schema.
Coordinate HUD cursor
Custom cursor shipped site-wide on hover-capable devices — 4px dot with a live mono coord label that flips to a verb pill over every interactive element.
Dossier case studies
Every /work/[slug] renders as a filing-card — status stamp, meta table, cover plate, gantt, attestation, outcome receipt, cross-reference.
§03 · Timeline · 6 weeks
| PHASE | W1 | W2 | W3 | W4 | W5 | W6 |
|---|---|---|---|---|---|---|
| Scope | ||||||
| Build · sections | ||||||
| Motion + mobile | ||||||
| Lighthouse + ship |
One call, one document
Studio voice pinned, section list fixed, no approval rounds. Kickoff on day one of the week.
Shipped weekly, demoed staging
Hero / philosophy / capabilities / work / process / contact. Each section demo-ed on a live URL as it closed.
Layered, reduced-motion gated
Hero word-reveal, sticky section nav, magnetic rows, FAQ accordion — every motion behind prefers-reduced-motion.
Full responsive pass
Nav collapse, Gantt mobile-split, Contact envelope card, Capabilities retype — desktop ≥1200px pixel-identical.
Lighthouse, handover, monitor
Perf + a11y pushed to 96+ / 100 / 100; deployed to Vercel; week-one monitoring in place.
Open retainer
Practice pages and case-study dossiers now extend monthly. Each new project adds a file, not a page.
§05 · Outcome
§06 · Forward
The site is a living brochure — practice pages, demos, and case studies are added without re-platforming.
Content modeled as typed data (CaseStudy, Project, FAQ) means every new project is a pull request, not a design pass. Next: ship two commissioned builds, add AI-practice demos (RAG, agents, eval harness), re-record the philosophy typewriter with client copy.