[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-71397":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":25,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":35,"readmeContent":36,"aiSummary":37,"trendingCount":16,"starSnapshotCount":16,"syncStatus":38,"lastSyncTime":39,"discoverSource":40},71397,"kalidokit","yeemachine\u002Fkalidokit","yeemachine","Blendshape and kinematics calculator for Mediapipe\u002FTensorflow.js Face, Eyes, Pose, and Finger tracking models.","https:\u002F\u002Fkalidoface.com",null,"TypeScript",5658,709,77,31,0,3,8,23,9,76.85,"MIT License",false,"main",true,[27,28,29,30,31,32,33,34],"face-detection","hand-detection","mediapipe-facemesh","mediapipe-hands","mediapipe-pose","pose-estimation","tensorflowjs","vtuber","2026-06-12 04:01:00","\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fyeemachine\u002Fkalidokit\u002Fblob\u002Fmain\u002Fdocs\u002Fkalidokit-logo.png?raw=true\" alt=\"Kalidokit Template\" width=\"200ps\" style=\"margin-bottom:10px\"\u002F>\n\n[![NPM Package][npm]][npm-url]\n[![NPM Bundle Size][minimized-size]][npm-url]\n[![jsDelivr hits (npm)][js-delivr]][js-delivr-url]\n[![NPM Downloads][npm-downloads]][npmtrends-url]\n[![Website][website]][website-url]\n[![Discord Shield][discord]][discord-url]\n\n| :exclamation: KalidoKit is now officially deprecated and solutions will be directly integrated into [MediaPipe](https:\u002F\u002Fmediapipe-studio.webapps.google.com\u002Fdemo\u002Fface_landmarker) :exclamation:| \n|--------------------------------------|\n\n## Face, Pose, and Hand Tracking Calculator\n\nKalidokit is a blendshape and kinematics solver for Mediapipe\u002FTensorflow.js face, eyes, pose, and hand tracking models, compatible with [Facemesh](https:\u002F\u002Fgithub.com\u002Ftensorflow\u002Ftfjs-models\u002Ftree\u002Fmaster\u002Fface-landmarks-detection), [Blazepose](https:\u002F\u002Fgithub.com\u002Ftensorflow\u002Ftfjs-models\u002Ftree\u002Fmaster\u002Fpose-detection), [Handpose](https:\u002F\u002Fgoogle.github.io\u002Fmediapipe\u002Fsolutions\u002Fhands.html), and [Holistic](https:\u002F\u002Fgoogle.github.io\u002Fmediapipe\u002Fsolutions\u002Fholistic.html). It takes predicted 3D landmarks and calculates simple euler rotations and blendshape face values.\n\nAs the core to Vtuber web apps, [Kalidoface](https:\u002F\u002Fkalidoface.com) and [Kalidoface 3D](https:\u002F\u002F3d.kalidoface.com), KalidoKit is designed specifically for rigging 3D VRM models and Live2D avatars!\n\nNOTE: This is a JS library meant for developers using Mediapipe pretrained models and not a complete app by itself. Please visit [Kalidoface](https:\u002F\u002Fkalidoface.com) for the full vtuber experience 😉!\n\n\u003Ca href=\"https:\u002F\u002Fglitch.com\u002Fedit\u002F#!\u002Fkalidokit\">\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fyeemachine\u002Fkalidokit\u002Fblob\u002Fmain\u002Fdocs\u002Fkalidokit_glitch.gif?raw=true\" alt=\"Kalidokit Template\" width=\"48%\"\u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fglitch.com\u002Fedit\u002F#!\u002Fkalidokit-live2d\">\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fyeemachine\u002Fkalidokit\u002Fblob\u002Fmain\u002Fdocs\u002Fkalidokit-live2d_glitch.gif?raw=true\" alt=\"Kalidokit Template\" width=\"48%\"\u002F>\u003C\u002Fa>\n\n[![ko-fi](https:\u002F\u002Fko-fi.com\u002Fimg\u002Fgithubbutton_sm.svg)](https:\u002F\u002Fko-fi.com\u002FB0B75DIY1)\n\n## Install\n\n#### Via NPM\n\n```\nnpm install kalidokit\n```\n\n```js\nimport * as Kalidokit from \"kalidokit\";\n\n\u002F\u002F or only import the class you need\n\nimport { Face, Pose, Hand } from \"kalidokit\";\n```\n\n#### Via CDN\n\n```js\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fkalidokit@1.1\u002Fdist\u002Fkalidokit.umd.js\">\u003C\u002Fscript>\n```\n\n## Methods\n\nKalidokit is composed of 3 classes for Face, Pose, and Hand calculations. They accept landmark outputs from models like Facemesh, Blazepose, Handpose, and Holistic.\n\n```js\n\u002F\u002F Accepts an array(468 or 478 with iris tracking) of vectors\nKalidokit.Face.solve(facelandmarkArray, {\n    runtime: \"tfjs\", \u002F\u002F `mediapipe` or `tfjs`\n    video: HTMLVideoElement,\n    imageSize: { height: 0, width: 0 },\n    smoothBlink: false, \u002F\u002F smooth left and right eye blink delays\n    blinkSettings: [0.25, 0.75], \u002F\u002F adjust upper and lower bound blink sensitivity\n});\n\n\u002F\u002F Accepts arrays(33) of Pose keypoints and 3D Pose keypoints\nKalidokit.Pose.solve(poseWorld3DArray, poseLandmarkArray, {\n    runtime: \"tfjs\", \u002F\u002F `mediapipe` or `tfjs`\n    video: HTMLVideoElement,\n    imageSize: { height: 0, width: 0 },\n    enableLegs: true,\n});\n\n\u002F\u002F Accepts array(21) of hand landmark vectors; specify 'Right' or 'Left' side\nKalidokit.Hand.solve(handLandmarkArray, \"Right\");\n\n\u002F\u002F Using exported classes directly\nFace.solve(facelandmarkArray);\nPose.solve(poseWorld3DArray, poseLandmarkArray);\nHand.solve(handLandmarkArray, \"Right\");\n```\n\nAdditional Utils\n\n```js\n\u002F\u002F Stabilizes left\u002Fright blink delays + wink by providing blenshapes and head rotation\nKalidokit.Face.stabilizeBlink(\n    { r: 0, l: 1 }, \u002F\u002F left and right eye blendshape values\n    headRotationY, \u002F\u002F head rotation in radians\n    {\n        noWink = false, \u002F\u002F disables winking\n        maxRot = 0.5 \u002F\u002F max head rotation in radians before interpolating obscured eyes\n    });\n\n\u002F\u002F The internal vector math class\nKalidokit.Vector();\n```\n\n## VRM and Live2D Sample Code\n\nQuick-start your Vtuber app with these simple remixable examples.\n\n### VRM Glitch Template\n\nFace, full-body, and hand tracking in under 350 lines of javascript. This demo uses Mediapipe Holistic for body tracking, Three.js + Three-VRM for rendering models, and KalidoKit for the kinematic calculations. This [demo](https:\u002F\u002Fglitch.com\u002Fedit\u002F#!\u002Fkalidokit) uses a minimal amount of easing to smooth animations, but feel free to make it your own! VRM model from [Vroid Hub](https:\u002F\u002Fhub.vroid.com\u002Fen\u002Fcharacters\u002F6617701103638326208\u002Fmodels\u002F8892157442595230149).\n\n\u003Ca href=\"https:\u002F\u002Fglitch.com\u002Fedit\u002F#!\u002Fkalidokit\">\u003Cimg alt=\"Remix on Glitch\" src=\"https:\u002F\u002Fcdn.gomix.com\u002Ff3620a78-0ad3-4f81-a271-c8a4faa20f86%2Fremix-button.svg\">\u003C\u002Fa>\n\n### Live2D Glitch Template\n\nThis demo uses Mediapipe FaceMesh for face tracking, Pixi.js + pixi-live2d-display for rendering models, and KalidoKit for the kinematic calculations. This [demo](https:\u002F\u002Fglitch.com\u002Fedit\u002F#!\u002Fkalidokit-live2d) uses an official sample Live2D model, [Hiyori](https:\u002F\u002Fwww.live2d.com\u002Fen\u002Fdownload\u002Fsample-data\u002F).\n\n\u003Ca href=\"https:\u002F\u002Fglitch.com\u002Fedit\u002F#!\u002Fkalidokit-live2d\">\u003Cimg alt=\"Remix on Glitch\" src=\"https:\u002F\u002Fcdn.gomix.com\u002Ff3620a78-0ad3-4f81-a271-c8a4faa20f86%2Fremix-button.svg\">\u003C\u002Fa>\n\n### Local VRM and Live2D Examples\n\nInterested in contributing? If you clone this project, the `docs` folder includes both VRM and Live2D KalidoKit templates. Run the `test` script to build the library and start up the dev server. The VRM demo will be hosted on `localhost:3000` and Live2D on `localhost:3000\u002Flive2d\u002F`.\n\n```\nnpm install\nnpm run test\n```\n\n## Basic Usage\n\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fyeemachine\u002Fkalidokit\u002Fblob\u002Fmain\u002Fdocs\u002Fkalidokit-pipeline.png?raw=true\" alt=\"Kalidokit Template\" width=\"100%\"\u002F>\n\nThe implementation may vary depending on what pose and face detection model you choose to use, but the principle is still the same. This example uses Mediapipe Holistic which concisely combines them together.\n\n```js\nimport * as Kalidokit from 'kalidokit'\nimport '@mediapipe\u002Fholistic\u002Fholistic';\nimport '@mediapipe\u002Fcamera_utils\u002Fcamera_utils';\n\nlet holistic = new Holistic({locateFile: (file) => {\n    return `https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@mediapipe\u002Fholistic@0.4.1633559476\u002F${file}`;\n}});\n\nholistic.onResults(results=>{\n    \u002F\u002F do something with prediction results\n    \u002F\u002F landmark names may change depending on TFJS\u002FMediapipe model version\n    let facelm = results.faceLandmarks;\n    let poselm = results.poseLandmarks;\n    let poselm3D = results.ea;\n    let rightHandlm = results.rightHandLandmarks;\n    let leftHandlm = results.leftHandLandmarks;\n\n    let faceRig = Kalidokit.Face.solve(facelm,{runtime:'mediapipe',video:HTMLVideoElement})\n    let poseRig = Kalidokit.Pose.solve(poselm3d,poselm,{runtime:'mediapipe',video:HTMLVideoElement})\n    let rightHandRig = Kalidokit.Hand.solve(rightHandlm,\"Right\")\n    let leftHandRig = Kalidokit.Hand.solve(leftHandlm,\"Left\")\n\n    };\n});\n\n\u002F\u002F use Mediapipe's webcam utils to send video to holistic every frame\nconst camera = new Camera(HTMLVideoElement, {\n  onFrame: async () => {\n    await holistic.send({image: HTMLVideoElement});\n  },\n  width: 640,\n  height: 480\n});\ncamera.start();\n```\n\n## Slight differences with Mediapipe and Tensorflow.js\n\nDue to slight differences in the results from Mediapipe and Tensorflow.js, it is recommended to specify which runtime version you are using as well as the video input\u002Fimage size as a reference.\n\n```js\nKalidokit.Pose.solve(poselm3D,poselm,{\n    runtime:'tfjs', \u002F\u002F default is 'mediapipe'\n    video: HTMLVideoElement,\u002F\u002F specify an html video or manually set image size\n    imageSize:{\n        width: 640,\n        height: 480,\n    };\n})\n\nKalidokit.Face.solve(facelm,{\n    runtime:'mediapipe', \u002F\u002F default is 'tfjs'\n    video: HTMLVideoElement,\u002F\u002F specify an html video or manually set image size\n    imageSize:{\n        width: 640,\n        height: 480,\n    };\n})\n```\n\n## Outputs\n\nBelow are the expected results from KalidoKit solvers.\n\n```js\n\u002F\u002F Kalidokit.Face.solve()\n\u002F\u002F Head rotations in radians\n\u002F\u002F Degrees and normalized rotations also available\n{\n    eye: {l: 1,r: 1},\n    mouth: {\n        x: 0,\n        y: 0,\n        shape: {A:0, E:0, I:0, O:0, U:0}\n    },\n    head: {\n        x: 0,\n        y: 0,\n        z: 0,\n        width: 0.3,\n        height: 0.6,\n        position: {x: 0.5, y: 0.5, z: 0}\n    },\n    brow: 0,\n    pupil: {x: 0, y: 0}\n}\n```\n\n```js\n\u002F\u002F Kalidokit.Pose.solve()\n\u002F\u002F Joint rotations in radians, leg calculators are a WIP\n{\n    RightUpperArm: {x: 0, y: 0, z: -1.25},\n    LeftUpperArm: {x: 0, y: 0, z: 1.25},\n    RightLowerArm: {x: 0, y: 0, z: 0},\n    LeftLowerArm: {x: 0, y: 0, z: 0},\n    LeftUpperLeg: {x: 0, y: 0, z: 0},\n    RightUpperLeg: {x: 0, y: 0, z: 0},\n    RightLowerLeg: {x: 0, y: 0, z: 0},\n    LeftLowerLeg: {x: 0, y: 0, z: 0},\n    LeftHand: {x: 0, y: 0, z: 0},\n    RightHand: {x: 0, y: 0, z: 0},\n    Spine: {x: 0, y: 0, z: 0},\n    Hips: {\n        worldPosition: {x: 0, y: 0, z: 0},\n        position: {x: 0, y: 0, z: 0},\n        rotation: {x: 0, y: 0, z: 0},\n    }\n}\n```\n\n```js\n\u002F\u002F Kalidokit.Hand.solve()\n\u002F\u002F Joint rotations in radians\n\u002F\u002F only wrist and thumb have 3 degrees of freedom\n\u002F\u002F all other finger joints move in the Z axis only\n{\n    RightWrist: {x: -0.13, y: -0.07, z: -1.04},\n    RightRingProximal: {x: 0, y: 0, z: -0.13},\n    RightRingIntermediate: {x: 0, y: 0, z: -0.4},\n    RightRingDistal: {x: 0, y: 0, z: -0.04},\n    RightIndexProximal: {x: 0, y: 0, z: -0.24},\n    RightIndexIntermediate: {x: 0, y: 0, z: -0.25},\n    RightIndexDistal: {x: 0, y: 0, z: -0.06},\n    RightMiddleProximal: {x: 0, y: 0, z: -0.09},\n    RightMiddleIntermediate: {x: 0, y: 0, z: -0.44},\n    RightMiddleDistal: {x: 0, y: 0, z: -0.06},\n    RightThumbProximal: {x: -0.23, y: -0.33, z: -0.12},\n    RightThumbIntermediate: {x: -0.2, y: -0.19, z: -0.01},\n    RightThumbDistal: {x: -0.2, y: 0.002, z: 0.15},\n    RightLittleProximal: {x: 0, y: 0, z: -0.09},\n    RightLittleIntermediate: {x: 0, y: 0, z: -0.22},\n    RightLittleDistal: {x: 0, y: 0, z: -0.1}\n}\n```\n\n## Community Showcase + Contributing\n\nIf you'd like to share a creative use of KalidoKit, please reach out or send a pull request! Feel free to also use our Twitter hashtag, [#kalidokit](https:\u002F\u002Ftwitter.com\u002Fsearch?q=%23kalidokit).\n\nKalidoface\u002FKalidoKit also now has a [Discord server][discord-url]! Come and join us!\n\nThe current library is a work in progress and contributions to improve it are very welcome! Some plans include: better facial blendshapes, full leg tracking, and improved efficiency.\n\n[![Kalidoface virtual webcam](https:\u002F\u002Fraw.githubusercontent.com\u002Fyeemachine\u002Fkalidoface-live2d-models\u002Fmain\u002Fpromo\u002FTW-Promo-short.gif)](https:\u002F\u002Fkalidoface.com) [![Kalidoface Pose Demo](https:\u002F\u002Fcdn.glitch.me\u002F29e07830-2317-4b15-a044-135e73c7f840%2Fkalidoface-pose-dance.gif?v=1633453098775)](https:\u002F\u002F3d.kalidoface.com)\n\n[npm]: https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fkalidokit\n[npm-url]: https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fkalidokit\n[minimized-size]: https:\u002F\u002Fimg.shields.io\u002Fbundlephobia\u002Fmin\u002Fkalidokit\n[js-delivr]: https:\u002F\u002Fimg.shields.io\u002Fjsdelivr\u002Fnpm\u002Fhw\u002Fkalidokit\n[js-delivr-url]: https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002Fkalidokit\n[website]: https:\u002F\u002Fimg.shields.io\u002Fwebsite?down_color=lightgrey&down_message=offline&up_color=brightgreen&up_message=online&url=https%3A%2F%2Fkalidoface.com\n[website-url]: https:\u002F\u002Fkalidoface.com\n[npm-downloads]: https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdw\u002Fkalidokit\n[npmtrends-url]: https:\u002F\u002Fwww.npmtrends.com\u002Fkalidokit\n[discord]: https:\u002F\u002Fdiscordapp.com\u002Fapi\u002Fguilds\u002F869435838746984468\u002Fwidget.png?style=shield\n[discord-url]: https:\u002F\u002Fdiscord.gg\u002FXMqdfzVZ2E\n","Kalidokit 是一个用于计算Mediapipe\u002FTensorflow.js面部、眼睛、姿势和手部跟踪模型的混合形状与运动学参数的库。其核心功能包括根据预测的3D地标点计算简单的欧拉旋转角度及面部混合形状值，支持Facemesh、Blazepose、Handpose以及Holistic等多种模型。该项目特别适用于虚拟主播（Vtuber）应用程序中3D VRM模型和Live2D角色的绑定工作。作为面向开发者的JavaScript库，它旨在配合Mediapipe预训练模型使用，而非独立应用。对于想要实现完整vtuber体验的用户，建议访问Kalidoface官网获取更多信息。",2,"2026-06-11 03:37:31","high_star"]