Forem: Web Developer Hyper

AI Avatar Chrome Extension v7 got released! 🎉 Please enjoy both the VS Code extension and Chrome extension!

Web Developer Hyper — Sat, 09 May 2026 05:44:45 +0000

MediaPipe-powered webcam motion capture

Web Developer Hyper

May 6

🫡We'll Support You with All Our Might (AI Avatar v7: Pose Capture and More (VS Code and Chrome Extension))

#discuss #ai #webdev #javascript

Comments 22

6 min read

🫡We'll Support You with All Our Might (AI Avatar v7: Pose Capture and More (VS Code and Chrome Extension))

Web Developer Hyper — Wed, 06 May 2026 03:38:45 +0000

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 Code and Chrome (Edge). I have been creating and updating AI Avatar with the mission of cheering, supporting, and making everyone feel happy. There was a long holiday called Golden Week in Japan. So I committed myself to updating AI Avatar and made many updates. I hope you will enjoy them, so let's take a quick look.🚀

Pose Capture 📸

AI Avatar has a built-in Animation Editor, and I'm keeping updating it to make animation easier. However, it takes time to make an animation. We need to set each part of the body’s XYZ axis degrees. So this time, I tried motion capture. You can take a picture of your pose with a web camera and convert it to JSON data for animation. I used a famous library, Google's MediaPipe, for this. I tried many things to improve the accuracy, like adding calibration, removing abnormal values, capturing not only one frame but many frames and averaging them, and others. I skipped face and finger motion capture to make it simple this time. Also, I couldn't capture the legs. My room is too small, and I cannot capture the legs in the frame... Motion capture is deep and fun, so I might try face capture, real-time capture, or animation capture another time!

Positive/Negative Checker (VS Code Only) ❤️

Keeping our mental health is hard as a developer. Especially when fighting bugs every day like me. I created a positive/negative word checker. When you send Claude Code a request that includes positive words like "good," the avatar smiles, a heart is displayed, and the heart count increases. On the other hand, when you send a Claude Code request that includes negative words like "bad," the avatar makes a sad face, a broken heart is displayed, and the heart count decreases. You can customize the positive/negative words as you like. Let's feel positive and happy with the positive/negative word checker!

Prompt Checker (Beta) (VS Code Only) 🧐

AI responses, including Claude Code, are quite affected by the prompt you send. So I added a prompt checker to the app. When you input a prompt and push the check button, you can get improvement advice instantly. It does not use AI, so the running cost is free. I just used pattern matching for the check. It will give advice like making the prompt less vague and more specific. I might make the pattern matching editable and add more patterns in the future. Otherwise, I might use AI to make this function better. I hope this function will help with better prompt creation and lead to more efficient use of AI.

Giant Mode (Chrome (Edge) Only)

The avatar is trapped in the side panel by default and looks cramped. So this time, I made Giant Mode and let the avatar be free from the side panel, move around the web page, and resize larger. I first used a popup to implement this. However, if I touch the web page, the popup gets hidden and disappears. Also, I could not click the background links of the popup. These seemed to be a bad user experience. So I tried to use an overlay. Using this, I could avoid the drawbacks above. However, when I move to the next page, the overlay disappears, so I made it recreate the overlay every time I move to the next page. I hope you can feel the avatar closer to you with this new function.

Random Animation Player

I preset 4 default animations for the avatar, and you can add more with the built-in Animation Editor. However, I thought it would be more fun if there were more animation patterns available easily. So I made a random animation play button. I split the patterns into 4 blocks: expression, body + arms, legs, and fingers, and made templates for each of them. This way, I could make the poses more natural than making everything completely random. Now the random animation mode has 3 expressions * 4 body + arms * 4 legs * 4 fingers = 256 patterns. I want to make this random animation pattern editable and add more patterns in the future.

Expressions in Animation Editor

In the previous version, there were no expression settings in the Animation Editor. Expressions change the mood of the avatar a lot, so I added expressions. I only added default (straight face), happy, and wink this time, because I want users to feel happy. I might add more expressions later.

Click Triggers Animation (Chrome (Edge) Only)

