Cool Effects, TTS, and Fun Animations (AI Avatar v15: VS Code and Chrome Extension)

AI Avatar, a free app that animates VRoid 3D avatars in response to AI chat and keyboard input in VS Code and Chrome, released version 15 with major updates. The update includes new visual effects created by developer RutenVeil, such as the 'Idol Stage' CSS animation theme, and adds Text-to-Speech support with multiple options including Gemini TTS, Web Speech API, Kokoro, and VOICEVOX. The app also introduces fun 3D animations like Golden Fountain and Roller Coaster, and contextual messages that change based on time and situation.

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 Code and Chrome Edge . AI Avatar's mission is to cheer developers and everyone and make them happy . There are 4 big updates to AI Avatar since the last version. What I want to emphasize most is the collaboration with my friend RutenVeil. RutenVeil created super cool background effects and a loading effect for AI Avatar. They made AI Avatar even more attractive than before. Also, last time, I finally added API-based AI and local LLMs. So this time, I added another AI superpower, TTS Text-to-Speech . Now AI Avatar can speak, and this feature will make AI Avatar even closer to you. Moreover, I added fun 3D animations, Golden Fountain and Roller Coaster that will entertain you. In addition, I added contextual messages. So messages will be different depending on the day, time, and situation. Let's take a look at the new features Hi, I’m @rutenveil https://dev.to/rutenveil . I contributed to the visual effects section of the v15 update of the AI Avatar app. This is part of a collaborative article, and I am not the main author of the app. For this update, I created a set of CSS animation-based visual effects to make the app feel more dynamic and expressive. The v15 update includes six different visual themes: Each theme explores a different visual world. In this article, I’ll focus on the “Idol Stage” effect , which is built around a highly precise timeline design down to 0.1s units . I’ll also share some of the implementation details and the challenges I faced during development. In this implementation, the screen is structured using multiple layered div s, separated into layers such as top, middle, avatar, and bottom . This creates a structure similar to Photoshop layers. By stacking layers in depth, we can achieve strong visual perspective and depth, even though all assets are simple flat illustrations or vector shapes. The result is a sense of 3D space that holds up against a 3D avatar. Another benefit of this structure is maintainability. Because each layer is separated, it becomes easier to control and adjust later. During development, I ran into issues where animations did not behave as expected due to CSS conflicts caused by declaration order and style overriding. After investigation, I found that CSS follows strict rules where transform inside @keyframes takes priority over static class-based transform . To solve this, I completely separated: Each responsibility was moved into independent classes. This design removed conflicts in animation priority and made all effects run in perfect sync, resulting in a more stable and predictable system. In the “Idol Stage” effect, each light or glow element is controlled using multiple animations on a single line. Each element follows a three-stage timeline: These are combined using comma-separated animations in CSS. Example: .psy-purple { transform: translateX 0% rotate 8deg translateY 33% ; animation: psyFadeIn 0.4s ease-out forwards 1s, psyWavingPurple 0.13s ease-in-out infinite alternate 1.4s, fadeOutLight 0.2s ease forwards 11.4s; } This approach allows precise control over multiple visual states within a single element, enabling complex choreography-like motion in pure CSS. I added several TTS Text-to-Speech options, Gemini TTS , Web Speech API , Kokoro , and VOICEVOX . Gemini TTS is high quality and fast, but with the free plan, I could use it only 10 times a day. That is too little for the daily use of AI Avatar because it speaks a lot. The Web Speech API is free, fast, and unlimited, but it sounds like a robot with no emotions. So I also added local TTS models, Kokoro for English and VOICEVOX for Japanese. They are reasonably natural. However, Kokoro is a little heavy to run locally. As for VOICEVOX, users have to install it themselves beforehand, which takes a little extra effort. So, if you're rich unlike me , pay for Gemini TTS and enjoy its fast, high-quality speech. | TTS Text-to-Speech | Advantages | Disadvantages | |---|---|---| Gemini TTS | High quality and fast | Free for 10/day, pay to use | Web Speech API | Fast and free | Robotic-voice | Local TTS models | Reasonably natural | Heavier than others, need setup | As AI Avatar uses VRM 3D avatars, I also didn't forget to add fun Three.js 3D animation updates. I added Millionaire Mode. This mode bursts gold coins like a fountain. It is a remake of one of my previous projects, which was one of my biggest hits. I am glad I had a chance to reuse my old project and save development time. You can choose between a gold coin fountain and a pink diamond fountain. If you want to feel even richer or just like the color pink, choose the pink diamond fountain. Of course, everybody likes money, right? This mode is recommended for developers who love money but don't have enough of it, like me. The key to making this feature performant is that it doesn't calculate collisions for every coin, making the animation much lighter. I also added Rollercoaster Mode. It is also a remake of one of my previous biggest-hit projects. Roller coasters are fun, but we can enjoy them only for a short time. With this mode, you can enjoy a roller coaster as much as you like. I added three versions, Default, Rainbow, and Water. The avatar slides along the track on a board like a skateboard with excellent balance and never falls off the small board. This mode is made with RollerCoaster.js from Three.js. AI Avatar has fixed cheering messages. Although you can add and edit them, fixed messages make the avatar feel robotic. So I added a contextual message feature. Now AI Avatar checks the day, hour, and time, and changes its messages accordingly. Here are the contexts I set. AI Avatar responds with the highest-priority message. | Priority | Condition | Example Messages | |---|---|---| | 1 | Special day holiday | "Happy Halloween 🎃" | | 2 | Session count milestone | "10th reaction today 🎉" | | 3 | Long time since last reaction | "Welcome back Missed you 💕" | | 4 | Long session | "You've been at it for an hour 🔥" | | 5 | Day of week | "Happy Monday Let's go ⚡" | | 6 | Time of day | "Good morning ☀️" | | 7 | AI / fixed pool | Normal reaction message | I added more default animations. It only had blinking before, so I added random small tilts to the head, chest, and body. Tilting the head and chest was easy because I just needed to add a tilt. However, when tilting the whole body, the opposite leg floated and looked weird, so I needed to adjust the leg to keep it on the ground. Even though users can change the avatar's character through prompts, I added several default characters for easier use, Cute, Energetic, and Cool. Now users can quickly change the character to match their mood. You can download the AI Avatar VS Code extension in two ways. Option 1: Install from VS Code: Extensions button in the left sidebar Search AI Avatar Install ↓↓ Option 2: Install from the VS Code Marketplace: https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar ↓↓ Install from Chrome Web Store: ↓↓ https://chromewebstore.google.com/detail/ai-avatar/afmcfaeaaojalninahhhjnonhmlmiidi https://chromewebstore.google.com/detail/ai-avatar/afmcfaeaaojalninahhhjnonhmlmiidi My friend and CDO Chief Design Officer 🤣, @rutenveil https://dev.to/rutenveil helped create the cool effects. Thank you very much My DEV Community friend and CTO Chief Technology Officer 🤣, @gramli https://dev.to/gramli helped update AI Avatar in version 2, and keeps supporting me. Thank you very much My DEV Community friend and CMO Chief Marketing Officer 🤣, @itsugo https://dev.to/itsugo . Our avatar collaboration project was the beginning of AI Avatar, and keeps supporting me. Thank you very much My colleague Maximum Blue helped make unique avatars in version, 6 and keeps supporting me. Thank you very much I'm already working on the version 16 update. More fun updates, so please stay tuned Ah It's time to take a ride on the roller coaster, so I have to go now. I would love to add more fun features and also use latest AI in my next updates. I hope you enjoy recharging your batteries for tomorrow with AI Avatar. Thank you for reading, and have a great AI Avatar life Any other comments are also welcome