{"id":50415227,"url":"https://github.com/fbnoname/animastage-lite","last_synced_at":"2026-06-02T22:00:13.171Z","repository":{"id":361281427,"uuid":"1252740491","full_name":"FBNonaMe/animastage-lite","owner":"FBNonaMe","description":"Browser MMD studio — PMX/VMD, timeline, physics, Shorts export (AnimaStage Lite)","archived":false,"fork":false,"pushed_at":"2026-05-30T23:27:01.000Z","size":24575,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-31T05:32:20.403Z","etag":null,"topics":["3d-animation","animation-editor","anime","anime-tools","creative-tools","desktop-app","mmd","motion-editor","threejs","webgl"],"latest_commit_sha":null,"homepage":"https://animastage-lite.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FBNonaMe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","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":"2026-05-28T20:28:46.000Z","updated_at":"2026-05-30T22:59:39.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/FBNonaMe/animastage-lite","commit_stats":null,"previous_names":["fbnoname/animastage-lite"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/FBNonaMe/animastage-lite","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FBNonaMe%2Fanimastage-lite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FBNonaMe%2Fanimastage-lite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FBNonaMe%2Fanimastage-lite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FBNonaMe%2Fanimastage-lite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FBNonaMe","download_url":"https://codeload.github.com/FBNonaMe/animastage-lite/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FBNonaMe%2Fanimastage-lite/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33838221,"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-06-02T02:00:07.132Z","response_time":109,"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":["3d-animation","animation-editor","anime","anime-tools","creative-tools","desktop-app","mmd","motion-editor","threejs","webgl"],"created_at":"2026-05-31T05:30:30.087Z","updated_at":"2026-06-02T22:00:13.159Z","avatar_url":"https://github.com/FBNonaMe.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://animastage-lite.app/app\"\u003e\n    \u003cimg src=\"docs/images/studio-screenshot.png\" alt=\"AnimaStage Lite — browser MMD studio\" width=\"900\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e⚡ AnimaStage — Browser-Native MMD Studio\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eFull MMD production in the browser. No install. No Windows lock-in. Just a tab.\u003c/b\u003e\u003cbr\u003e\n  \u003ci\u003ePMX · VMD · Timeline · Bullet Physics · MP4 Export · Shorts-Ready 9:16\u003c/i\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/FBNonaMe/animastage-lite\"\u003e\u003cimg src=\"https://img.shields.io/badge/Lite-1.0.0-blue\" alt=\"Lite 1.0\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/gtausa197-svg/AnimaStage-Pro\"\u003e\u003cimg src=\"https://img.shields.io/badge/Pro-5.0%2B-purple\" alt=\"Pro 5.0+\"/\u003e\u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Renderer-WebGL%202.0%20%2B%20Three.js-orange\" alt=\"WebGL2\"/\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Physics-Bullet%20WASM-green\" alt=\"Physics\"/\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Export-WebCodecs%20MP4-red\" alt=\"Export\"/\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Format-PMX%20%2F%20PMD%20%2F%20VMD-purple\" alt=\"Format\"/\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Shorts-9%3A16%20Ready-ff69b4\" alt=\"Shorts\"/\u003e\n  \u003ca href=\"https://animastage-lite.app\"\u003e\u003cimg src=\"https://img.shields.io/badge/🌐-Lite%20Demo-blue\" alt=\"Lite Demo\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://animastagepro.dev/\"\u003e\u003cimg src=\"https://img.shields.io/badge/🎬-Pro%20Demo-violet\" alt=\"Pro Demo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eThis repository\u003c/b\u003e → \u003ca href=\"https://github.com/FBNonaMe/animastage-lite\"\u003e\u003cstrong\u003eAnimaStage Lite\u003c/strong\u003e\u003c/a\u003e (open source)\u003cbr\u003e\n  \u003cb\u003eSibling project\u003c/b\u003e → \u003ca href=\"https://animastagepro.dev/\"\u003e\u003cstrong\u003eAnimaStage Pro\u003c/strong\u003e\u003c/a\u003e · \u003ca href=\"https://github.com/gtausa197-svg/AnimaStage-Pro\"\u003esource\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n## 🎬 What is AnimaStage?\n\n**AnimaStage** is a browser-native **MikuMikuDance** workflow — load PMX/PMD models and VMD motion, tune lighting and physics, edit on a timeline, and export video without desktop MMD or DirectX.\n\nWe ship **two editions** for different jobs:\n\n| | [**AnimaStage Lite**](https://animastage-lite.app) · **this repo** | [**AnimaStage Pro**](https://animastagepro.dev/) · [GitHub](https://github.com/gtausa197-svg/AnimaStage-Pro) |\n|---|---|---|\n| **Focus** | Fast preview · Shorts / Reels / TikTok | Full cinematic production |\n| **Live** | [animastage-lite.app](https://animastage-lite.app) · [Studio `/app`](https://animastage-lite.app/app) | [animastagepro.dev/](https://animastagepro.dev/) |\n| **Source** | [FBNonaMe/animastage-lite](https://github.com/FBNonaMe/animastage-lite) | [gtausa197-svg/AnimaStage-Pro](https://github.com/gtausa197-svg/AnimaStage-Pro) |\n| **Stack** | React 19 · Vite · R3F · TypeScript | WebGL EffectComposer pipeline |\n| **Renderer** | WebGL 2.0, DPR 1× in 9:16 Lite | Full post-FX stack (SSAO, DOF, volumetrics, bloom) |\n| **Physics** | Bullet WASM, presets | Bullet WASM, deep manual tuning |\n| **Timeline** | VMD dopesheet, **Bézier curves**, VMD export | Dual timeline (VMD + cinematic camera) |\n| **Characters** | Single scene focus | Multi-character, independent VMD per char |\n| **Bone editor** | Root / bone gizmos, morph tracks | Full G/R/S bone editor in viewport |\n| **Camera** | Bookmarks, 9:16, letterbox | Spline path, keyframes, track lock |\n| **Export** | WebCodecs MP4 HQ + Live | WebCodecs + frame-by-frame HQ render |\n| **Extra (Lite app)** | **Demo Gallery**, **Pose Library**, **Model Analyzer**, mocap, AI keys, collab, anim layers | Scene editor, session JSON, weather presets |\n| **Target** | Creators, low-spec machines | Studios, production teams |\n\n\u003e **Note:** In the Lite app, **Sidebar → Pro** means *advanced Lite modules* (mocap, AI, collab, layers) — not the separate **AnimaStage Pro** product.\n\n**Lite idea:** ~80% visual impact at ~40% GPU load vs heavy desktop pipelines — ideal when stability and vertical export matter most.\n\n---\n\n## 🆕 Recent updates (changelog)\n\nSummary of what was **added** and **updated** in this repository (editor, landing, SEO).\n\n### Added\n\n| Feature | Description | Where in app |\n|---------|-------------|--------------|\n| **Demo Gallery** | One-click demo scenes (Dance / VTuber / Cinematic). Motion plays in ~2s without uploading files. | Sidebar → **Scene** · `/app?demo=party-dance` · `/app?demo=gallery` |\n| **Pose Library** | Preset poses + capture from model + import/export JSON. Applies on pause (does not override VMD during play). | Sidebar → **Control** |\n| **Model Analyzer** | Auto-check PMX after load: textures, bone/morph/physics counts, performance warnings. **Rescan** button. | Sidebar → **Edit** |\n| **Curve Editor** | Bézier curve editing for timeline tracks; shared math with playback (`curveMath.ts`). | Timeline panel → **Curves** tab |\n| **Landing (SaaS-style)** | Conversion-focused homepage: hero, instant demo grid, user flow, FAQ, JSON-LD. | `/` |\n| **SEO / deploy** | IndexNow key, `sitemap.xml`, `vercel.json` SPA rewrites, static H1 in `index.html` |\n| **Docs** | `docs/DEMO_GALLERY.md`, `public/demos/` (thumbnails, example manifest) |\n\n### Updated\n\n| Area | Change |\n|------|--------|\n| **Performance** | PMX metadata fires once per mesh; analyzer debounced + PMX buffer cache; collab sync no longer depends on full `models` array (fixes console spam / update loops). |\n| **Landing CTAs** | Primary **Try Demo — Free** · Secondary **Upload Your Model** · conversion bridge “Your turn — upload PMX/VMD”. |\n| **Demo boot** | URL params: `?demo=\u003cid\u003e`, `?demo=gallery`, `?demo=1` → featured scene. |\n| **React** | Hooks order fix in `App.tsx` (collab effects after `useCallback`s). |\n\n### New / notable paths\n\n```\nsrc/demos/                    # Demo catalog, instant loader, pack manifest loader\nsrc/components/gallery/       # DemoGalleryPanel, DemoGalleryOverlay\nsrc/pose/                     # Pose types, presets, apply, localStorage\nsrc/analyzer/                 # PMX parse, validate, analyzeModel\nsrc/editor/curveMath.ts       # Shared Bézier evaluation for timeline + UI\nsrc/pages/landing/            # Hero mockup, flow diagram, conversion bridge\npublic/demos/thumbs/          # Demo preview SVGs\nscripts/gen-demo-thumbs.mjs   # Regenerate demo thumbnails\nscripts/submit-indexnow.ps1   # npm run indexnow:submit\n```\n\n### Not changed (by design)\n\n- Bullet / Jolt physics pipeline, `mmdFrameLoop`, VMD playback priority  \n- Core viewport rendering and MP4 export pipeline  \n\n---\n\n## 🏆 Key numbers (Lite)\n\n| Metric | Value |\n|--------|-------|\n| Formats | PMX, PMD, VMD, textures, HDR |\n| Vertical export | **1080×1920** (9:16) |\n| Physics | Ammo.js (Bullet), ~65 Hz, 3 substeps |\n| Post-FX | RTX Lite — bloom, DOF, weather, SSAO-lite |\n| Clean capture | No gizmos / grid in export |\n\n---\n\n## ✨ AnimaStage Lite — features (this repository)\n\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003eClick to expand Lite feature list\u003c/b\u003e\u003c/summary\u003e\n\n### Scene and models\n- Drag \u0026 drop `.pmx` / `.pmd`, textures, multiple `.vmd`, HDR\n- Presets or your own model · bone \u0026 root gizmos · morphs\n\n### Motion and physics\n- VMD playback · Bullet cloth (`anytime` / `playtime` / `off`) · wind · IK\n\n### Camera and framing\n- Free orbit \u0026 MMD camera · bookmarks · **9:16** · letterbox 2.39\n\n### Visual (RTX Lite)\n- Style presets · weather · bloom · DOF · vignette · HDR IBL\n\n### Animation editor\n- **Dopesheet** \u0026 **Curves** (Bézier handles, draggable keys) · **VMD export** · undo/redo · mirror / stretch\n\n### Editor tools (Sidebar)\n| Module | Tab | Purpose |\n|--------|-----|---------|\n| **Demo Gallery** | Scene | Instant demo scenes — dance, VTuber, cinematic |\n| **Pose Library** | Control | Presets, capture pose, JSON import/export |\n| **Model Analyzer** | Edit | Texture/performance report after PMX load |\n| **Bone / Materials** | Edit | PMX hierarchy, material highlight |\n\n### Sidebar → Pro (Lite advanced)\n| Module | Purpose |\n|--------|---------|\n| Animation layers | Weighted overlays, bone mask, solo/mute |\n| Mocap | Video → keys (MediaPipe) |\n| AI motion | Gemini keyframes (optional `VITE_GEMINI_API_KEY`) |\n| Collab | Local tabs or WebRTC |\n\n### Video\n- **MP4 HQ** — WebCodecs + mp4-muxer (Chrome / Edge)\n- **Live** — MediaRecorder · clean frame · **1080×1920** in 9:16\n\n\u003c/details\u003e\n\n### What Pro adds ([demo](https://animastagepro.dev/) · [repo](https://github.com/gtausa197-svg/AnimaStage-Pro))\n\n- Multi-character scenes with per-character VMD  \n- Full bone animation editor (G/R/S, mirror, anatomy limits)  \n- Cinematic camera spline + dual timeline  \n- Full RTX-style composer (SSAO → DOF → volumetric → bloom → grade)  \n- Scene outliner, session save/load JSON  \n- See the [Pro demo](https://animastagepro.dev/) and [Pro repository](https://github.com/gtausa197-svg/AnimaStage-Pro) for the full pipeline  \n\n---\n\n## 🚀 Quick start — AnimaStage Lite\n\n**Try online:** [animastage-lite.app/app](https://animastage-lite.app/app)\n\n**Run locally** — Node.js 18+ and WebGL2:\n\n```bash\ngit clone https://github.com/FBNonaMe/animastage-lite.git\ncd animastage-lite\nnpm install\nnpm run dev\n```\n\n| URL | Page |\n|-----|------|\n| `http://localhost:3000/` | Landing (demo grid, conversion CTAs) |\n| `http://localhost:3000/app` | Studio |\n| `http://localhost:3000/app?demo=party-dance` | Studio — featured demo (auto-play) |\n| `http://localhost:3000/app?demo=gallery` | Studio — full demo gallery overlay |\n\n```bash\nnpm run indexnow:submit   # optional — ping search engines (IndexNow)\n```\n\n### Android app (download)\n\nDebug APK for sideload: **[app-debug.apk](/app-debug.apk)** (~19 MB) — also linked on the [landing page](https://animastage-lite.app/#android).\n\nRebuild web + APK into `public/`:\n\n```bash\ncd android \u0026\u0026 gradlew.bat assembleDebug\ncd .. \u0026\u0026 npm run sync:android:assets \u0026\u0026 npm run build\n```\n\n```bash\nnpm run build    # → dist/\nnpm run preview\nnpm run lint\n```\n\n**Try a demo first:** open `/app?demo=party-dance` or pick a scene on the landing page.\n\n**Your files:** drag PMX + VMD onto the viewport or use **File → Load**.\n\n### Configuration\n\nCopy [`.env.example`](.env.example) → `.env` (optional, for AI / WebRTC collab):\n\n```env\nVITE_GEMINI_API_KEY=your_key_from_Google_AI_Studio\n# VITE_COLLAB_SIGNALING=wss://your-signaling.example.com\n```\n\nGet a Gemini key: [Google AI Studio](https://aistudio.google.com/apikey). Restart `npm run dev` after editing `.env`.\n\n\u003e `VITE_*` values are embedded in the client bundle — do not commit real production secrets.\n\n---\n\n## 🎮 Lite — UI map\n\n| Task | Where |\n|------|--------|\n| **Instant demo** | Landing → demo tile · **Scene → Demo Gallery** · `/app?demo=…` |\n| Model / VMD | **File** or drag-drop |\n| Model health check | **Sidebar → Edit → Model Analyzer** |\n| Poses (paused) | **Sidebar → Control → Pose Library** |\n| Light, style, weather | **FX** |\n| MP4 / Live | **FX → Video** |\n| Physics | **File** / MMD Lite panel |\n| Timeline, dopesheet, curves | Bottom panel (**Curves** tab) |\n| Mocap, AI, layers, collab | **Sidebar → Pro** |\n| 16:9 ↔ 9:16 | Viewport format toggle |\n\n---\n\n## 🏗️ Lite — project structure\n\n| Path | Role |\n|------|------|\n| `src/App.tsx` | App state, demo load, collab, recording, pose/analyzer wiring |\n| `src/RootRouter.tsx` | `/` landing vs `/app` studio |\n| `src/components/MMDModelWrapper.tsx` | PMX, VMD, physics, layers, pose hold |\n| `src/pages/LandingPage.tsx` | Marketing landing (conversion-optimized) |\n| `src/pages/landing/` | Hero mockup, demo grid, conversion bridge, flow diagram |\n| `src/demos/` | Demo catalog, `loadDemoPack`, instant scene apply |\n| `src/components/gallery/` | Demo gallery UI (panel + overlay) |\n| `src/pose/` | Pose library presets, storage, apply to mesh |\n| `src/analyzer/` | PMX analysis and validation reports |\n| `src/editor/` | Dopesheet, `curveMath`, VMD export |\n| `src/hooks/useEditorDocument.ts` | Undo, PMX metadata, analyzer debounce |\n| `src/video/` | MP4 HQ / Live, clean capture |\n| `src/mocap/` · `src/ai/` · `src/collab/` | Optional Pro panel modules |\n| `src/utils/mmdCharacterPhysics.ts` | Bullet / MMD physics |\n| `public/demos/` | Demo thumbnails + optional PMX packs |\n| `public/vercel.json` | SPA rewrites for `/app`, sitemap |\n\nDocs: [docs/ANIMASTAGE_LITE.md](docs/ANIMASTAGE_LITE.md) · [docs/DEMO_GALLERY.md](docs/DEMO_GALLERY.md) · Security: [SECURITY.md](SECURITY.md)\n\n---\n\n## 📊 Requirements\n\n| Feature | Environment |\n|---------|-------------|\n| Core app | WebGL2 (Chrome, Edge, Firefox, Safari) |\n| MP4 HQ | WebCodecs H.264 (best: Chrome / Edge) |\n| AI motion | Gemini API key in `.env` |\n| Heavy PMX | Discrete GPU; use **9:16 Lite** on weak PCs |\n\n---\n\n## 🤝 Links\n\n| Edition | Website | Repository |\n|---------|---------|------------|\n| **Lite** | [animastage-lite.app](https://animastage-lite.app) | [github.com/FBNonaMe/animastage-lite](https://github.com/FBNonaMe/animastage-lite) |\n| **Pro** | [animastagepro.dev/](https://animastagepro.dev/) | [github.com/gtausa197-svg/AnimaStage-Pro](https://github.com/gtausa197-svg/AnimaStage-Pro) |\n\nContributions welcome on **Lite** — issues and PRs on GitHub.\n\n---\n\n## 📄 Citation\n\n```bibtex\n@software{animastage2026,\n  title   = {AnimaStage: Browser-Native MMD Studio},\n  author  = {FBNonaMe},\n  year    = {2026},\n  url     = {https://animastage-lite.app}\n}\n```\n\n---\n\n## 📝 License and content\n\nOpen-source **AnimaStage Lite** — see `LICENSE` in this repository (if present) and third-party licenses in `package.json`.\n\n**MMD models, motions, and textures** belong to their authors. Use only content you have rights to publish and record.\n\n**AnimaStage Pro** is a separate project — [animastagepro.dev/](https://animastagepro.dev/) · [source](https://github.com/gtausa197-svg/AnimaStage-Pro) · see Pro `LICENSE` for terms.\n\n---\n\n\u003cp align=\"center\"\u003e\n  \u003ci\u003e🎬 \"Drop the PMX. Hit play. No install required.\"\u003c/i\u003e\u003cbr\u003e\u003cbr\u003e\n  \u003ca href=\"https://animastage-lite.app/app\"\u003e\u003cb\u003eAnimaStage Lite\u003c/b\u003e\u003c/a\u003e\n  \u0026nbsp;·\u0026nbsp;\n  \u003ca href=\"https://animastagepro.dev/\"\u003e\u003cb\u003eAnimaStage Pro\u003c/b\u003e\u003c/a\u003e\n  \u0026nbsp;·\u0026nbsp;\n  \u003ca href=\"https://github.com/gtausa197-svg/AnimaStage-Pro\"\u003ePro on GitHub\u003c/a\u003e\u003cbr\u003e\n  \u003ccode\u003eanimastage-lite@1.0.0\u003c/code\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffbnoname%2Fanimastage-lite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffbnoname%2Fanimastage-lite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffbnoname%2Fanimastage-lite/lists"}