stevenjoezhang/live2d-widget
Live2d Widget
This project provides an animated Live2D character widget that can be embedded on any web page as an interactive mascot. The widget renders characters using the Cubism SDK on an HTML canvas, and can be deployed either via a content delivery network for zero-setup integration or self-hosted on a personal server for full control over asset delivery.
The mascot responds to visitor actions through CSS selector-based interaction binding, displaying custom speech bubbles when users hover over or click specific page elements. Visitors can click and drag the character to reposition it anywhere on the page, and a visibility toggle with a close button persists across page loads. The widget supports outfit swapping by loading alternative texture files from a model repository, and maintains its state across page transitions through PJAX navigation integration.
Configuration is handled through a JavaScript object that sets the character model, resource paths, and CDN endpoints, along with a JSON file that defines interaction triggers and text responses. The widget loads model assets from a static file server using HTTP requests, and its modular plugin architecture organizes features into independent modules for configuration, rendering, and interaction.