Bible Strong Avatar Lab
Bible Strong Avatar Lab is a browser-based authoring studio for procedural 2D avatars. It combines 3D-inspired geometry with SVG rendering so you can construct a character, define its neutral appearance, create expressions, compose reusable animations, and export the result without depending on the Studio UI.
Website: avatars.bible-strong.app · Source: GitHub
The application runs entirely in the browser. Projects are stored locally and can be moved between browsers with JSON export/import; no account or backend is required.
What you can do
- Create, rename, duplicate, reorder, and delete avatars.
- Build a body from a primary facial surface and additional 3D-inspired primitives.
- Adjust dimensions, roundness, position, local rotation, perspective, colors, and wireframe guides.
- Edit each eye independently or link their size, proportions, and position.
- Manipulate the avatar directly on the canvas with translation and rotation controls.
- Save, duplicate, reorder, and delete reusable expressions.
- Add temporary body and eye color overrides to an expression.
- Add subtle ambient movement to the body and eyes.
- Build animations from expression steps with custom hold times and transitions.
- Choose loop, play-once, or ping-pong playback and configure automatic blinking.
- Preview, play, pause, and stop animations inside the Studio.
- Take SVG or PNG snapshots with transparent, solid, linear-gradient, or radial-gradient backgrounds.
- Export one portable
.avatar.json definition for React or framework-free JavaScript/ESM.
- Export and import the complete Studio project as JSON.
- Use the interface in English, French, or Simplified Chinese.
How the Studio works
The workspace has a live canvas on the left and an inspector on the right. Start by selecting an avatar, then move through the four main areas:
- Pose — inspect a temporary pose or open the avatar editor to change the character's durable body, colors, and neutral eyes.
- Expressions — create named visual presets. Expression eye values are relative to the avatar's neutral appearance, so the same behavior remains compatible with different body surfaces.
- Animations — arrange expressions on a timeline, tune step duration and transition style, choose a playback mode, and configure blinking.
- Export — choose animations to include, download an integration package, configure Photo Mode, or back up the full Studio project.
Changes to the Studio document are saved automatically in browser local storage. Unsaved edits inside an avatar, expression, or animation editor can still be cancelled. Use Export → Studio project to create a portable JSON backup before clearing browser data or moving to another device.
Avatars and behavior libraries
An avatar owns its body geometry, colors, and neutral eye appearance. Expressions and animations initially come from the bundled base behavior library.
When an avatar's expressions or animations are edited for the first time, the Studio copies both collections into an avatar-specific behavior library. From that point on, behavior changes affect only that avatar. Duplicating an avatar also duplicates its custom behavior, and transferring an animation includes every expression it references.
This copy-on-write model lets multiple avatars share the defaults without accidental cross-avatar edits while keeping customized characters fully independent.
Export formats
Avatar definition
The selected avatar and animations are stored in one portable .avatar.json definition. React and
JavaScript use this exact same file, so visual behavior does not diverge between renderers.
Runtime packages
Four MIT-licensed npm packages render the definition. Choose by target:
The three renderers depend on avatar-core for validation, playback and geometry, and share one
API: createAvatar for a definition known at build time, the same props or options, the same
controller (play, pause, stop, setExpression, getState) and the same typed errors.
Each package README is written to be followed step by step, by a person or by a coding agent:
setup, a minimal example, every prop, every error with its fix, and a checklist to verify the
integration. It ships in the npm tarball, so it is readable in node_modules. The Studio's
Export tab offers the three integrations and copies the same instructions, written for a coding
agent: setup, example, props, every error with its fix, and a checklist.
The integration ZIP of the JavaScript export contains the .avatar.json, a lightweight ESM wrapper
and usage instructions; it does not copy the rendering engine into every avatar export.
Photo Mode
Photo Mode exports the currently rendered avatar as SVG or PNG. You can choose the resolution and use a transparent, solid, linear-gradient, or radial-gradient background.
Studio project
The JSON project file contains the complete current document: avatars, base and avatar-specific behavior libraries, expressions, animations, and playback selection. Importing a project replaces the current local document after confirmation.
以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗
