Hey everyone! 👋

I just launched Monster Opera – a fun little web experiment where you can create your own singing monster choir! 🎤

I wanted to build something playful, UX-friendly, and creative, making it easy and enjoyable to interact with.

🛠️ Tech Stack

  • 🚀 Next.js – for the frontend
  • 🎨 Spline – for interactive 3D models
  • 🎵 Tone.js – to handle sound generation

🎨 Designing the Monsters

I started by designing multiple monster variations in Spline, giving each one its own quirky personality.

3D monsters

Once the 3D models were ready, I imported them into my Next.js project and used Tone.js to associate sounds with them. Now, clicking on a monster triggers its unique singing voice! 🎶

🎛️ Step Sequencer – Making Music Interactive

To make the experience even more fun, I added a step sequencer, allowing users to compose simple patterns and hear their monsters sing in rhythm! 🕺💃

Step Sequencer

With just a few clicks, you can create fun melodies and watch the monsters perform in sync.

👩‍🎨 Why I Built This

I wanted to code something simple yet creative, blending music, interactivity, and playful design into an experience that's:

  • Easy to use – no steep learning curve, just play!
  • Visually engaging – thanks to interactive 3D monsters
  • Musically fun – experiment with sounds and patterns

🎶 Try it out here 👉 Monster Opera

I’d love to hear your feedback – any thoughts on how to improve it or take it further? 🐥