Halloween is the perfect time to unleash creativity, and this year I decided to turn that idea into code. The result was My Spooky Cozy Haven, a project developed for the Frontend Challenge: Halloween Edition by the DEV Community.
In today’s article, I want to share how I turned limitations into experimentation, the techniques I used, and what I learned throughout the process.
🎯 The starting point
The challenge was simple to describe but complex to execute: build something interactive, responsive, and visually engaging without relying on frameworks or external libraries.
The main focus was CSS, but a touch of JavaScript could be used to enhance interactivity.
In practice, this meant:
- Layouts that worked well …
Halloween is the perfect time to unleash creativity, and this year I decided to turn that idea into code. The result was My Spooky Cozy Haven, a project developed for the Frontend Challenge: Halloween Edition by the DEV Community.
In today’s article, I want to share how I turned limitations into experimentation, the techniques I used, and what I learned throughout the process.
🎯 The starting point
The challenge was simple to describe but complex to execute: build something interactive, responsive, and visually engaging without relying on frameworks or external libraries.
The main focus was CSS, but a touch of JavaScript could be used to enhance interactivity.
In practice, this meant:
- Layouts that worked well on any screen size.
- Lightweight, animated elements.
- Interactions that surprised the user, including visual and sound effects.
🛠️ Technical decisions and experimentation
To turn the idea into something that really worked in practice, I had to experiment with different approaches and combine CSS, SVGs, and JavaScript techniques.
Every decision had to balance user experience, performance, and visual expressiveness, ensuring the scene ran smoothly and felt immersive on any device.
💧 CSS Fluid Scaling
To make the scene work across different screen sizes, I explored CSS Fluid Scaling. Instead of relying solely on media queries, the goal was to maintain fluid proportions and spacing, creating a consistent experience from desktop to mobile.
🕸️ Animated SVGs
SVGs were used to bring the scene to life. I modeled and animated vector elements in a lightweight and scalable way, keeping performance and accessibility in mind, as SVGs preserve visual quality without weighing down the page.
✨ Breathing glow effect
One of the most challenging effects was creating a pulsing glow from scratch, synchronized with the visual elements. I used CSS for the animation and JavaScript to anchor the effect, ensuring it responded naturally to user interaction.
🔊 Sound interactivity
To enhance immersion, I implemented sound effects triggered by keyboard on desktop and double tap on mobile, with i18n support (pt-BR and en-US) and visual instructions on how to activate them. This added an extra layer of interaction, reinforcing the playful nature of the experience.
🧠 Learnings and reflections
Beyond the visual result, this project showed me how to combine technique and storytelling, turning each element into an experience that users can feel and interact with, while respecting solid front-end fundamentals.
Key lessons:
- Planning animations and interactions before coding prevents rework.
- Animated SVGs can be powerful, lightweight, and accessible when structured properly.
- Small details, like synchronized sound and glow effects, increase immersion without sacrificing performance.
- Fluid responsiveness is essential for any modern web experience.
💻 Technologies used
- HTML
- CSS (Fluid Scaling, animations, and glow)
- JavaScript (interactivity and effect synchronization)
If you enjoy challenges that mix creativity, technical skill, and user experience, I invite you to check out the project and explore the scene:
🔗 Online Project: https://dev-sigo.github.io/my_spooky_cozy_haven 🔗 GitHub Repo: https://github.com/dev-sigo/my_spooky_cozy_haven