In the previous version, only the Enter key triggered animations in Chrome (Edge) mode. However, I realized that users click more than they press the Enter key on web pages. So I added clicking as a trigger for animations. Now, I hope users can enjoy the avatar's animations better than before.

How to Use the AI Avatar Chrome Version

~~※ Chrome v7 is currently under review. I will announce when it is released.~~ → Released on 5/9! 🎉
Install from Chrome Web Store: ↓↓
https://chromewebstore.google.com/detail/ai-avatar/afmcfaeaaojalninahhhjnonhmlmiidi

How to Use the AI Avatar VS Code Extension Version (Thank you 100+ installs!)

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 ↓↓

Special Thanks

My DEV Community friend @gramli helped update AI Avatar in version 2 and keeps supporting me. Thank you very much!
My colleague Maximum Blue helped make unique avatars in version 6. Thank you very much!

Version 8 Update

I'm already working on the version 8 update. More fun updates, so please stay tuned!

Update Ideas

Add or update more helpful functions.
Add or update more AI features.
Add or update more avatars and animations.
Update the Pose Capture, Prompt Checker, and Animation Editor to make them more convenient.

If you have any update ideas, please let me know!

Collab Project in Progress

I'm also working on a collab project with my DEV Community friend @itsugo. Version 2 is almost ready!

More about Animation and AI

My posts about fun 2D/3D animation. ↓

Also, here are my posts about AI. ↓

My Brain Training App (Muscle Brain) 💪🧠

Available as Chrome Extensions for Free
https://chromewebstore.google.com/detail/muscle-brain-ultimate-edi/nmlolddnfpfambkcnplggphjgbjeabfc

Available on Microsoft Store for Free
https://apps.microsoft.com/detail/9NG572QMV56M

Outro

Ah! It's time to update and make AI Avatar better. I have to go now. Let's meet again next time with you, me, and our avatars. Thank you for reading. See you!🫡

Comments Welcome!

Do you have any ideas to make AI Avatar more helpful for users?
Do you have any ideas for making cool avatars and animations?
Do you have any ideas to add more AI features?
Do you have any ideas to make AI Avatar even more fun?
Do you have any ideas for increasing the number of users of AI Avatar?

Any other comments are also welcome!

🦸Let Superheroes Cheer You Up (AI Avatar v6: Chrome Extension + VS Code Extension)

Web Developer Hyper — Tue, 21 Apr 2026 03:36:52 +0000

Intro

I created an AI avatar, a VRM 3D character that reacts when you chat with AI or press Enter, and I keep updating it. I have been using the same avatar (Ninja Girl) as the default avatar from the beginning. Although you can change the avatar to your own, it would be more fun if there were several default avatars and each had its own animations and stories. We can change the avatars based on our mood. This time, my coworker Maximum Blue helped me make avatars. Thanks a lot!

Version 6 Update

Joyful Colors is a group that is gathered with a mission to cheer developers and other people up and make them feel happy. They will cheer you up 24/7 through VS Code extension and Chrome (Edge) extension. Let's take a look at the superhero characters!

Sweet Purple (Creater: Blue) ↑
Bright and cheerful.
Wants to be a famous pop star and eat yummy things.
Makes cute poses.

Candy Pink (Creater: Hyper) ↑
Another face of the sample avatar (Ninja Girl).
kind and considerate.
Good at making fake smiles.
Makes cute poses.

Maximum Blue (Creater: Blue) ↑
Active and full of energy.
Girls fall in love when their eyes meet his.
Makes cool poses.

Hyper Yellow (Creater: Blue) ↑
Always trying to make a cool app, but always ends up making a silly app.
He thinks Purple and Pink like him, but they are just using him.
Makes silly poses.

You can download all the avatars and animations for free from GitHub Releases. ↓
https://github.com/webdeveloperhyper/ai-avatar/releases

Version 5 Updates

I also made several updates, fixes and adjustments.

Added bones to the fingers. In the previous versions, the hands were always open. Now we can make peace signs and close the hands. This makes the avatar more lively.

Changed the values of animation from radians (e.g., 1.57) to degrees (e.g., 90), so that we can understand them intuitively. I also kept backward compatibility for the old files.

