Cyber Maker Garage — Scene Blueprint v2
One workshop, one story, six hero assets. Rather than scattering shiny objects all over a webpage, the homepage becomes one miniature workshop in Shenzhen: the house is the world, NEKO is the host, and each project is a small interactive resident.
01 / Art direction
Maker garage × miniature diorama × cyberpunk graffiti. Charcoal-black architecture, dusky purple structures, magenta neon, small cyan display accents and warm workbench lighting. Rounded collectible characters keep the workshop friendly. The silhouette must remain readable at mobile size. Motion is subtle: breathing lights, small nods, a waving paw, a moving camera eye.
Visual hierarchy: (1) garage and entrance, (2) NEKO near the front door, (3) PAN and FlipFate as signature projects, (4) BMO and Roomba as supporting personalities, (5) optional Courtside IQ on the back bench. No giant floating labels or dozens of separately spinning objects.
02 / Scene layout
Coordinates below follow the existing Three.js scene. X = left/right; Y = up; +Z = toward visitors/front.
| Asset | Approximate root (X, Y, Z) | Where it belongs | Key interaction |
|---|---|---|---|
| Maker Garage | (0, 0, 0) | Center-stage building; about 17 × 11.6 units | Enter / reveal the interior |
| NEKO | (5.55, 0.85, 6.43) | Front-right welcome podium | Paw wave, welcome/about |
| PΛN | (−5.8, 0.78, −2.25) | Left rear workbench | Open cocktail robot project |
| FlipFate | (−2.5, 0.77, −2.2) | Center-left rear workbench | Flip the card, open project overview |
| BMO | (4.5, 0.80, −2.2) | Right rear workbench | Screen expression, project overview |
| Roomba | (3.55, 0.15, 2.35) | Front interior walking area | Camera tracking animation, project story |
| Courtside IQ | (1.0, 0.8, −2.2) | Small optional background display | NBA analysis build log |
The rear wall has just four category signs: Projects, Blog, Challenge, Guides. The Challenge hotspot leads to the existing Makers Challenge initiative, including the exhibitor material-sourcing concept and sponsor campaign.
03 / Camera and movement
- Arrival: three-quarter view from the front, with the text block at the left and garage seen center/right. Show the shop sign and NEKO; avoid putting a model under the copy.
- Enter: camera glides closer; the procedural roof fades away, exposing the workbench residents. Imported roofs do the same when their nodes are named
ROOF_...orCEILING_.... - Explore: drag to orbit, mouse wheel to zoom on desktop, one-finger orbit on mobile. Clicking a character focuses the camera and opens a short HTML project card with a proper link.
- Scroll: narrative cards below the 3D hero are plain HTML, not WebGL-only. Visitors can still navigate if 3D is unavailable.
- Accessibility: reduced-motion visitors get a static scene with no decorative animations. Hover tooltips are supplemental; keyboard users can use the navigation and project links.
04 / Scene integration and asset slots
The live site uses Docusaurus + a Three.js scene inside a local iframe:
| Path | Purpose |
|---|---|
src/pages/index.tsx | Entrance overlay, bilingual copy, project cards and category navigation |
static/maker-house/scene.html | WebGL stage, camera, hotspots, procedural fallbacks and GLTF loader |
static/maker-house/model-slots.json | Configure imported .glb paths and their per-model transforms |
static/maker-house/scene-layout.svg | Editable top-down planning diagram |
static/maker-house/TRIPO_MODELS.md | Tripo prompts and integration details |
All asset slots default to an empty file path. The homepage therefore works even without Tripo exports. To replace one resident, export a GLB into static/maker-house/models/, then set the corresponding path in model-slots.json. You can replace only one character at a time.
Garage GLB export contract: floor-centered origin, front facing +Z, approximate world footprint 17 × 11.6, roof near Y=8, and no baked-in copies of PAN / NEKO / other residents. Name separately modeled roof or ceiling meshes with ROOF or CEILING so that the Enter transition can fade them. Otherwise deliver the garage as an already-open cutaway model.
Tripo export checklist
- Garage first: export
maker-garage.glbwithout a background, sky dome or pre-attached robots. - NEKO second: export
neko-luckycat.glbwith a paw-waving clip. - PΛN and FlipFate third: clean silhouettes and only a few moving parts; prioritize fidelity to real projects over complexity.
- BMO and Roomba last: original-looking companion and roaming camera rover.
- Before integrating: correct pivot and orientation in Blender, reduce tiny floating meshes, compress textures, limit materials and verify the animation mixer.
- Target ~1–2 MB per character where possible; the environment budget can be larger if tested. Check FPS on mobile and avoid heavy transparent layers.
05 / Interaction map
| Trigger | Visual response | Destination |
|---|---|---|
| Enter the Garage | Move camera in; reveal roof cutaway | Stay on homepage |
| NEKO | Wave and show project information | About / introduction |
| PΛN | Mechanical hand gesture and focus | PΛN development story |
| FlipFate | Card turns and focus | Projects |
| BMO | Subtle idle / screen expression | Projects |
| Roomba | Camera follows; moving rover | Roomba-VLLM story |
| Rear CHALLENGE sign | Highlight the challenge | Makers Challenge |
| Blog / Projects / Guides signs | Preview category | Relevant site section |
06 / What is and isn't built
Implemented prototype: interactive Three.js stage, working door shutters, neon breathing, site's existing profile-photo plaque, clickable vending and workbench hot spots, camera, bilingual project cards and fallback geometry. Six reproducible procedural GLBs are built by tools/generate_3d_models.py, but all imported GLB slots are currently disabled after visual QA hold. The procedural runtime stand-ins remain active. No Tripo export has been delivered.
Future upgrade: art-directed Tripo/Blender exterior, vending machine and props; authored shutter and resident motion; mobile rendering tests and final visual approval. See the Wave 2 Tripo production brief at static/maker-house/TRIPO_MODELS.md. Keep the GLB slots disabled until approved.
This document describes the Peter Pan's Techland homepage project. The separate Makers Challenge proposal is linked from the scene but is not an official Maker Faire program.
07 / Wave 2 — working controls and Tripo queue (October 2026)
- Garage shutter: click the physical switch on the right entry column or use the accessible lower-right button. The slats animate and Enter opens the shutter; reduced-motion users get immediate transitions.
- Light animation: restrained coral-pink and cyan neon breathing, subtle accent light motion, no rapid strobing.
- Brand: the website profile-photo texture is placed on a storefront portrait plaque. The wrong cat-head brand sticker from the concept image is not reproduced.
- New clickable objects: a compact vending-machine placeholder opens a non-commercial concept card; the rear workbench links to build guides.
- Tripo pending: create a cohesive garage exterior first, then a standalone vending GLB.
model-slots.jsonexposes avendingreplacement slot; see the Tripo brief for geometry prompts. - Verification: the scene module passed a JavaScript syntax check; visual QA and build deployment are separate gates.