HELLO WORLD

Development rig test: sixteen realistic avatar rigs loaded and posed.
Discover Hello World: enter the demo neighborhood and create your resident.
Development engine harness: daytime plaza, café, stage and raid portal.
Development engine harness: evening lighting in the neighborhood.
Neighborhood view: residents meet and greet beside the plaza and stage.
Character Studio: realistic avatar preview with body, appearance and animation controls.
Development engine harness: cinematic view of residents at the café.
Simulated raid demonstration: portal effect and arrival banner; not a live Twitch event.
Isolated scene render: resident characters and raid portal on a transparent background.
Development environment preview: aerial city, roads, lake and surrounding mountains.
Development engine harness: street-level view of residents near the stage.
Development engine harness: neighborhood overview with resident and event controls.
Character Studio: stylized resident preview with expression and animation controls.
Simulated raid demonstration: residents arriving through the glowing portal.
Development engine harness: elevated cinematic view of the neighborhood.

Inspiration

A great stream is more than a video. It is a place people return to: familiar names, running jokes, friendships, and moments that become community history. But most on-screen interactions disappear almost as soon as they happen.

HELLO WORLD asks: what if a stream's community had a little life of its own?

Inspired by the social storytelling of life simulations and the immediacy of audience participation, we built a 3D neighborhood where viewers can become residents rather than remain names scrolling past. The goal is not another disposable alert. It is a shared place that remembers.

What it does

HELLO WORLD is a playable vertical slice of a persistent community world. Visitors create and customize a resident, enter a stylized neighborhood, and interact through greetings, waves, dances, gifts, and friendships. Social relationships and resident appearance are part of authoritative world state rather than disconnected visual effects.

For the streamer, Director Studio provides weather and atmosphere controls, celebrations, labeled demo raids, population limits, action cooldowns, an approval queue, interaction pause, event history, and world reset. A transparent browser-source route presents the same world without application chrome, with neighborhood, orbit, street, follow, and cinematic camera choices.

The intended Twitch loop is simple: a viewer joins through chat, their resident appears in the world, and community activity becomes something everyone can watch together. The server includes Twurple authenticated IRC command handling and EventSub WebSocket adapters for subscriptions, approved Channel Points redemptions, and incoming raids.

How we built it

The application uses React 19, TypeScript, and Vite, with a Node server and a shared world-engine package. One authoritative WorldRuntime receives normalized viewer actions, Director demo events, and Twitch adapter events. Server-side validation, identity, permissions, cooldowns, and approval rules sit before the runtime.

Browsers receive synchronized snapshots over WebSocket. The Node server saves atomic JSON snapshots to private local storage; IndexedDB is a read-only reconnect cache, not a second authority. Multiple browser sessions therefore see the same residents and relationships. Persistence means state survives reloads and server restarts when the private data directory is retained; it does not mean the simulation runs while the server is stopped.

The world supports a compatible WebGL default and optional WebGPU rendering with fallback. Browser-source presentation reuses the actual world, not a separate animation.

How we used Codex and AI

OpenAI Codex was used to build and integrate the application shell, server, shared contracts, Twitch adapters, permission boundaries, persistence, OBS browser-source presentation, and verification workflow. Codex integrated the separately developed Claude world engine through an explicit package contract, then helped diagnose and fix real integration issues rather than substituting mock visuals.

One concrete example was the resident creator: its controls existed, but the host layout gave the 3D creator no usable height. Browser evidence exposed the defect; a responsive host-height fix restored real customization, and the acceptance checks were strengthened to assert a noncollapsed creator and a loaded avatar rig.

AI is used here as a development collaborator, not as a claimed production language-model service powering resident behavior.

A small world with a clear role for everyone

For a viewer: arrive as a person, not just an alert

Start on Discover, enter the neighborhood, and create a resident. Character Studio exposes appearance and animation controls so a resident has a recognizable identity. The world then gives that identity a social context: other residents, shared public places, and small interactions that can accumulate into relationships. The important feedback loop is visible and understandable: choose an action, see it in the world, and return to the same resident later.