Made the background gray. I realized that when the avatar is wearing black gloves, we cannot see them well because the background is black. Now users can choose the background color from black or gray.

Fixed the Enter key in the terminal to trigger animations (VS Code). Users can enjoy the animations in more situations with this update.

How to Use the AI Avatar Chrome Version

Install from Chrome Web Store: ↓↓
https://chromewebstore.google.com/detail/ai-avatar/afmcfaeaaojalninahhhjnonhmlmiidi

How to Use the AI Avatar VS Code Extension Version

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 ↓↓

Special Thanks

My DEV Community friend @gramli helped update AI Avatar in version 2 and keeps supporting me. Thank you very much!

Version 7 Update

I'm already working on the version 7 update. More fun updates, so please stay tuned!

Update Ideas

Add more AI features.
Add more triggers for when the avatar reacts.
Add more adjustable parameters.
Add more avatars and animations.
Update the animation editor to make it more convenient.

If you have any update ideas, please let me know!

Collab Project in Progress

I'm also working on a collab project with my DEV Community friend @itsugo. Slowly, but still moving forward. I'll write a post about it soon.

More about Animation and AI

My posts about fun 2D/3D animation. ↓

Also, here are my posts about AI. ↓

My Brain Training App (Muscle Brain) 💪🧠

Available as Chrome Extensions for Free
https://chromewebstore.google.com/detail/muscle-brain-ultimate-edi/nmlolddnfpfambkcnplggphjgbjeabfc

Available on Microsoft Store for Free
https://apps.microsoft.com/detail/9NG572QMV56M

Outro

Ah! It's almost time to go to Sweet Purple's concert with Maximum Blue. I have to go now. Let's go to the concert with you, me, and our avatars next time. Thank you for reading. See you!🫡

Comments Welcome!

Do you have any ideas for making cool avatars and animations?
Do you have any ideas to add more AI features?
Do you have any ideas to make AI Avatar even more fun?
Do you have any ideas for increasing the number of users of AI Avatar?

Any other comments are also welcome!

😊How to Get Cheered Up 24/7 (AI Avatar v4 with Animation Editor (Chrome Extension + VS Code Extension))

Web Developer Hyper — Tue, 07 Apr 2026 11:21:48 +0000

Intro

AI Avatar is a VRM 3D character in your VS Code sidebar that reacts to Claude Code / GitHub Copilot AI activity and Enter key.

Hooray!🎉 I released version 4 of AI Avatar! My last post was about version 2, and there have been 2 big updates since then. Version 3 is the release of the Chrome Extension version, and version 4 is the release of the Animation Editor. Now, AI Avatar has popped out of VS Code and into the web. Let's take a look at how they are.

Chrome Extension Version

AI Avatar was working only on VS Code. But wait. Users might want to stay with their beloved avatar and get cheered not only when coding but also when browsing websites. This is really a serious problem, and I rushed to create a Chrome extension version.

The Chrome extension also runs on Edge. I heard that about 70% of users use Chrome and about 10% use Edge, so making a Chrome extension version can cover most of the users waiting for website support.

Creating both the VS Code version and the Chrome version will be quite hard, but my mission is to make people happy, so I proceeded while imagining the smiles of the users. I tried to make the coding process efficient and not create two full versions, but only code the diff for Chrome since I had already created the VS Code version.

Animation Editor

The previous Pose Editor could only set one pose per animation, for example, the avatar could only extend its arms. But now, with the Animation Editor, the avatar can set several poses in one animation, so it can do things like bend its arms first and stretch them out later. The Animation Editor can make your avatar more lively! I rewrote all the default animations included in AI Avatar from a single pose to full animations, so please enjoy the moves. This is a sample animation demo.↓

AI Avatar CodePen Demo

This is a minimal CodePen demo of the AI Avatar. Check out the angel-like smile and the avatar’s awkward movements! The actual AI Avatar has a Animation Editor, so you can make the movements less awkward. ↓

How to Use the AI Avatar Chrome Version

Install from Chrome Web Store: ↓↓
https://chromewebstore.google.com/detail/ai-avatar/afmcfaeaaojalninahhhjnonhmlmiidi

