The latest articles on DEV Community by Sara (@thibsara). https://dev.to/thibsara https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2977967%2Fa70b2e4c-76ec-4efd-b6be-e323682527f9.jpeg https://dev.to/thibsara en Sara Wed, 26 Mar 2025 10:12:09 +0000 https://dev.to/thibsara/playful-3d-singing-experiment-using-nextjs-aj2 https://dev.to/thibsara/playful-3d-singing-experiment-using-nextjs-aj2 <p>Hey everyone! 👋 </p> <p>I just launched <strong><a href="https://monster-opera.vercel.app/" rel="noopener noreferrer">Monster Opera</a></strong> – a fun little web experiment where you can create your own <strong>singing monster choir!</strong> 🎤<br><br> I wanted to build something <strong>playful, UX-friendly, and creative</strong>, making it easy and enjoyable to interact with. </p> <h2> 🛠️ Tech Stack </h2> <ul> <li>🚀 <strong>Next.js</strong> – for the frontend </li> <li>🎨 <strong>Spline</strong> – for interactive 3D models </li> <li>🎵 <strong>Tone.js</strong> – to handle sound generation </li> </ul> <h2> 🎨 Designing the Monsters </h2> <p>I started by designing multiple monster variations in <strong>Spline</strong>, giving each one its own quirky personality. </p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5wsvt1uba89qe2mzn9wz.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5wsvt1uba89qe2mzn9wz.png" alt="3D monsters" width="800" height="309"></a> </p> <p>Once the 3D models were ready, I imported them into my <strong>Next.js</strong> project and used <strong>Tone.js</strong> to associate sounds with them. Now, clicking on a monster triggers its unique singing voice! 🎶 </p> <h2> 🎛️ Step Sequencer – Making Music Interactive </h2> <p>To make the experience even more fun, I added a <strong>step sequencer</strong>, allowing users to compose simple patterns and hear their monsters sing in rhythm! 🕺💃 </p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8yls9llx8kdv0r97oobn.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8yls9llx8kdv0r97oobn.png" alt="Step Sequencer" width="800" height="320"></a> </p> <p>With just a few clicks, you can create fun melodies and watch the monsters perform in sync. </p> <h2> 👩‍🎨 Why I Built This </h2> <p>I wanted to <strong>code something simple yet creative</strong>, blending <strong>music, interactivity, and playful design</strong> into an experience that's: </p> <ul> <li> <strong>Easy to use</strong> – no steep learning curve, just play! </li> <li> <strong>Visually engaging</strong> – thanks to interactive 3D monsters </li> <li> <strong>Musically fun</strong> – experiment with sounds and patterns </li> </ul> <p>🎶 <strong>Try it out here 👉 <a href="https://monster-opera.vercel.app/" rel="noopener noreferrer">Monster Opera</a></strong> </p> <p>I’d love to hear your feedback – <strong>any thoughts on how to improve it or take it further?</strong> 🐥 </p> webdev nextjs javascript programming