DEV Community: Web Developer Hyper

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 16

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

AI Avatar (VS Code Extension)

Web Developer Hyper ・ Mar 9

#ai #webdev #javascript #discuss

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

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

Web Developer Hyper ・ Jan 12

#ai #webdev #vue #angular

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

Web Developer Hyper — Mon, 12 Jan 2026 11:07:41 +0000

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

Intro🚀

Last time, I created a never-ending fun roller coaster and wrote a post on the DEV Community. ↓
(How to Create Never-Ending Fun (🎢RollerCoaster.js + React Three Fiber + AI)
It was really fun to create at first, and I got so many reactions to my post. Thank you very much for checking!😸 However, I soon got bored because the roller coaster track was always the same. So this time, I created a CRAZY roller coaster builder to get more fun and excitement. I had to emphasize that I did not create a normal roller coaster builder, but a CRAZY roller coaster builder! Welcome to the CRAZY world!🙀

How Crazy is CRAZY Roller Coaster Builder🙀

You can make CRAZY ups and downs like a sheer cliff.🙀↓
You can make CRAZY sharp curves that are impossible for a real roller coaster to turn without crashing or jumping out of the track.🙀↓
You can penetrate the ground when going down and enjoy a ride underground.🙀↓
You can make CRAZY loops as much as you want that ignore physics.🙀
I didn't set limits on the input values of the track builder, so you can input extreme values.🙀

How to use CRAZY Roller Coaster Builder📋

You can use the UI on the left side of the screen to make a CRAZY roller coaster.
1️⃣ Choose the track vertical direction. Straight? Left? Right?
2️⃣ Choose the track horizontal direction. Straight? Left? Right?
3️⃣ Choose the track mode. Normal? Loop?
4️⃣ Input the Size, UpDown, and Angle. You can input an extreme value if you want to make a CRAZY track. If you like a normal roller coaster, the default values will be fine.
5️⃣ Push the "Add Track" button, and a new track will be created.
6️⃣ The UI hides most of the screen, so push "Hide UI" to see the roller coaster clearly.

How I Created CRAZY Roller Coaster Builder🛠️

Last time, I created a roller coaster using RollerCoaster.js from the famous 3D library Three.js with the help of AI. I used React Three Fiber which is a wrapper of Three.js for React. I made a roller coaster CodePen sample and added beginner-friendly comments. This time, I useed my CodePen project as a base and added track builder function and UI to create a CRAZY track builder. I wanted to make the code simple and short for a demo. So after creating it, I refactored the code a little, made a common constants and component, and reduced the redundancy and made it reusable. I used Sky and Cloud from React Three Drei to easily make a realistic sky and clouds. Drei provides useful helpers for React Three Fiber. Also, I used Tailwind CSS to simplify CSS coding. However, creating the builder didn't go smoothly, and I wrote about the problems in Known Issues section.

Known Issues of CRAZY Roller Coaster Builder🤔

1️⃣ Without adding a curve track before an up/down track, the up/down track somehow twists. I tried to pass a default curve value, but it did not work. It seems necessary to fix the RollerCoaster.js library itself. I wanted to keep the demo simple, so I chose to copy the track creating function RollerCoasterGeometry from RollerCoaster.js and remove the twist.

2️⃣ The loop starts and ends at same position. I tried to add a small twist when looping to avoid crashing into the track, but this made a gap in the track and made it difficult to build. I wanted to keep the demo simple and chose not to add a twist to the loop.

I will update the code when I find a simple way to fix these issues.

Roller Coaster Underwater Version🌊

Last time, I created normal roller coaster, rainbow version 1, rainbow version 2, and a nightmare version. This time, I created an underwater version and added underwater-like CSS gradient background and bubbles rising up. ↓

Also, I made an underwater version 2 and added many features to the bubbles.

Changed from flat bubbles to 3D bubbles.🫧
Added left-and-right sway to bubbles to make the animation more realistic.🫧
Made the bubbles small at the bottom and big at the top to make the animation more realistic.🫧
Added blur to the screen to make a more underwater feeling. This makes the bubbles in the front clear and the bubbles in the back darker.🫧 Which underwater version do you like better?

CRAZY Roller Coaster Builder Underwater Version🫧

CRAZY Roller Coaster Builder Rainbow Version🌈

Future update ideas💡

Add more background patterns
Add more objects to the background
Add camera control as you like
Add speed control as you like
Merge the roller coaster, the track builder, several backgrounds, and their animations into one project.
Release an App using RollerCoaster.js

In case I fortunately get many reactions, I am thinking of updating it and releasing it as an app. I released a brain training app on Microsoft Store and Google Chreme Extension before, so I am thinking of try again with CRAZY Roller Coaster Builder or something similar. Moreover, if my app gets a good reaction, I can move to releasing it on Google Play and App Store.
My brain training App ↓

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

Vue.js

Last time, I also made a Svelte version of the roller coaster for study and curiosity. This time I tried Vue.js version. I used TresJS for handling 3D. It is a wrapper of Three.js for easy use with Vue.js. I have used both React and Vue.js before, but I think Vue.js is easier than React. React Hooks are crazy difficult for me to understand and use, but Vue.js is much simpler and easier to understand intuitively.

I wanted to make a CodePen sample of roller coaster to compare the difference between Vue.js and React. However, I couldn't use TresJS in CodePen, so I tried StackBlitz next. TresJS worked there, but it takes time for StackBlitz to start.

Angular

Also, this time I tried an Angular version. I wanted to use Angular Three to handle 3D. It is a wrapper of Three.js for easier use with Angular. Also, I wanted to make a CodePen sample of roller coaster to compare the difference between Angular and React. However, I couldn't use neither Angular Three nor CodePen, so I tried Angular + Three.js on StackBlitz.

React vs Vue vs Svelte vs Angular Comparison Table

Framework	Difficulty	Project Size	Community Size	3D Library
Svelte	Easy	Small	Small	Threlte
Vue	Medium	Small-Medium	Big	TresJS
React	Hard	Medium-Big	Biggest	React Three Fiber
Angular	Hardest	Big	Medium	Angular Three

*All four can build any size of project, but are most popular for these sizes.

More about animation and AI

I wrote about 2D/3D animation before, so please also refer to it for more information about 2D/3D animation. ↓

Outro🔚

CRAZY Roller Coaster will give you a CRAZY experience. Feel the madness and craziness only on the screen, and let's not get CRAZY and mad in real life.🙀

I hope you learned something from this post. Thank you for reading.
Happy AI coding!🧠 You're absolutely right!🤖

Do you have any good ideas to make this CRAZY Roller Coaster better?
Do you have any good ideas for 2D/3D animation?
Do you know anything about 2D/3D animation?

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

Update (2025/12/30): Added Roller Coaster Nightmare😨

Web Developer Hyper — Tue, 30 Dec 2025 12:22:52 +0000

Web Developer Hyper

Dec 29 '25

How to Create Never-Ending Fun (🎢RollerCoaster.js + React Three Fiber + AI)

#ai #webdev #css #svelte

Comments 23

5 min read