How to Use the AI Avatar VS Code Extension Version

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 ↓↓

Special Thanks

My DEV Community friend @gramli helped update AI Avatar in version 2 and keeps supporting me. Thank you very much!

Version 5 Update

I'm already working on the version 5 update. More fun is coming our way, so please stay tuned!

More Update Ideas

Add more AI features.
Add more adjustable parameters.
Add more expressions and animations.
Add more triggers for when the avatar reacts.

If you have any update ideas, please let me know!

Collab Project in Progress

I'm working on a collab project with my DEV Community friend @itsugo. It's progressing slowly, but it's still moving forward. I'll write a post about it soon.

More about Animation and AI

My posts about fun 2D/3D animation. ↓

Also, here are my posts about AI. ↓

My Brain Training App (Muscle Brain) 💪🧠

Available as Chrome Extensions for Free
https://chromewebstore.google.com/detail/muscle-brain-ultimate-edi/nmlolddnfpfambkcnplggphjgbjeabfc

Available on Microsoft Store for Free
https://apps.microsoft.com/detail/9NG572QMV56M

Outro

Ah! It's almost time to go to a concert with my dearest avatar. I have to go now. Let's go to another concert with you, me, and our avatars next time. Thank you for reading. See you!🫡

Comments Welcome!

Do you have any ideas to make animations easier and more realistic?
Do you have any ideas to add more AI features?
Do you have any ideas to make AI Avatar even more fun?

Any other comments are also welcome!

Update (2026/03/28): Added AI Avatar CodePen Demo

Web Developer Hyper — Sat, 28 Mar 2026 01:46:54 +0000

Web Developer Hyper

Mar 23

AI Avatar v2 with Pose Editor (VS Code Extension)🕺

#discuss #ai #webdev #javascript

Comments 17

4 min read

AI Avatar v2 with Pose Editor (VS Code Extension)🕺

Web Developer Hyper — Mon, 23 Mar 2026 11:17:29 +0000

Update (2026/03/28): Added AI Avatar CodePen Demo

Intro

I am happy to announce that I have released version 2 of the AI Avatar!🎉 The AI Avatar will respond to Claude Code chatting, but you can also enjoy it without Claude Code. The avatar and animations are customizable, so you can use the ones you like. This time, I added a pose editor for animation. Also, my DEV Community friend @gramli joined and made lots of updates, like GitHub Copilot support. Thank you very much for updating! Please take a look at how the AI Avatar has improved.

AI Avatar CodePen Demo

This is a minimal CodePen demo of the AI Avatar. Check out the angel-like smile and the avatar’s awkward movements! The VS Code extension version has a Pose Editor, so you can make the movements less awkward. ↓

How to Use the AI Avatar

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 ↓↓

Pose Editor

In the previous version, I suggested using the official VRoid animations. However, it has only seven patterns, so we will get bored of it soon. So I created a pose editor that lets you create as many pose animations as you like. You can now create poses graphically and easily using a GUI and save them as JSON files. I'm hoping users can enjoy this update even more.

You can adjust each part of the body: Z tilt, X forward, and Y rotation.

Ouch! Be careful not to tilt Z too much. Avatars are delicate and fragile.↓

Ouch! Be careful not to bend X too much. Treat the avatar like a newborn baby.↓

Ouch! Be careful not to rotate Y too much. Handle the avatar like a small animal.↓

Update from @gramli

Ever wish your VRoid avatar could keep up with multiple AI personalities? Well, now it can! My contribution adds Copilot as a watcher alongside Claude, tracks its chat activity, and even lets you switch between them like flipping TV channels. I also tweaked the UI so the buttons look nice in VS Dark theme. Behind the scenes, I refactored the watcher logic into a factory system, so adding future AI watchers will be like adding toppings to your favorite pizza, easy and satisfying! 😄
I’m not sure if I’m a “perfect” contributor, but I hope my CEO @webdeveloperhyper is happy with my work!

What I'm Struggling with in AI Avatar😿

To tell the truth, I want to make an AI animation generator from screenshots. However, I keep failing and end up creating zombie poses🧟, so I gave up for the second time and created a pose editor instead. Maybe I need to take more steps to convert images directly into animations, but I am skipping steps, so the AI cannot understand well. I will add an AI animation generator in version 3 if I succeed.

