This content originally appeared on DEV Community and was authored by Angelo Silva
O Halloween é o momento perfeito para soltar a criatividade, e este ano decidi transformar essa ideia em código. O resultado foi o My Spooky Cozy Haven, um projeto desenvolvido para o Frontend Challenge: Halloween Edition da DEV Community.
No texto de hoje, quero compartilhar como transformei limitações em experimentação, quais técnicas usei, e o que aprendi ao longo do processo.
🎯 O ponto de partida
O desafio era simples de enunciar, mas complexo de executar: construir algo interativo, responsivo e visualmente envolvente, sem recorrer a frameworks ou bibliotecas externas.
O foco seria principalmente CSS, mas um toque de JavaScript podia ser usado para incrementar interatividade.
O que isso significava na prática:
- Layouts que funcionassem bem em qualquer resolução.
- Elementos animados e leves.
- Interações que surpreendessem o usuário, incluindo efeitos visuais e sonoros.
🛠️ Decisões técnicas e experimentação
Para transformar a ideia em algo que realmente funcionasse na prática, precisei testar diferentes abordagens e combinar técnicas de CSS, SVGs e JavaScript.
Cada escolha teve que equilibrar experiência do usuário, performance e expressividade visual, garantindo que a cena funcionasse de forma fluida e envolvente em qualquer dispositivo.
💧 CSS Fluid Scaling
Para garantir que a cena funcionasse em telas de diferentes tamanhos, explorei CSS Fluid Scaling. Em vez de depender apenas de media queries, a ideia era manter proporções e espaçamentos fluídos, criando uma experiência consistente do desktop ao mobile.
🕸️ SVGs animados
SVGs foram usados para dar vida à cena. Modelei e animei elementos vetoriais de forma leve e escalável, pensando em performance e acessibilidade, já que SVGs permitem manter qualidade visual sem pesar a página.
✨ Efeito de breathing glow
Um dos efeitos mais desafiadores foi criar do zero um glow pulsante, sincronizado com elementos visuais. Usei CSS para a animação e JavaScript para ancorar o efeito, garantindo que ele respondesse naturalmente à interação do usuário.
🔊 Interatividade sonora
Para aumentar a imersão, implementei efeitos sonoros acionados por tecla no desktop e double tap no mobile, com suporte a i18n (pt-BR e en-US) e instruções visuais de como ativá-los. Isso trouxe uma camada extra de interação, reforçando o caráter lúdico da experiência.
🧠 Aprendizados e reflexões
Mais do que o resultado visual, esse projeto me mostrou como combinar técnica e narrativa, tornando cada elemento uma experiência que o usuário sente e interage, mas que também respeita fundamentos sólidos de front-end.
Principais lições:
- Planejar animações e interações antes de codar evita retrabalho.
- SVGs animados podem ser poderosos, leves e acessíveis quando bem estruturados.
- Pequenos detalhes, como efeitos sonoros e glow sincronizado, aumentam imersão sem sacrificar performance.
- Responsividade fluida é essencial para qualquer experiência web hoje.
💻 Tecnologias usadas
- HTML
- CSS (Fluid Scaling, animações e glow)
- JavaScript (interatividade e sincronização de efeitos)
Se você gosta de desafios que misturam criatividade, técnica e experiência do usuário, convido você a conferir o projeto e apreciar a cena:
🔗 Projeto Online: https://dev-sigo.github.io/my_spooky_cozy_haven
🔗 Repo no GitHub: https://github.com/dev-sigo/my_spooky_cozy_haven
This content originally appeared on DEV Community and was authored by Angelo Silva
Angelo Silva | Sciencx (2025-11-01T17:29:19+00:00) My Spooky Cozy Haven: explorando CSS, SVGs e interatividade para o Halloween. Retrieved from https://www.scien.cx/2025/11/01/my-spooky-cozy-haven-explorando-css-svgs-e-interatividade-para-o-halloween/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.