Intro
AI Avatar is a completely free app that lets your VRoid (VRM) 3D avatar animate in response to AI chat and the Enter key in VS Cod...
For further actions, you may consider blocking this person and/or reporting abuse
Congrats on the 200+ installs 🎉
I like how each update adds something new, and the contextual messages were probably my favorite addition from this one. Looking forward to seeing what's next in v16 😀
Thank you for your feedback! 😆 Contextual messages make the avatar feel more alive, so I'm thinking of adding more variations in future updates to make AI Avatar feel even more alive.
Great job! I like that you're reusing your previous projects, like Millionaire Mode — it adds more variety to AI Avatar 😄
Thank you for your comment! 😄 Yes, the Gold Fountain and Roller Coaster are two of my favorite and most successful projects, so I wanted to reuse them, and I finally did! I'd like to add even more variety to AI Avatar in future updates!
Really cool update! Love the collab energy with RutenVeil, and the CTO/CMO jokes had me smiling. Rollercoaster mode is such a fun idea. Letting the avatar keep riding instead of just taking one quick ride makes it even more fun.
Thank you for your comment! 😄 Thanks to RutenVeil, I was able to update AI Avatar once again. Haha! You could be the CNO (Chief Next.js Officer)! 🤣 Yes, I'd love to improve the animations even more in future updates.
🙂 I'll happily take the CNO title! Looking forward to seeing what you come up with in v16. Keep up the great work!
Thank you! I'm happy to have a reliable CNO friend! 🤣
Have you considered a pet for the avatar? I have a working pet that speaks on my desktop. Meet catbot! I might be interested in seeing how I can make an avatar companion if you are interested!
Thank you for stopping by! 😸 Are you talking about a collaboration? I'd love to use your CatBot! By the way, I released AI Avatar v16 with Cat Mode! 😺 It includes cat sounds, cat poses, and cat messages like "Meow" and "Purrr." I'm also thinking about adding even more pet care features in future updates.
Demo with sound ↓
youtube.com/shorts/2KteUU287zA
yes i was thinking about a potential collaboration. I think it would be interesting, I really need to do some group projects. I feel like almost everything I do is solo. haha. And I was thinking maybe I could make a different version of catbot or maybe another animal for this use case. open to ideas. a parrot for the shoulder? pikachu? hahaha
Great!😆 I'd love to make AI Avatar work with your app, your cat, a bird on the avatar's shoulder, or even other avatars. I'm open to any other ideas as well! By the way, are you on X? If so, could we create a group chat with my collaborator, @rutenveil?
X is probably the only platform I do not use. LOL What about discord/facebook/linkedIn?
Every time I read one of these update posts I feel like AI Avatar becomes a little less like a project and a little more like its own tiny ecosystem.
What I enjoy most isn't even a specific feature anymore, it's seeing contributors add their own personality to the project. The collaboration with @rutenveil is a great example of that. It makes the updates feel like they're coming from a team rather than a single developer.
The contextual messages are actually one of my favourite additions because they're subtle. They're not flashy, but they make the avatar feel much more alive.
Looking forward to seeing what kind of chaos version 16 brings. 😄
Thank you for your comment! Yes, this time @rutenveil kindly helped create the amazing visual effects. AI Avatar has grown much bigger than I originally expected. I should make sure it doesn't turn into a good old legacy project!🤣 The problem is that I usually spend more time adding new features than refactoring the code, so it's heading straight toward becoming good old legacy project!🤣
Separating static positioning from the animated styles because
transformin@keyframesoverrides a class-basedtransformis a genuine gotcha that trips people up constantly. Quick question on how the Idol Stage timeline holds together: with three animations stacked on one element by comma (fade in, loop, fade out) and each set to its own delay, did you ever hit the loop and the fade-out fighting overtransformat the seams, or does giving each phase its own property keep them out of each other's way? Curious how you kept a 0.1s-precision timeline in sync purely in CSS without a JS clock nudging it.Hi Nazar, thanks for reading the article and asking a question!
You hit the nail right on the head.
Here is how I handled those potential conflicts and kept the timeline in sync:
Property Separation: As you guessed, I kept properties isolated—using opacity (and filter) for FadeIn/FadeOut, while reserving transform strictly for the waving/swinging motion. Since they target different properties, they don’t fight each other at the seams.
Embedding Static Positions into Keyframes: To keep the initial layout consistent, I calculated and baked the baseline translateX and translateY values directly into the @keyframes (at 0% and 100%) for the waving animations.
Pure CSS Absolute Timeline: Without a JS clock, I mapped out the entire 11.5-second sequence on paper first and relied strictly on animation-delay and durations calculated relative to time zero.
It definitely required a lot of fine-tuning, but separating the concerns by CSS properties was key to making it rock solid!
did not expect the VRoid TTS combo to feel useful vs just visually fun. collaborations like this one tend to elevate the polish ceiling in ways solo builders rarely hit alone.
Thank you for your comment! 😄 Yes, with my design skills, I could never create such cool effects on my own, so I'm really grateful to RutenVeil for helping me build AI Avatar together. Adding TTS was also a lot of fun, and it's a really interesting feature. I think there's still a lot more I can improve, especially the response speed. I'm looking forward to experimenting with it even more in future updates.
What I like here is the tool living close to the work surface. Avatars and TTS often feel like separate toys, but putting the interaction inside VS Code or the browser makes it closer to an ambient interface. The hard part will be keeping it useful without becoming another attention layer.
Thank you for your comment! 😀 Yes, I'm interested in using the latest AI technologies, such as TTS. However, it's also important to keep the world of AI Avatar consistent. I'm trying not to make it too chaotic by balancing improvements to existing features with the addition of new ones.
That balance is the right constraint. The danger with avatar/TTS tooling is that every new capability is tempting because it demos well. The product gets more useful when the new pieces reinforce one coherent interaction model instead of turning the workspace into a pile of effects.
Amazing! 🔥 That’s a huge update with so many great features. Awesome work, guys!
I can’t even pick a favorite feature 😅🤣 Looking forward to installing and testing this update!
Thank you for checking! 😊 I hope you'll find lots of new features that you'll enjoy. I'd be even happier if you end up loving all of them!
Wow! great job. I love your new AI avatar. You are improving all the time :).
Thank you for checking! 😄 I still have lots of fun ideas for improving AI Avatar, including new AI and animation features, so please stay tuned!
I can't wait
Thanks! Web Developer Hyper!!
Thank you very much for your collaboration! 😄 Thanks to you, we were able to make AI Avatar even better than before with those gorgeous effects. Let's keep it up!
Hey mang! Why not be able to use OpenAI API?
Thank you for your feedback! 😃 Unfortunately, Claude Code is the only paid AI service I'm using at the moment. However, I'll consider using the OpenAI API as I add more paid AI features. Since the OpenAI API is one of the most popular AI APIs, I think it could help me create many more fun features and updates.
Ai avatar looks like me!! LoL
Great update ❤️
AI Avatar's mission is to cheer up developers and make everyone happy. So you must be the real AI Avatar! 😆
good job! Vscode's extension is a execllent thing
Thank you! 😃 Yes, releasing a VS Code extension was quite easy. Once I'd made the VS Code extension, it was also easy to release it as a Chrome extension.
SO Cool!
Thank you for checking it out! 😄 Your Samoyed is adorable! 🐶
Brooo, it looks amazing😁
Thank you for the compliment! 😀 I'm glad you like it!
As someone exploring AI automation, it's interesting to see how AI can also improve the overall user experience, not just productivity.
Thank you for checking it out! 😃 Yes, AI Avatar's mission is to support its users, so I'd like not only to add new features but also to keep improving the user experience.
Amazing Update, Thanks for keeping me intrigued
Thank you for the compliment! 😃 I'm planning to add more intriguing features, so please stay tuned!