Version 3 Update

I am creating a Chrome extension version so more users can enjoy the AI Avatar more widely. So please stay tuned!😆

More Update Ideas💡

Add more AI features.
Add more adjustable parameters.
Add more expressions and animations.
Add more triggers for the avatar when it reacts.

If you have any update ideas, please let me know!

Collab Project in Progress

I'm now working on a collab project with my DEV Community friend @itsugo. I'll write a post about it soon.

More about Animation and AI

My posts about fun 2D/3D animation. ↓

Also, here are my posts about AI. ↓

My Brain Training App (Muscle Brain) 💪🧠

Available as Chrome Extensions for Free
https://chromewebstore.google.com/detail/muscle-brain-ultimate-edi/nmlolddnfpfambkcnplggphjgbjeabfc

Available on Microsoft Store for Free
https://apps.microsoft.com/detail/9NG572QMV56M

Outro

Ah! It's almost time for dinner at a luxurious and fancy restaurant with my lovely avatar. I have to go now. How about having a party with you, me, and our lovable avatars next time. Thank you for reading. See you!🫡

Comments Welcome!

Do you have any ideas to make animations easily?
Do you have any ideas to add more AI features?
Do you have any ideas to make AI Avatar even more fun?

Any other comments are also welcome!

Updated the title and simplified the links for clarity.

Web Developer Hyper — Wed, 11 Mar 2026 04:02:29 +0000

Web Developer Hyper

Mar 9

AI Avatar (VS Code Extension)

#discuss #ai #webdev #javascript

Comments 26

4 min read

AI Avatar (VS Code Extension)

Web Developer Hyper — Mon, 09 Mar 2026 11:18:47 +0000

Intro🥰

Do you feel lonely and want someone around you? Especially when you are fighting endless bugs alone at midnight like me? Leave it to me! I just invented the perfect app for us. It's the AI Avatar!🎉 The AI Avatar will cheer us up with its bright smile like the sun, enjoyable full-body animation, and thoughtful messages. The AI Avatar will watch over us carefully from a Visual Studio Code extension 24/7. This will surely satisfy our needs, so let's take a closer look at it.🚀

How to Use the AI Avatar📄

All you have to do is add the AI Avatar VSCode extension to your VSCode. That's it!

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 ↓↓

The Secrets of the AI Avatar🤫

Is the default avatar not your type? Don't worry. You can make your own lovely avatar easily and for free using VRoid.
https://vroid.com/en
Please make an avatar you fall in love with at first sight.
I wrote a post about VRoid last year before.↓
https://dev.to/webdeveloperhyper/how-to-make-ai-controled-avatar-1-vroid-2jde

The AI Avatar does not just display avatars. The AI Avatar will play an animation when Claude Code responds. Hooray! Claude Code now has a heart and feels alive like a human.🥰
Don't have Claude Code? Don't worry. The avatar will also play an animation when you click the avatar or press the Enter key. The AI Avatar is created for everyone to enjoy.
Don't like the animations? Don't worry. You can set the animation you like. Set the animation that matches your needs best.

Also, the AI Avatar will send you a cheering message when the animation plays. It will recharge your energy and help your coding progress.
Don't the default cheering messages cheer you enough? Don't worry. You can customize the messages as you like. Set the messages that encourage you the most.

This extension is built with Three.js, a popular 3D graphics library with the help of AI. Please check the README for more information.
https://marketplace.visualstudio.com/items?itemName=web-developer-hyper.ai-avatar

How to Release a VSCode Extension🚀

This was my first time releasing a VSCode extension. I thought it would be difficult, but it was easier than I imagined. You just need to create a publisher on the Visual Studio Code Marketplace and publish an extension to it. The approval process only took about five minutes.
Please check the official documentation for more information. ↓
https://code.visualstudio.com/api/working-with-extensions/publishing-extension

What I'm Struggling with in AI Avatar😿

