Click a card, step into a 3D world: Three Small Worlds turns interface navigation into a portal

Click a card, step into a 3D world. Three cards are labeled train cabin, flying circus, and little tokyo. Click one card, and the camera passes through the plane of the card and slides into a complete 3D scene. No page jump, no loading animation. The card itself is the entrance.

This is the open-source project Three Small Worlds by developer AmirMušić. It places three enterable 3D worlds in the browser, and the entrances are three cards. The train cabin has wooden floors and scenery outside the window; flying circus is a yellow aircraft hovering against a light blue background; little tokyo is a street scene with a cartoon panda, featuring buildings, traffic lights, and a tram. Once inside a scene, you can explore freely: drag to rotate the camera, use the scroll wheel to zoom in and out, press Esc or click the back button to return to the overview, and use the number keys 1, 2, and 3 to switch scenes directly.

The project code is open source on GitHub, based on pmndrs' Enter portals example, originally by Paul Henschel / drcmda. The three scene models were respectively created by thomas.rynne, Mikkel Garde Blaase / plorigon, and Glen Fox / glenatron. The application code uses the MIT license. The models retain their respective licenses: the aircraft is CC BY-NC 4.0, and the train and Tokyo scenes are CC BY 4.0. Before making commercial modifications, confirm the asset licenses first. The original tweet cites @0xca0a as the inspiration.

The technical implementation is not complicated, but there are several details worth a developer's attention. Portal blending (the transition effect from card to scene), camera transitions, and all interaction logic are concentrated in src/main.jsx; the scene models, labels, backgrounds, card positions, and model transforms are concentrated in src/scenes.js. GLB files (a common 3D model format) go into public/models/; animated ones play automatically, and static ones stay static. When entering and exiting scenes, the same animated scene remains mounted throughout and is not repeatedly rebuilt. Models, fonts, and the Draco decoder (3D model compression decoding) are all served by the app itself, with no external CDN required.

Running it requires Node.js 22.12 or newer. npm ci --ignore-scripts && npm run dev will get it running locally. Deploying to Vercel requires no API key or backend.

What is more interesting about this project is that it exists as a 'homework assignment for AI agents.' The repository contains AGENTS.md, CLAUDE.md, and an implementation guide. Open the repository with Codex or Claude Code and paste this:

Run this project locally and show me the working example. Then help me replace its three scenes with my own GLB models. Handle setup and verification, preserve credits and licenses, and ask me for the files and visual choices you need. Keep everything local until I ask you to publish.

The agent will first get the example running, then wait for you to provide GLB files and visual preferences. This practice of writing code for both humans and agents is becoming a new distribution method for open-source projects. In the tweet, the author also suggests testing directly in Claude, Codex, or Hermes.

To be clear: this is a desktop-first early experiment, not a production-grade component. On narrow screens, the cards on both sides get cropped; mobile performance depends on the device and models; and there is no accessibility alternative outside the WebGL scene. The online demo is at three-small-worlds.vercel.app.

This project is not isolated. Two days ago, AmirMušić had just published a list of design/motion tools, organizing 10 repositories he thinks are worth using with AI agents, with a combined star count claimed to exceed 550,000. These include Impeccable with 85K stars (checks AI-generated interfaces using 62 rules, specifically to counter 'AI flavor'), UI UX Pro Max with 139K stars (generates a complete design system from a short project brief), MCP for Blender with 32K stars (lets any LLM drive Blender directly), and Remotion with 67K stars (write videos with React). He cited this list under the Three Small Worlds tweet, with the caption: More good stuff for your agents.

Under the tweet, someone worried on behalf of the GPU: click a card, wait for the fans to spin up, then walk into the scene. The author replied: I apologize. A VR developer offered their own experience: the success of a card-to-scene transition depends on continuity. Let one element, such as the image on the card cover, continue into the 3D space, so the eyes do not lose their position. They also asked about performance on phones. There were also doubts: the demo looks cool, but if every card click loads a 3D scene, the result is a list nobody wants to scroll.

These criticisms are valid. Three Small Worlds is more of a direction validation, and still some distance from a directly reusable component. The interaction idea it demonstrates is: a click can be a passage, not just a jump. Whether this idea is worth using depends on whether your content can sustain a complete 3D world.