Crepusculum Dream: A Playable WebMCP Portfolio

An explorable HD-2D portfolio where visitors and agents share one live interface—walking the world, building goal-specific tours, and inspecting page-aware work through WebMCP.

Comment

Inspiration

Most portfolios give every visitor the same menu, even though a recruiter, research collaborator, technical reviewer, and creative visitor are looking for different evidence. Agents also tend to receive a detached data view that the person cannot see. I wanted both participants to inhabit the same place: a playable portfolio whose visible page, navigation, and tool surface move together.

Crepusculum Dream began as my personal HD-2D hub world. For the WebMCP Challenge, I meaningfully extended it into a shared human-agent interface and packaged the result as a separate, rights-safe competition edition.

What it does

Visitors explore a dusk-lit pixel world with keyboard, mouse, or touch controls. Landmarks lead to Projects, Research, Mods, Zine, and About. A WebMCP-capable agent can operate the same live interface through tools registered for the current route:

  • Five global tools list pages, retrieve my biography, navigate, change language, and create a personalized portfolio tour.
  • Home adds tools for walking the on-screen traveler to a landmark and reading its position.
  • Every content page supplies its own version of get-page-overview and focus-page-section; the same tool name has page-specific sections and effects.
  • Projects exposes the fluid-simulation work, Research exposes publications and a read-only, paste-ready BibTeX result, Mods exposes project details and a Workshop action, Zine exposes individual pieces, and About exposes photography captions.

There are 16 distinct tool names. The live registry contains 7 tools on Home and 8 / 9 / 9 / 8 / 8 on Projects, Research, Mods, Zine, and About respectively, so an agent sees only actions that make sense on the page shared with the visitor.

Human-agent collaboration

The challenge-period centerpiece is create-portfolio-tour. The agent translates a visitor goal—recruiting, research collaboration, technical review, creative exploration, or a complete tour—into a visible liquid-glass route panel. Both participants see the same stops. Choosing one uses the site's real router; first arrival opens at the page introduction or abstract, while choosing a deeper stop centers and highlights that section below the persistent top bar.

This is not a static API beside the website. Tool calls act on the mounted DOM and the same router used by the visitor. The URL, visible page, focused section, browser metadata, and registered tools change together. On Home, agent-driven movement controls the same traveler that the person can move directly.

Information-retrieval tools can spare an agent from reading and re-grounding against an entire long page when the visitor needs one precise fact. Interaction tools provide semantic actions for navigation, movement, and focus instead of relying on fragile coordinate-based UI operations. Together, these tools can reduce unnecessary context and token use while lowering grounding and execution errors, potentially improving task-completion reliability.

How I built it

The application uses TypeScript and Vite without a frontend framework. Home is rendered in Canvas 2D at a low internal pixel-art resolution and scaled with nearest-neighbor rendering, combining procedural sprites and tiles with lighting, fog, embers, ash, depth blur, and color grading. Content pages reuse the animated dusk backdrop.

Tools are registered through the standards-track document.modelContext.registerTool() API. Global tools stay registered for the session. Each route owns an AbortController; mounting registers contextual tools and unmounting cancels their work and removes them. This prevents stale tools after rapid navigation and lets shared tool names have route-specific schemas, results, and visible behavior.

Every tool has a human-readable title, a strict JSON schema with additionalProperties: false, concise descriptions and results, trust/read annotations, and cancellation-aware execution when the host provides a signal. get-citation is a read-only information tool that returns a complete, paste-ready BibTeX entry for Overleaf; copying remains an explicit control in the shared page UI rather than an agent tool. The production build targets Chrome 149 or later.

What I added during the challenge

The playable world and an initial set of global, Home, and Research WebMCP tools predated the submission period; I do not claim them as new work. The latest public pre-challenge baseline is 5acdbc7, dated August 17, 2026.

Challenge-period work added the page-aware registry and route lifecycle, contextual overview/focus tools, exclusive tools for every content area, the Workshop action, a read-only paste-ready BibTeX retrieval tool with copying left to the visible page UI, strict schemas and annotations, cancellation support, Chrome 149 compatibility, route-specific metadata, structured WebMCP documentation, the visible goal-specific tour, shared-state focus behavior, and a repeatable six-route smoke test. The dated evidence is the original repository's 5acdbc7...5052cf2 comparison and the competition repository's CHALLENGE.md.

Competition-safe edition

The submitted repository is a clean export with new Git history so removed third-party source files are absent from both the tree and its history. It uses an anonymous blue-and-white pixel identicon, nonrepresentational coarse mosaics for redacted previews, CSS-only card/relic grids, and optimized runtime media only. Identity-specific game names, source artwork, a research PDF, the original publication teaser, and adapted literary mascots are not bundled. The Mods page retains ordinary external links to the separately maintained project and Workshop listing; their target content is not copied or proxied here.

The audit compared all 31 retained image/vector/video files against 27 restricted baseline originals and found zero SHA-256 matches. Details and licensing boundaries are documented in ASSET-AUDIT.md, PROVENANCE.md, and THIRD_PARTY_NOTICES.md.

Challenges

The hardest engineering problem was making page lifecycle part of the tool contract. An asynchronous registration can finish after its page disappears, so route cancellation and ownership must be explicit. Stable tool names also need page-specific schemas so an agent cannot request a section absent from the visible UI.

The hardest experience-design problem was keeping collaboration observable: navigation, scroll positioning, fixed-top-bar clearance, highlighting, transition timing, and the tour panel all have to agree. A separate challenge was drawing a clear provenance and licensing boundary without weakening the working demo.

Accomplishments

  • One live router and DOM are shared by human and agent rather than parallel representations.
  • Page-aware registration keeps the available actions precise across all six routes.
  • Native Chrome and Codex in-app-browser checks pass, as does the automated WebMCP smoke suite.
  • get-about-me is genuinely read-only; visible focus remains a separately modeled interaction.
  • The public deployment, source, tests, metadata, and submission documentation describe the same sanitized build.

What I learned

WebMCP is most compelling when tools express capabilities of the interface currently in front of the visitor. Page scope reduces ambiguity, visible effects build trust, and stable semantic actions let an agent help without taking the experience away from the person.

Team

Yunhao Luo led the overall site design and implemented the application, WebMCP integration, testing, rights-safe packaging, and submission materials. abcdefgJack contributed only through idea exploration and design discussion.

What's next

I would add evaluation datasets for tool selection, visitor-authored tour goals, deeper accessibility testing, and richer collaboration cues while following the evolving WebMCP standard.

License and provenance

The application source is MIT-licensed. Original site content and the limited third-party fonts/profile-link marks retained by the competition edition are separately documented. The original personal site and repository are linked only as the transparent pre-challenge baseline; the submitted live build and source are the sanitized competition edition.

Share this project:

Updates

Submission history