Now I am using the official VRoid animations, but there are only 7 patterns. So I want to make my own avatar animations. However, it is quite challenging. When I use AI for avatar animation, it always ends up with a zombie pose.🧟 It seems that I have to study Blender to make an animation that is not a zombie. I want to add my original animations to version 2 if I succeed.

Version 2 Update🤝

My DEV Community friend @gramli is preparing a super update. Something exciting is coming soon. Please stay tuned!😆

More Update Ideas💡

Add more AI features.
Add more adjustable parameters.
Add more expressions and animations.
Add more triggers for the avatar when it reacts.

If you have any update ideas, please let me know!

Collab Project in Progress🤝

I'm now working on a collab project with my DEV Community friend @itsugo. I'll write a post about it soon.

More about Animation and AI🎢

My posts about fun 2D/3D animation. ↓

Also, here are my posts about AI. ↓

My Brain Training App (Muscle Brain) 💪🧠

Available as Chrome Extensions for Free
https://chromewebstore.google.com/detail/muscle-brain-ultimate-edi/nmlolddnfpfambkcnplggphjgbjeabfc

Available on Microsoft Store for Free
https://apps.microsoft.com/detail/9NG572QMV56M

Outro😍

Oh! It's time to have a date with my adorable avatar. I have to go now. Let's have some fun together with you, me, and our lovable avatars next time! Thank you for reading. See you!🫡

Comments Welcome!🗨️

Do you have any ideas on how not to feel lonely?
Do you have any ideas to make AI Avatar even more fun?

Any other comments are also welcome!👂

Update (2026/02/24): Added new feature to reduce much stress.💥

Web Developer Hyper — Tue, 24 Feb 2026 11:40:57 +0000

Web Developer Hyper

Feb 23

💥How to Reduce Stress for Free (Mega Bazooka with React Three Fiber + AI)💥

#ai #webdev #graphql #a11y

Comments 32

6 min read

💥How to Reduce Stress for Free (Mega Bazooka with React Three Fiber + AI)💥

Web Developer Hyper — Mon, 23 Feb 2026 10:02:57 +0000

Update (2026/02/24): Added feature to reduce much stress. Gold Fountain with Mega Bazooka

Intro🚀

Do you have stress and want to reduce it? I surely do have stress since I'm a web developer fighting endless bugs every day.🤯 Last time, I invented a gold fountain and became a millionaire.🤑↓
🪙Let’s Become a Millionaire in a Second (Gold Fountain with React Three Fiber)🪙
However, I realized that gold coins would not reduce my stress. Material wealth did not directly affect mental wealth. So this time I focused on how to reduce stress and invented Mega Bazooka! It will blow off your stress in an instant with only a click. I hope you will also enjoy it and reduce your stress.💥

How to Enjoy Gold Fountain with Mega Bazooka💥

Left click on the box: Focus your mouse pointer on the magical box and left-click to burst thousands of coins like a daydream.

Left click: A powerful shot will pop out vigorously. You can reduce your stress by watching the coins fly far away by the shots. Are you worried that you will lose the coins if we shoot them? Don't worry. The shots just push the coins away strongly and do not destroy them at all. The coins will not decrease, but our stress will decrease instead. So you can still be a millionaire and play with the coins. This feature is enabled by my cutting-edge program.

You can choose the type from gold coins, pink diamonds and colorful coins. Colorful coins are a new feature from last version. The app fetches Pokemon data using a GraphQL API. Colors of the coins are randomly changed based on Pokemon colors, which adds variety and rarity to the coins. Please enjoy collecting rare Pokemon coins.

You can adjust each parameter of the fountain by sliding the control bar. Changing the parameters will make the coin burst animation quite different, so enjoy how the animation changes by adjusting them. Please find the parameter settings that make your favorite animation. I made the parameters adjustable based on the idea from @peacebinflow in my last version. Thank you for your advice!

Summary for busy people ↓

Operation	Action
Left-click on the box	Burst coins🪙
Left-click	Shoot💨

Gold Fountain with Mega Bazooka💥

Update (2026/02/24): Added a new feature to reduce stress even more. I added a laser as a new weapon. You can switch from shot to laser using the button on the left. The laser is more powerful than the shot and blows off more coins at once. The more coins you blow off, the more stress is reduced. Of course, the laser will not destroy the coins at all, so you can still be a millionaire.

