stevenjoezhang/live2d-widget

★ 10,655JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((live2d-widget))
    What it does
      Animated character
      Mouse reactions
      Display messages
    Deployment
      CDN script tag
      Cloudflare Pages
      Static blog source
    Configuration
      Model URL
      Toolbar buttons
      Drag toggle
    Licensing
      GPLv3 core
      Separate model license

mindmap root((live2d-widget)) What it does Animated character Mouse reactions Display messages Deployment CDN script tag Cloudflare Pages Static blog source Configuration Model URL Toolbar buttons Drag toggle Licensing GPLv3 core Separate model license

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add an animated mascot character to a personal blog or portfolio site without writing any backend code.

USE CASE 2

Host a customized version of the widget on Cloudflare Pages with your own model URL configured.

USE CASE 3

Embed a draggable anime character into a Hexo static blog by placing built files in the source directory.

USE CASE 4

Configure the widget toolbar to show custom buttons linking to social media or site navigation.

Tech stack

JavaScriptHTMLCSSLive2D Cubism Core

Getting it running

Difficulty · easy Time to first run · 5min

Character models must be hosted separately, this repository does not include any Live2D model files.

Core code is GPLv3, modifications must be open-sourced, the Live2D rendering engine is subject to separate Live2D license terms.

In plain English

Live2D Widget is a JavaScript library that adds an animated anime-style character to a website. The character appears in a corner of the page, reacts to mouse movement, and can display short messages. The README is primarily written in Chinese, with some English sections. Adding the widget to an existing website requires pasting one script tag into the HTML of the page. The library then loads its own stylesheet and behavior file automatically. There are no additional runtime dependencies aside from the Live2D rendering engine (Cubism Core), which the library fetches from a CDN on its own. The repository does not include any character models. Models are stored and served separately, either from a CDN path you configure or from your own server. Configuration options let you set which model appears by default, whether the character can be dragged around the page, and which small toolbar buttons are shown on the widget. The README includes steps for deploying the widget in several ways: loading the default version directly from jsDelivr CDN with a single line, forking the repository and hosting a customized version through jsDelivr or Cloudflare Pages, or placing the built files on your own server. For static blogs built with tools like Hexo, the files can sit in the blog source directory so they are published automatically during the normal build step. The core code is licensed under GPLv3. The Live2D rendering components are subject to separate Live2D license terms. Character models, artwork, and animation data are not covered by this repository and remain the property of their respective creators.

Copy-paste prompts

Prompt 1

I have a Hexo blog. Show me exactly where to place the live2d-widget files and how to configure it to load a custom model from a CDN URL.

Prompt 2

Write the HTML script tag and JavaScript configuration object to add live2d-widget to my site, loading a model I host on my own server.

Prompt 3

I forked live2d-widget and want to deploy it on Cloudflare Pages. Walk me through the build and deployment steps.

Prompt 4

How do I configure live2d-widget to disable dragging and pin the character to the right side of the screen?

Open on GitHub → Explain another repo

← stevenjoezhang on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.