{"id":51542786,"url":"https://github.com/damiansire/web-ar-molecule-lab","last_synced_at":"2026-07-09T15:30:20.957Z","repository":{"id":45500310,"uuid":"310958379","full_name":"damiansire/web-ar-molecule-lab","owner":"damiansire","description":"Interactive molecule laboratory using WebGPU and hand-tracking for augmented reality in the browser.","archived":false,"fork":false,"pushed_at":"2026-06-25T23:56:43.000Z","size":2648,"stargazers_count":25,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2026-06-26T01:13:20.533Z","etag":null,"topics":["artificial-intelligence","augmented-reality","chemistry","computer-vision","hand-tracking","javascript","mediapipe","threejs","webar","webgpu"],"latest_commit_sha":null,"homepage":"https://damiansire.github.io/web-ar-molecule-lab/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/damiansire.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2020-11-08T00:38:42.000Z","updated_at":"2026-06-25T23:56:47.000Z","dependencies_parsed_at":"2025-03-07T18:38:00.599Z","dependency_job_id":null,"html_url":"https://github.com/damiansire/web-ar-molecule-lab","commit_stats":null,"previous_names":["damiansire/web-ar-molecule-lab"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/damiansire/web-ar-molecule-lab","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damiansire%2Fweb-ar-molecule-lab","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damiansire%2Fweb-ar-molecule-lab/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damiansire%2Fweb-ar-molecule-lab/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damiansire%2Fweb-ar-molecule-lab/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/damiansire","download_url":"https://codeload.github.com/damiansire/web-ar-molecule-lab/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damiansire%2Fweb-ar-molecule-lab/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35304874,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-09T02:00:07.329Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["artificial-intelligence","augmented-reality","chemistry","computer-vision","hand-tracking","javascript","mediapipe","threejs","webar","webgpu"],"created_at":"2026-07-09T15:30:18.981Z","updated_at":"2026-07-09T15:30:20.939Z","avatar_url":"https://github.com/damiansire.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🧪 Molecule Lab\n\n**Combine atoms with your hands and your voice.** A chemistry lab in your browser:\nname an atom and it appears in your hand, drop it into an **alchemy cauldron** at the\ncenter of the scene, and on mixing a real molecule forms. Everything you create is kept\nin an **inventory** to reuse — and the molecules you make can be combined with each other\nto discover more complex compounds. Hand-tracking over your webcam, no controllers, no\ninstalls.\n\n🔗 **[Play online →](https://damiansire.github.io/web-ar-molecule-lab/)**\n\n![Molecule Lab](docs/preview.png)\n\n## How to play\n\n1. Click **Activar cámara** and allow access.\n2. **Say the name of an atom** (“hidrógeno”, “oxígeno”…) and it appears in your hand. No\n   microphone? Grab it from the **palette** at the top by holding your fingertip over it.\n3. **Bring your hand to the cauldron** to drop in what you are holding. Repeat to stack\n   up (e.g. 2 hydrogen + 1 oxygen).\n4. Say **“mezclar”** (or hold your fingertip on the **✨ Mezclar** button) and the\n   cauldron resolves the recipe: the molecule is born and enters your **inventory**. No\n   reaction? Adjust and try again, or **🗑 Vaciar** to start over.\n5. Anything you already made can be **re-summoned** by voice (“agua”) or by taking it from\n   the inventory **shelf** with your hand — and you can drop it back into the cauldron as\n   an ingredient.\n\n\u003e The voice commands are in Spanish (the recognizer runs in `es-AR`): say the Spanish name\n\u003e of an atom or product, or “mezclar” to brew.\n\n### The alchemy tree\n\nThe molecules you create are ingredients for new recipes. For example:\n\n- **Water** (2 H + 1 O) + **Carbon dioxide** (1 C + 2 O) → **Carbonic acid**\n- **Ammonia** (1 N + 3 H) + **Hydrochloric acid** → **Ammonium chloride**\n- **Sulfur dioxide** + **Water** → **Sulfurous acid**\n\nYou craft the intermediates first, then combine them. The inventory is persistent: your\nprogress survives a page reload.\n\n## Chemistry\n\n- **Elements (9):** H · O · C · N · S · P · F · Na · Cl\n- **First-level molecules:** H₂O, CO₂, NH₃, CH₄, NaCl, HCl, H₂, O₂, N₂, H₂O₂, O₃, CO,\n  NO, SO₂, H₂S, HF, PH₃\n- **Alchemy-tree compounds:** H₂CO₃, NH₄Cl, H₂SO₃, NH₄OH\n\nCombinations are resolved by **ingredient identity**: an atom or an already-created\nproduct. Adding content is declarative — add an element, a molecule (with its geometry),\nor a recipe in `src/chemistry.ts`.\n\n## Privacy\n\nEverything runs **on your device**. The camera stream and the hand-tracking model execute\nlocally in your browser — the video never leaves your machine. Nothing is downloaded or\ncontacted until you click *Activar cámara*.\n\n## Tech\n\n- **Vite + TypeScript**, rendered on a 2D `\u003ccanvas\u003e` over the mirrored webcam.\n- **Hand tracking** via [MediaPipe Tasks Vision](https://developers.google.com/mediapipe),\n  running in a Web Worker so inference never blocks the render loop.\n- **Voice** via the Web Speech API (optional; the game works fully with gestures alone).\n- **Pure, tested domain** (`src/chemistry.ts`): elements, molecules, recipes and the\n  cauldron resolver (`brew`) live without the DOM and are covered by unit tests.\n- A strict **Content-Security-Policy** injected at build time scopes network access to\n  only the CDNs strictly required by the model.\n\n## Development\n\n```bash\nnpm install\nnpm run dev       # dev server at /web-ar-molecule-lab/\nnpm test          # unit tests (chemistry, inventory, voice, hands)\nnpm run build     # production build → dist/\n```\n\n\u003e Requires a browser with `getUserMedia` (camera) support. A microphone is optional and\n\u003e only used to name atoms/products and say “mezclar”.\n\n## Deployment\n\nPushing to `master` triggers a GitHub Actions workflow that builds the project and\npublishes `dist/` to GitHub Pages. The Vite `base` is set to `/web-ar-molecule-lab/` to\nmatch the Pages subpath.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdamiansire%2Fweb-ar-molecule-lab","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdamiansire%2Fweb-ar-molecule-lab","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdamiansire%2Fweb-ar-molecule-lab/lists"}