When you play on a small screen like a smartphone, the buttons and controls may hide the magical box, so please hide them by clicking the Hide button or pressing the H key when playing. Also, there are 0.5× and 0.25× buttons on CodePen at the bottom bar that adjust the size.

How I created Gold Fountain with Mega Bazooka💥

I created Gold Fountain with React Three Fiber with the help of AI. It is a wrapper of the famous 3D graphics library, Three.js, for React. After I checked that it worked locally, I made a CodePen demo so that everyone could enjoy the Gold Fountain. I added beginner-friendly comments for better understanding and learning. Try clicking the CodePen demo and feel refreshed.🤯

Technical Points 1 (Spatial Hash Grid)👍

In my previous version, I set the limit of the coins to 50,000 because it got slow when I increased the number of coins too much. However, I heard an anguished cry from my friend @gramli saying that the coins were not enough. Thank you for your suggestion! I used Spatial Hash Grid to improve performance. In the previous version, the coin collision detection calculated all the coins, but now it calculates only nearby coins. Due to this improvement, he got 100,000 coins, became a millionaire, bought an aircraft carrier🚤, and lived happily ever after. Next, it is your turn to become a millionaire! So please give it a try!

Technical Points 2 (GraphQL)👍

GraphQL is a query language for APIs with a strong type system. Compared to REST API, GraphQL lets you request exactly the fields you need and avoids over-fetching or under-fetching data. This time, I wanted to get the Pokemon color and change the color of the coin. Pokemon API has a lot of data, but GraphQL can get only the data I want. GraphQL is a little more difficult than REST API, but the flexibility and efficiency make it worth trying.

Technical Points 3 (A11y)👍

Accessibility (a11y) means making your app usable for everyone. I added accessibility to the code.

ARIA labels: Screen readers can announce the UI controls.
Keyboard shortcut: Users can control the app without a mouse. H key: Hide/Show the UI controls. A substitute for Hide/Show button. Space key: Hit the magical box and burst the coins. A substitute for left- click on the box. Return key: Pop out a strong shot vigorously. A substitute for left-click. ESC key: Reset all the coins to enjoy endlessly. A substitute for Clear button.
Focus indicators: Keyboard users can see where they are.

Future Update Ideas💡

Make new things burst from the box.
Make a new type of shot and explosion.
Add more adjustable parameters.
Add AI features.
Please let me know if you have any ideas!

Collab Project in Progress🤝

I'm now working on a collab project with my DEV Community friend @itsugo. I'll write a post about it soon.

More about Animation and AI🎢

My posts about fun 2D/3D animation. ↓

Also, here are my posts about AI. ↓

My Brain Training App (Muscle Brain) 💪🧠

Available as Chrome Extensions for Free
https://chromewebstore.google.com/detail/muscle-brain-ultimate-edi/nmlolddnfpfambkcnplggphjgbjeabfc

Available on Microsoft Store for Free
https://apps.microsoft.com/detail/9NG572QMV56M

Outro🚀

Thanks to the Gold Fountain with Mega Bazooka, we can become millionaires and reduce stress at the same time. I hope most of our problems have disappeared now.

I'm glad you enjoyed this post. Thank you for reading. Happy AI coding!🧠 You're absolutely right!🤖

Do you have any ideas to make this app more fun?
Do you have any ideas on how to become a millionaire?
Do you have any ideas to reduce stress?

I would love to hear your thoughts!⬇️⬇️

Collaboration project with my DEV Community friend @itsugo.😆 I'll write my side of post soon.

Web Developer Hyper — Mon, 16 Feb 2026 12:15:32 +0000

Aryan Choudhary

Feb 16

How a DEV Friend and I Brought Two Avatars to Life

#webdev #sideprojects #animation #react

Comments 64

3 min read

Update (2026/02/03): Added New Fountain

Web Developer Hyper — Tue, 03 Feb 2026 11:37:18 +0000

Web Developer Hyper

Feb 2

🪙Let’s Become a Millionaire in a Second (Gold Fountain with React Three Fiber)🪙

#ai #webdev #rust #docker

Comments 40

6 min read