Web Developer Hyper

Posted on Feb 23 • Edited on Feb 24

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

#ai #webdev #graphql #a11y

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!⬇️⬇️

Top comments (32)

Anna Villarreal • Feb 23

Can you show me the hide button? Im on galaxy s22 ultra.

Web Developer Hyper • Feb 23

Thank you for checking!

Ah! My app has a terrible UI 🫣 It looked fine on my PC and tablet, but it doesn't seem to display well on smartphones. It's an “it works in my environment” problem.😅

There are 0.5× and 0.25× buttons on CodePen at the bottom bar that adjust the size. You can also click the Hide controls button or press the H key to hide the controls.

Anna Villarreal • Feb 24

No it's fine. Codepen defaults to the very zoomed in view. I found this out recently haha.

Web Developer Hyper • Feb 25

Thank you for your suggestion! I almost lost all the smartphone users. 😅
I added a note under the CodePen demo explaining that you can make the controls smaller by pressing the 0.5× and 0.25× buttons.

I also added a much more powerful weapon, so please enjoy it when you have time! 💥

I hope you and @gramli both win the DEV Challenge!

Benjamin Nguyen • Feb 23

This is such an impressive project as usual! I'm looking forward to creating an app that helps me unwind after a busy day, too. Your clear explanation and skillful execution stood out, and I'm eager to see what you and your friend will work on next.

Web Developer Hyper • Feb 24

Thank you for checking it out! 😊 You always combine many new technologies so well, so I’m looking forward to your new relaxation app. I’m also working on a few updates and projects, so please stay tuned.

Benjamin Nguyen • Feb 24 • Edited

ah thank you! I can't wait for your project :)

Web Developer Hyper • Feb 26

Thank you!
I updated this app and added a more powerful weapon, so please give it a try when you have time. 💥
Also, I started creating a new app related to AI, so I’m hoping to release it soon. 🤯

Benjamin Nguyen • Feb 26 • Edited

I try your app with the new update. One word! WOW WOW WOW. Really cool project :). I can't wait for your app in AI. It is going to be really cool once again :).

Web Developer Hyper • Feb 26

Thank you! Your words always cheer me up. I’ll try to create an AI app that many people can enjoy. 🤯

Benjamin Nguyen • Feb 26 • Edited

Take your time :). Don't stress out!

Anna Villarreal • Feb 23

Nvm, i had to zoom out LOL.

Anna Villarreal • Feb 23

I like where its going!

✨️✨️✨️

Web Developer Hyper • Feb 24

Thank you for playing!
I hope my app reduces your stress instead of increasing it because of the bad smartphone UI 😆

Daniel Balcarek • Feb 23 • Edited

I maxed everything out and it works pretty well (even on my prehistoric machine). Nice optimization! ⭐⚡
But I need it bigger! 🤣 How about an atomic bomb explosion of coins with the classic mushroom shape, or TNT with a countdown? 💥😄