{"id":50682592,"url":"https://github.com/hacxy/l2d-widget","last_synced_at":"2026-06-08T20:02:20.770Z","repository":{"id":65268437,"uuid":"583084397","full_name":"hacxy/l2d-widget","owner":"hacxy","description":"Drop a Live2D character onto any web page. One function call, zero framework dependencies.","archived":false,"fork":false,"pushed_at":"2026-05-25T08:43:50.000Z","size":6815,"stargazers_count":559,"open_issues_count":19,"forks_count":35,"subscribers_count":5,"default_branch":"main","last_synced_at":"2026-05-25T10:11:30.662Z","etag":null,"topics":["cubism2","cubism4","cubism5","live2d","live2d-component","live2d-web","live2d-widget"],"latest_commit_sha":null,"homepage":"https://l2d-widget.hacxy.cn","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/hacxy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":null,"custom":["https://raw.githubusercontent.com/hacxy/hacxy/main/images/WechatIMG11.jpg"]}},"created_at":"2022-12-28T18:05:47.000Z","updated_at":"2026-05-25T08:43:54.000Z","dependencies_parsed_at":"2024-02-23T10:25:30.636Z","dependency_job_id":"9fac4428-ae33-4f9a-876a-75e449597ed5","html_url":"https://github.com/hacxy/l2d-widget","commit_stats":{"total_commits":138,"total_committers":2,"mean_commits":69.0,"dds":0.02898550724637683,"last_synced_commit":"93bef8b09c601ebfd576e5f3b2703ff2bf6671e9"},"previous_names":["hacxy/l2d-widget"],"tags_count":60,"template":false,"template_full_name":null,"purl":"pkg:github/hacxy/l2d-widget","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacxy%2Fl2d-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacxy%2Fl2d-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacxy%2Fl2d-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacxy%2Fl2d-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hacxy","download_url":"https://codeload.github.com/hacxy/l2d-widget/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacxy%2Fl2d-widget/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34078019,"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-08T02:00:07.615Z","response_time":111,"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":["cubism2","cubism4","cubism5","live2d","live2d-component","live2d-web","live2d-widget"],"created_at":"2026-06-08T20:02:15.626Z","updated_at":"2026-06-08T20:02:20.763Z","avatar_url":"https://github.com/hacxy.png","language":"TypeScript","funding_links":["https://raw.githubusercontent.com/hacxy/hacxy/main/images/WechatIMG11.jpg"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg width=\"240\" src=\"https://hacxy-1259720482.cos.ap-hongkong.myqcloud.com/images/logo.svg\"/\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003el2d-widget\u003c/h1\u003e\n\u003ch4 align=\"center\"\u003eDrop a Live2D character onto any web page. One function call, zero framework dependencies.\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/l2d-widget\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/l2d-widget?color=FFB6C1\u0026labelColor=1b1b1f\u0026label=npm\" alt=\"npm version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/l2d-widget\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/l2d-widget?color=FFB6C1\u0026labelColor=1b1b1f\u0026label=downloads\" alt=\"downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/package/l2d-widget\"\u003e\u003cimg src=\"https://img.shields.io/bundlephobia/minzip/l2d-widget?color=FFB6C1\u0026labelColor=1b1b1f\u0026label=minzip\" alt=\"bundle size\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n[Documentation](https://l2d-widget.hacxy.cn) | [中文](./README.zh.md)\n\n\u003e [!IMPORTANT]\n\u003e This project is a full rewrite of [oh-my-live2d](https://github.com/hacxy/oh-my-live2d) based on the [l2d](https://github.com/hacxy/l2d) library. The original `oh-my-live2d` has been renamed to **l2d-widget**. If you are migrating from `oh-my-live2d`, please refer to the [documentation](https://l2d-widget.hacxy.cn) for the updated API.\n\n## Features\n\n- **Single-call integration** — `createWidget()` handles canvas creation, WebGL context initialization, model loading, and interaction bindng in one call\n- **Cubism 2 \u0026 6 runtime** — built on [l2d](https://github.com/hacxy/l2d), auto-detects model version and loads the correct Cubism runtime\n- **Lip-sync via parameter driving** — character-by-character typing animation drives mouth open/close parameters (`PARAM_MOUTH_OPEN_Y`) in real time with configurable value ranges\n- **Full lifecycle control** — `switchModel()` runs exit transition → WebGL teardown → re-init → entrance transition as one atomic async operation; `destroy()` guarantees resource cleanup\n- **~500 lines, zero runtime deps** — pure DOM + CSS Animation, no framework. Outputs ESM and IIFE, tree-shakeable\n\n## Installation\n\n```bash\nnpm install l2d-widget\n```\n\nOr use a CDN:\n\n```html\n\u003cscript src=\"https://unpkg.com/l2d-widget/dist/index.min.js\"\u003e\u003c/script\u003e\n```\n\n## Quick Start\n\n```ts\nimport { createWidget } from 'l2d-widget';\n\nconst widget = createWidget({\n  model: {\n    path: 'https://model.hacxy.cn/cat-black/model.json',\n  },\n});\n```\n\nA Live2D model appears in the bottom-left corner of the page with a hover menu and tip bubbles. The returned `widget` object gives you programmatic control (switch models, sleep, destroy).\n\n## Examples\n\n### Multi-Model Switching\n\n```ts\ncreateWidget({\n  model: [\n    { path: '/models/cat-black/model.json' },\n    { path: '/models/cat-white/model.json' },\n  ],\n});\n```\n\nA shuffle button appears automatically in the menu when multiple models are provided.\n\n### Typing Animation with Lip-Sync\n\n```ts\ncreateWidget({\n  model: {\n    path: '/models/cat-black/model.json',\n    tips: {\n      typing: {\n        param: 'PARAM_MOUTH_OPEN_Y',\n        speed: 200,\n      },\n      welcomeMessage: ['Hello!', 'Nice to meet you!'],\n      messages: ['Take a break~', 'Stay hydrated!'],\n      duration: 4000,\n      interval: 6000,\n    },\n  },\n});\n```\n\n## Widget Instance\n\n`createWidget()` returns a `Widget` object:\n\n| Method / Property    | Description                              |\n| -------------------- | ---------------------------------------- |\n| `l2d`                | Underlying `l2d` instance                |\n| `switchModel(index)` | Switch to a model by index               |\n| `sleep()`            | Hide model; click the status bar to wake |\n| `destroy()`          | Tear down widget and release resources   |\n\nFor the full options reference (`WidgetOptions`, `ModelOptions`, `MenusOptions`, `TipsOptions`), see the [documentation](https://l2d-widget.hacxy.cn).\n\n## Development\n\n| Command      | Purpose                       |\n| ------------ | ----------------------------- |\n| `pnpm dev`   | Watch build with sourcemaps   |\n| `pnpm demo`  | Demo server at localhost:3000 |\n| `pnpm build` | Production build              |\n| `pnpm lint`  | Lint                          |\n\n## License\n\n[MIT](LICENSE)\n\n---\n\n\u003e 中文文档请见 [README.zh.md](./README.zh.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhacxy%2Fl2d-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhacxy%2Fl2d-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhacxy%2Fl2d-widget/lists"}