For this Hackathon kiroween, I wanted to build something fun, atmospheric, and full of personality. Halloween has always been about eerie visuals, creepy sounds, and unexpected jump scares — so why not bring that experience to any website on the internet?
That’s how Halloween Vibes was born: a Chrome extension that instantly transforms ordinary webpages into a magical, spooky Halloween universe. 👻🕸️
Halloween is all about atmosphere — the glowing pumpkins, flickering lights, creepy whispers, and things that move when you’re not looking. I wanted to capture that feeling and bring it directly into the browser.
Instead of a static theme or wallpaper, I envisioned something alive, animated, and reactive. Halloween Vibes became my way of turning the entire web into a fully immersive haunted experience.
🎃 What It Does
Halloween Vibes overlays spooky decorations, sounds, and animations onto any website without breaking the layout.
✨ Key Features
👻 Visual Magic
- Floating pumpkins, ghosts, bats, leaves, witches
- Spider webs in all corners
- Special Halloween cursors
🔊 Audio Effects
Ambient spooky music
Jump-scare screams & whispers
Tab-aware audio (pauses when switching tabs)
All sounds fully user-controlled
😱 Jump Scares
Flying skulls
Peeking zombies
Bloody Mary crack animations
🧠 Smart Engine
Overlay mode keeps original site styles intact
Per-tab sound management
Autoplay-compliant audio
Lightning-fast injection (under 50ms)
💻 Developer Friendly
- React + TypeScript
- Vite
- Tailwind CSS
- Framer Motion for animations
Halloween Vibes uses a modern Chrome extension structure:
- React 18 + TypeScript for the popup UI
- Vite for fast development & builds
- Framer Motion for smooth animations
- Chrome Storage API for settings
- Web Audio API for sound playback
- Content Script to inject decorations onto any webpage
- Background Service Worker to manage global state The content script handles the Halloween overlay, animations, decorations, and jump scare logic, while the popup allows users to toggle sounds or switch modes.
😅 Challenges
🔊 Sound System Challenges
Preventing duplicated audio across multiple tabs
Keeping jump scare sounds synced
Handling autoplay restrictions
Ensuring sound toggles worked per-tab
Integrating React + Vite + Manifest V3
Avoiding broken layouts while injecting visual effects
Working around strict CSP websites
Managing performance so animations stayed smooth
A clean, polished Halloween extension that works on most websites
Smooth animations and overlays that don’t break page layouts
A lightweight jump scare system under 10MB memory
Fast injection speed: <50ms
A responsive popup UI
Fully tab-aware sound engine
📚 Learnings
- - Dealing with browser autoplay policies
- - Multi-tab communication inside Chrome extensions
- - High-performance animations with Framer Motion
- - Structuring a scalable extension with Vite
- - Balancing creativity with accessibility and performance
🎨 What’s Next for Halloween Vibes
Multi-Theme Expansion
- Cute Halloween
- Gothic
- Cyberpunk Halloween
- Retro Halloween
- Seasonal Themes
🎄 Christmas
🎆 New Year
💖 Valentine’s Day
🐇 Easter
🎉 Birthday Theme
More Features
Customizable sound packs
Adjustable jump scare frequency
More decorations & animations
Theme selector inside the popup
Halloween Vibes is evolving into a year-round seasonal web transformation extension.
💡 How Kiro Helped Build This Project
Kiro played a huge role in speeding up development:
Steerings
I used detailed steering docs covering:
Accessibility guidelines
Animation rules
Architecture standards
Performance constraints
Sound design rules
This helped Kiro generate code that matched my design system, accessibility requirements, and Halloween vibe without constant correction.
Hooks
I automated:
- Pre-write filename validation
- Automatic file headers
- Project context injection
- Task planning review
This made code generation more consistent and saved a lot of time.
Specs
I kept my spec focused on the MVP first, then layered complexity later. Reviewing each task before execution made everything predictable and clean.
🔗 Built With
React
TypeScript
Vite
🎉 Try It Out
👨💻 GitHub Repo:
https://github.com/lucidyatra-web/halloween-vibes
Top comments (0)