BD2-L2D-Viewer: checking Brown Dust 2 character animations in a browser

A viewer for one game, and why that is a reasonable scope

The project is a website to check the animations of the characters from the gacha game Brown Dust 2, and if you want to request a feature or report a bug you can open an issue.

The scope is narrow in a way that would be strange for a general purpose tool and is entirely reasonable for this one. The game ships character animations built with Live2D, which is the 2D animation system, and with Spine, which is a competing system. Reviewing what a character does on a particular screen is a legitimate need for anyone working on the game or its assets, and doing it inside the game itself is awkward.

So the viewer is a place to load an animation and watch it, outside the game. The homepage is at jelosus2.github.io/BD2-L2D-Viewer, which tells you it is deployed to GitHub Pages as a static site, and the primary language is recorded as Vue.

The project is MIT licensed with the copyright held by Jelosus2 for 2025, and the README includes the full licence text rather than just a link, which is the older convention but still a valid one. The author also asks for support through Ko-fi, with the message framed around the work and effort put into the website, and the donation link points at a jelosus1 account.

The last push was on 2026-10-08 and there are no GitHub releases, so the deployed site is the artefact to look at rather than a tagged version.

The dependency list, which explains the whole design

The package.json is short and each entry answers a question about how the viewer works.

The animation engine is @esotericsoftware/spine-player at 4.1.55, which is the official Spine runtime for the web. It is a pinned version rather than a range, which is the right call for a runtime whose output has to match what the game produces.

The rest of the stack is Vue 3.5.13 with Pinia 3.0.1 for state, and Tailwind CSS 4.1.10 served through the @tailwindcss/vite plugin rather than a separate PostCSS step. Vite 8.1.2 is the build tool and dev server, with the Vue plugin at 5.2.3.

Two dependencies are worth calling out because they explain features the README does not mention. jszip at 3.10.1 means the application can read a zip archive, which is how you get a set of animation files out of a game installation without unpacking them by hand. And mediabunny at 1.56.1 is a media library, which points to the viewer handling video as well as animation, or at least handling the media assets that come with the animation data.

The dev dependencies are the standard Vue and Vite set, with the notable choices being npm-run-all2 for the parallel build scripts, jiti for loading TypeScript config files at runtime, and vue-tsc for the type check. The TypeScript version is pinned with a tilde to 5.8.0, and the config packages are the Vue and Node ones from the tsconfig family, with @tsconfig/node22 fixing the Node target at version 22.

The project name in the manifest is still vue-project, which is the scaffolding default from the Vue create tool. That is a small sign that this is a project that started from the standard Vue template and grew into a specific application, rather than one designed from scratch.

The build, and the asset copy step that everything depends on

The scripts show a two-stage build, and the second stage is the interesting one:

  "scripts": {
    "dev": "vite",
    "build": "run-s build-main copy-assets",
    "build-main": "run-p type-check \"build-only {@}\" --",
    "copy-assets": "node scripts/copy-assets.js",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build",
    "lint": "eslint . --fix"

The build script runs build-main and then copy-assets. build-main runs the type check and the Vite build in parallel, and copy-assets runs a Node script called scripts/copy-assets.js. The dev script is plain vite and the preview script is vite preview, and the lint script is eslint with the fix flag.

So the build is: type check and bundle the application, then copy something else into the output. That something is the assets, and the assets are the character animation data, which is not in the repository.

The top level confirms this. There is a public/ directory, a scripts/ directory and a src/ directory, and there is no assets directory of game files. The copy-assets script is what populates the public directory with what the viewer needs to display, and that means the character files have to come from somewhere else, typically from an installation of the game.

That is the single most important practical fact about this project, and it is not stated in the README prose. The deployed site at the GitHub Pages address has the assets because the maintainer's deployment ran the copy step with a local copy of the game's files. If you fork the repository and run the dev server, you are running the viewer with nothing to look at until the copy step finds the game files.

The scripts directory and the public directory are therefore the two places worth reading before anything else, because they define the boundary between the application and the content.

The rest of the top level is a well-organised Vue project. There is a src/ directory, an index.html at the root, a vite.config.ts, a tailwind.config.ts, an eslint.config.ts, three tsconfig files for the app, the node config and the base, an env.d.ts, and a .vscode/ directory. It is a pnpm project with a pnpm-lock.yaml and a pnpm-workspace.yaml, and the .editorconfig, .gitattributes and .github directories are the usual repository hygiene.

What this project is for, and what it is not

It is worth being clear about the boundaries here, because the name of a repository can imply more than it delivers.

This is a viewer. It lets you look at the animations of the characters from one game, in a browser, without launching the game. It is not an animation editor, it is not a Live2D runtime you can build an application on, and it is not a data extraction project.

For a player, the use case is simple. You want to see what a particular animation sequence actually looks like, and you want to do it without a phone, without an emulator and without waiting for a resource to load in a gacha game that wants you to log in. For a modder or an artist working on the game, the same tool is a reference.

The engineering shape follows from that. Because it is one game, the character list and the animation names can be handled as data rather than as a general query system. Because it is a viewer rather than an editor, there is no authoring UI, and the Spine player is used as shipped. Because it is a static site, there is no backend and the whole thing is a build artefact.

That last point has a consequence for anyone thinking about extending it. There is a Pinia store in the dependency list, which suggests the application state is more than a single loaded model, but the store is in service of a viewer with a selection of characters and an animation timeline, not a data layer you would build a service on top of.

The parts you would need to supply to run it yourself are the character assets and the copy step that puts them in place. Everything else, the Vue application, the Tailwind styling, the Vite build and the Spine runtime, is in the repository and is a few hundred megabytes of animation data away from working.

Editorial conclusion

BD2-L2D-Viewer suits a player or a modder who wants to check what a character animation actually looks like frame by frame without launching the game, and the fact that it runs as a static site means you can open it without installing anything. It does not suit you as a base for a Live2D or Spine application of your own, because the package is named vue-project and the project is organised around one game and one set of assets. Before you rely on it, note that the character assets are not in the repository, the top level holds a public/ directory and a scripts/ directory whose copy-assets step fetches what is needed, so you need the game files to try it properly.

Frequently asked questions

Official sources

1. Issues
2. Jelosus2/BD2-L2D-Viewer on GitHub
3. License: MIT
4. Project website
5. README