Forem: Web Developer Hyper

🦸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

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

Web Developer Hyper — Mon, 02 Feb 2026 11:31:32 +0000

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

Intro🚀

Have you ever wanted to become a millionaire? I have always wanted to become a millionaire. I'm working hard and seriously every day and night. However, I'm not getting rich at all.😿 If you have the same problem, or even if don't but just want to become a millionaire, leave it to me! I created a perfect app for this dream. Ta-da! It's the Gold Fountain!🪙 It will burst out gold coins every time you click the magical box. This app will definitely satisfy our minds without doing anything illegal to get lots of coins.🤤

How to Enjoy Gold Fountain🪙

Just click the box in the center of the screen, and the coins will explode vigorously from the box. When you click the box repeatedly, we can see a magnificent brspurt scene. We can enjoy this until the screen is full of coins.🪙🪙🪙

I added OrbitControls to Gold Fountain to change the viewing angle of the scene. You can zoom in and zoom out using the mouse wheel and enjoy far and close views. Also, when you click the screen and drag, the view rotates so you can enjoy the view from the top, left, right, and even the bottom. You have the freedom to enjoy the piled-up coins wherever you want.🪙🪙🪙

Gold is quite expensive these days. I checked the price and found that one-ounce coins are roughly $6,000. One click sprouts 2,000 coins, so this means $12,000,000 worth of gold per click! Ah! It's so easy to become a millionaire, isn't it?🪙🪙🪙

      🤤
     🪙🪙
    🪙🪙🪙
   🪙🪙🪙🪙
  🪙🪙🪙🪙🪙
 🪙🪙🪙🪙🪙🪙

Gold Fountain🪙

Pink Diamond Fountain💎

Diamonds are quite expensive. Among diamonds, pink diamonds are especially expensive. I checked the price and found that one-carat pink diamonds start at roughly $20,000. One click sprouts 2,000 diamonds, so this means $40,000,000 worth of pink diamonds per click! Ah! It's even easier to become a millionaire, isn't it?💎💎💎

How I Created Gold Fountain🪙

I created Gold Fountain with React Three Fiber with the help of AI. It is a wrapper of famous 3D graphics library, Three.js, for React. After I checked that it worked locally, I made a CodePen demo so that everyone can enjoy the Gold Fountain. Try clicking the CodePen demo and fill your display with gold coins.🤤

Technical Points of Gold Fountain🪙

I used InstancedMesh for better performance. The GPU can render all 50,000 coins in a single draw call using shared geometry with different transformations. If I used individual meshes instead, the CPU would have to issue 50,000 separate draw calls, which would severely hurt performance.

I only enabled collision detection for the coins that land and pile up to keep performance high, and skipped it for the rest. However, the thin coins penetrated each other because they could move completely through another coin between frames (tunneling). By making the coins thicker, their collision volumes became larger, making it less likely for them to pass through each other within a single frame, so collisions were detected more reliably.

I used typed arrays (Float32Array and Uint8Array) for faster physics calculations. They are much faster than regular JavaScript arrays for numerical data because they use contiguous memory with fixed-size elements and avoid object overhead, making them more cache-friendly. Float32Array stores 32-bit floating-point numbers, while Uint8Array stores 8-bit unsigned integers.

You can check all the code on CodePen. I added beginner-friendly detailed comments to the code for better understanding and learning.

Rust to the Rescue💨

Rust runs very fast, which makes it well suited for heavy physics computations. Since I had to run collision detection for thousands of coins, I wanted to see how much faster it would be in Rust, so I tried using WebAssembly (WASM) to integrate Rust with JavaScript. Rust compiles ahead of time to native code and provides predictable performance with no garbage collection. Memory is managed deterministically, so there are no GC pauses. JavaScript engines are highly optimized with JIT compilation, but they still have some runtime overhead and garbage collection, which can occasionally cause frame drops or stuttering during physics simulations.

I added code that can calculate Rust and JavaScript computing time and display them on the screen. Rust has an overhead when transferring data from JavaScript to Rust and from Rust to JavaScript. Even though using Rust was faster than using JavaScript only. The difference in speed got bigger as the coin calculation increased.

You can test the demo using the link below.↓
https://ubiquitous-taffy-dd5f77.netlify.app/
You can also check all the code on GitHub.↓
https://github.com/webdeveloperhyper/gold-fountain-public
I added beginner-friendly, detailed comments to the code for better understanding and learning.

Docker to the Rescue🐳

I added a GitHub Actions CI/CD pipeline. It uses a Docker container (rust image) to build the WebAssembly in a clean environment and then automatically deploys to Netlify. This solved the local build issues, such as my antivirus blocking Rust compiler.

There are several reasons why Docker is helpful:

Isolation: Each container runs in an isolated user space, which helps prevent dependency conflicts between projects.
Consistency: Docker lets you reproduce the same environment everywhere, reducing “works on my machine” issues.
Multiple environments: You can run multiple projects side by side, each in its own container without interfering with others.
Clean builds: Containers provide reproducible, clean environments, so leftover dependencies or local state are less likely to cause strange bugs.
Security: Containers add an extra layer of isolation from the host system, making it safer to run external or untrusted code.

You can check all the code on GitHub.↓
https://github.com/webdeveloperhyper/gold-fountain-public
I added beginner-friendly, detailed comments to the code for better understanding and learning.

Future Update Ideas for Gold Fountain💡

Add metallic sounds of coins.
Change coins to other valuable things.
Add an action when clicking the piled coins.
Use WebGPU to speed things up.
Add AI features to make it more fun.
Please let me know if you have any ideas.

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

Collab Project in Progress🤝

I'm now working on a collab project with my DEV Community friend @itsugo. Looking forward to releasing it soon.

Outro🚀

Thanks to my app Gold Fountain, I can get as many gold coins as I want with just one click. Now I'm a millionaire on the web. I hope you also got as many coins as you wanted. If you need more coins, just grab your favorite mouse and have a nice click.🤤

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? I would love to hear your thoughts!⬇️⬇️

Update (2026/01/13): Added CRAZY Roller Coaster Builder Rainbow Version🌈

Web Developer Hyper — Tue, 13 Jan 2026 12:04:24 +0000

Web Developer Hyper

Jan 12

🙀How to Create a CRAZY Roller Coaster Builder (🎢RollerCoaster.js + React Three Fiber + AI)

#ai #webdev #vue #angular

Comments 25

6 min read