For a streamer: direct the atmosphere without surrendering control

Director Studio is the operational side of the experience. Weather and celebrations let a creator change the mood; population limits, cooldowns, approvals, and interaction pause keep audience participation bounded. Demo raids are explicitly labeled so a creator can rehearse a segment without pretending an external Twitch event occurred. The streamer does not need to expose private credentials to viewers or give them privileged world controls.

For the audience watching the broadcast: make participation legible

The neighborhood is designed to be watched as well as operated. The plaza, café, stage, and portal provide recognizable points of interest, while the camera choices help frame either a whole community or a particular resident. A transparent browser-source route keeps the world reusable in an existing stream layout instead of forcing the streamer into a full-screen application.

Design choices

The product uses a charcoal-and-lime interface around a colorful, low-poly world. That contrast keeps navigation and controls readable while giving the neighborhood its own visual personality. The interface separates the visitor's world view, resident creation, and the streamer's Director tools rather than putting every control on the same screen.

The gallery includes both the integrated application and explicitly captioned development views: character previews, a sixteen-rig test, environment exploration, and simulated raid effects. These images document the build process and visual range; they should not be read as claims that every development harness is a shipped end-user screen.

What we learned

The biggest lesson was that persistence is a product promise, not just a storage API. A resident's appearance, relationships, server identity, and browser reconnect behavior all need to agree. We chose a single authoritative runtime so reconnecting clients cannot overwrite newer state with an old local cache.

The second lesson was to use AI with explicit ownership and verification. A shared integration contract let the 3D engine and application evolve in parallel, but real browser checks still found problems that a successful build could not. Codex helped bridge that gap: inspect the actual failure, make a targeted fix, and record what was truly retested.

Challenges we ran into

The hardest work was making a visually rich world and a secure, persistent application behave as one product. We had to keep the runtime importable on the server without browser-only dependencies, reconcile viewer identity with server authority, preserve appearance and relationships across reloads, and make transparent overlay rendering work without claiming native OBS testing.

We learned to separate adapter, browser-rendering, and end-to-end verification, and to record the exact evidence behind each result. Software WebGPU tests also helped distinguish renderer compatibility from hardware performance.

Accomplishments

Integrated a real 3D neighborhood, resident creator, social interaction flow, and streamer controls. Verified that changed appearance and social relationships survive a page reload and reach another browser session. Tested permission and input boundaries, including forged actor/source data and unauthorized Director actions. Recorded 80 passing automated tests and passing typecheck/build checks on the documented tested revision. Verified a nonblank transparent overlay with real rendered characters and props in Chromium. Documented remaining external-service limitations instead of hiding them.

Verification evidence and tested revision details are in docs/QA.md and docs/RELEASE.md in the repository. These are scoped checks, not a claim that every end-to-end flow or external service passed.

Try it

Requires Node.js 22+ and pnpm 10.28.2.

Clone https://github.com/mylife-as-miles/hello-world and enter the directory. Copy .env.example to .env, run pnpm install --frozen-lockfile, then pnpm dev. Open http://localhost:5173. Without authorized Twitch credentials, the app intentionally shows Demo Mode. Enter the world, create a resident, change its appearance, and save. Select residents and try a greeting, wave, dance, gift, or friendship. Reload to inspect persistence. Open Director Studio to change weather and launch clearly labeled demo events. Local Director access is restricted by the supplied configuration. Open /overlay?camera=neighborhood to inspect the browser-source presentation. The README explains how to add it as an OBS Browser source. Run pnpm typecheck, pnpm test, and pnpm build. Browser acceptance is available through pnpm test:browser.

Twitch setup and required permissions are documented in docs/TWITCH.md. Tokens and client secrets remain server-side and must never be committed.

What's next

Connect the broadcaster account and complete live end-to-end and native OBS verification; unify browser and Twitch identities; validate hardware rendering performance; and continue hardening hosted persistence. The ambition is a community world that grows with a channel, while keeping the creator in control of what appears on stream.