{"slug": "i-built-chibirigkit-turning-a-single-character-image-into-an-animated-2d-rig", "title": "I built ChibiRigKit: turning a single character image into an animated 2D rig", "summary": "A developer built ChibiRigKit, an open-source MIT-licensed tool that converts a single character illustration into an animated, editable 2D rig. The pipeline uses Codex CLI for AI-assisted preparation such as part separation and asset generation, but the finished character runs entirely on HTML, JavaScript, and assets in the browser without any AI runtime dependency. Head rotation is handled by interpolating between nine reference face configurations, with manual browser controls for fine-tuning eyes, mouth, and other parts.", "body_md": "🎮 **Try the interactive demo first:**\n\n[https://milkc0de.github.io/ChibiRigKit/](https://milkc0de.github.io/ChibiRigKit/)\n\nYou can play with the motion system, try the 9-direction head pose challenge, explore the AI-to-browser pipeline, and launch the actual generated ChibiRigKit browser rig.\n\nIn this post, I'll explain how I built ChibiRigKit and why I designed AI as part of the **creation pipeline**, rather than making it a runtime dependency.\n\nI built **ChibiRigKit**, an open-source tool that turns a single character illustration into an animated 2D character.\n\nIt can add things like:\n\nThe project is available on GitHub under the MIT License:\n\n[https://github.com/milkc0de/ChibiRigKit](https://github.com/milkc0de/ChibiRigKit)\n\nWhat I found most interesting while building it was not simply using AI for image processing.\n\nThe part I wanted to explore was:\n\n**Can AI handle the tedious creation process, while the finished character remains editable and runs without AI?**\n\nThat became the main design idea behind ChibiRigKit.\n\nThe workflow looks roughly like this:\n\n```\nOne character image\n        ↓\nAI-assisted preparation\n        ↓\nSeparate parts and animation assets\n        ↓\nGenerate an editable 2D rig\n        ↓\nAdjust it in the browser\n        ↓\nExport WebM / JSON / ZIP\n```\n\nA normal character illustration can be used as the starting point.\n\nDuring creation, ChibiRigKit prepares things such as:\n\nThe generated character can then be opened in a browser and adjusted interactively.\n\nThis is probably my favorite part of the architecture.\n\nChibiRigKit uses **Codex CLI** during the automatic creation process.\n\nAI helps with tasks such as:\n\nBut once the character has been created, **Codex is no longer required to play or adjust it**.\n\nThe generated character runs using regular browser technology.\n\nConceptually, it looks like this:\n\n```\nCodex / AI\n    ↓\ncreation pipeline\n\nHTML + JavaScript + assets\n    ↓\nruntime\n```\n\nI didn't want the finished character to depend on an AI service just to blink or move its head.\n\nThat means the AI can change, disappear, become more expensive, or be unavailable, while an already-created character can still continue to work.\n\nFor this project, AI is closer to a **creation tool** than a runtime dependency.\n\nBecause character illustrations are messy.\n\nTwo images can have completely different structures.\n\nFor example:\n\nEven when AI gets 90% of the result right, I may still want to move one eye by a few pixels.\n\nSo instead of treating manual correction as a failure, I designed it as part of the workflow.\n\nThe idea is:\n\n```\nAI generates a good starting point\n                +\nhuman adjusts the final appearance\n```\n\nThe browser UI exposes controls for the parts that are likely to need adjustment.\n\nOne of the more difficult problems was head rotation.\n\nSimply rotating a flat head image works, but it quickly looks like exactly what it is:\n\na flat image being rotated.\n\nI didn't want to reconstruct a complete 3D head either.\n\nChibiRigKit instead uses **nine reference face configurations**:\n\n```\ntop-left     top     top-right\n\nleft        center      right\n\nbottom-left bottom  bottom-right\n```\n\nThe animation interpolates between these configurations.\n\nEach direction can also be edited manually in the browser.\n\nThis makes it possible to approximate changes in facial structure while keeping the character fundamentally 2D.\n\nThe character is not secretly a full 3D model.\n\nIt is still a 2D illustration, but with enough structural information to create a stronger sense of depth.\n\nThe face, head outline, hair, and accessories can share a parent head mesh.\n\nThe head rotates around the neck using:\n\nInside that larger movement, smaller components such as the eyes and mouth can still move independently.\n\nThat separation turned out to be important.\n\nNatural-looking idle animation is easier when different motion systems have different behavior.\n\n```\nHead      → slow movement\nFace      → subtle movement\nEyes      → smaller, faster changes\nBlinking  → independent timing\nHair      → delayed / softer motion\n```\n\nSo ChibiRigKit lets these systems be adjusted separately.\n\nYou can make a character whose head barely moves while their eyes move frequently, or do the opposite.\n\nThe browser UI includes controls for motion amount, speed, eye movement, blinking, and head rotation.\n\nI considered making a native GUI application.\n\nInstead, I ended up using the browser for both editing and playback.\n\nThat turned out to be convenient for a few reasons.\n\nSliders, checkboxes, file inputs, and live previews are straightforward.\n\nThe editor and the renderer live in the same environment.\n\nA generated character can contain files like:\n\n```\nindex.html\nassets/\nrig.project.json\nmotion.json\nhead-poses.json\nbackground.json\n```\n\nOpening `index.html` is enough to display the finished character.\n\nMotion settings can be exported as:\n\n```\nmotion.json\n```\n\nHead pose adjustments are stored separately in:\n\n```\nhead-poses.json\n```\n\nBackground configuration is also kept separately.\n\nSo the project is roughly divided into:\n\n```\ncharacter structure\n+\nmotion configuration\n+\nhead poses\n+\nbackground\n```\n\nI like this better than baking every decision permanently into one generated file.\n\nThe data remains editable.\n\nChibiRigKit can export a ZIP containing the files needed to replay and adjust a finished character.\n\n```\nindex.html\nassets/\nrig.project.json\nmotion.json\nhead-poses.json\nbackground.json\nREADME.txt\nLICENSE.txt\n```\n\nThis is intentionally different from the original creation workspace.\n\nThe exported ZIP contains the **finished runtime character**, not all of the AI work history, masks, input material, or Python tooling used to create it.\n\nI wanted a clear separation between:\n\n```\ncreation project\n!=\nfinished artifact\n```\n\nThe browser UI can also record the animation directly as WebM.\n\nRecording duration can be set from 1 to 60 seconds.\n\nDuring recording, the interface shows progress such as:\n\n```\nRecording 12.3 / 30.0 seconds\n```\n\nThe recording automatically stops when the selected duration is reached.\n\nTransparent backgrounds are also supported, although transparency support naturally depends on whatever software is used later to play or edit the video.\n\nChibiRigKit currently expects:\n\nOn macOS:\n\n```\nsh SETUP.command\n```\n\nThen a character can be created with:\n\n```\nsh AUTO_RIG.command \"/Users/yourname/Pictures/character.png\"\n```\n\nFor Linux / macOS with `sh`:\n\n```\nsh AUTO_RIG.sh \"/home/yourname/Pictures/character.png\"\n```\n\nA PowerShell version is also included for Windows:\n\n```\n.\\AUTO_RIG.ps1 \"C:\\Users\\yourname\\Pictures\\character.png\"\n```\n\nThe Windows scripts are included, although the complete workflow has not yet been tested end-to-end on a Windows machine.\n\nGenerated characters are placed under:\n\n```\ncharacters/\n```\n\nMore detailed instructions are available in the repository README.\n\nWhile building this, I started thinking that one of the more useful ways to integrate AI into creative software is not:\n\n```\nprompt\n↓\nfinal output\n```\n\nbut rather:\n\n```\nprompt / source material\n        ↓\nAI\n        ↓\neditable intermediate representation\n        ↓\ntraditional tools\n        ↓\nhuman adjustment\n        ↓\nfinal output\n```\n\nFor ChibiRigKit, that intermediate representation includes things like:\n\n```\nrig.project.json\nmotion.json\nhead-poses.json\nassets/\n```\n\nBecause the AI produces structured, editable output instead of a single final image, both humans and normal software can continue working with it.\n\nThat feels much more useful to me for creative workflows.\n\nAnother thing I learned from this project is that not every part of a workflow benefits from being controlled by AI.\n\nAI is useful for:\n\nBut a person is still very good at answering questions like:\n\nSo ChibiRigKit intentionally returns control to a normal UI after the automated stage.\n\nI think this hybrid approach is more interesting than trying to make every interaction a prompt.\n\nThere are still plenty of difficult cases.\n\nComplex hair, accessories, unusual poses, and heavily stylized characters can require manual correction.\n\nLarge head rotations are also naturally limited by information that simply does not exist in the original 2D image.\n\nSo I want to improve both sides of the system:\n\n```\nbetter automatic generation\n+\neasier manual correction\n```\n\nThe goal isn't necessarily to eliminate human editing completely.\n\nIt's to eliminate as much boring preparation work as possible.\n\nChibiRigKit is open source under the MIT License.\n\nGitHub:\n\nBuilding it started as a simple attempt to make one illustration move.\n\nIt ended up becoming an experiment in how AI can participate in a creative pipeline **without becoming the entire pipeline**.\n\nAnd honestly, seeing a static character image start blinking, looking around, and moving its hair is still pretty fun. 🎀", "url": "https://wpnews.pro/news/i-built-chibirigkit-turning-a-single-character-image-into-an-animated-2d-rig", "canonical_source": "https://dev.to/milkc0de/i-built-chibirigkit-turning-a-single-character-image-into-an-animated-2d-rig-2j36", "published_at": "2026-09-22 10:21:27+00:00", "updated_at": "2026-09-22 10:53:11.086514+00:00", "lang": "en", "topics": ["ai-tools", "generative-ai", "developer-tools", "ai-agents"], "entities": ["ChibiRigKit", "Codex CLI", "GitHub", "milkc0de"], "alternates": {"html": "https://wpnews.pro/news/i-built-chibirigkit-turning-a-single-character-image-into-an-animated-2d-rig", "markdown": "https://wpnews.pro/news/i-built-chibirigkit-turning-a-single-character-image-into-an-animated-2d-rig.md", "text": "https://wpnews.pro/news/i-built-chibirigkit-turning-a-single-character-image-into-an-animated-2d-rig.txt", "jsonld": "https://wpnews.pro/news/i-built-chibirigkit-turning-a-single-character-image-into-an-animated-2d-rig.jsonld"}}