Kiroween Vibes

Give any website a Halloween vibe

Comment

Inspiration

Halloween has always been about atmosphere — spooky visuals, eerie sounds, and unpredictable jump scares. We wanted to bring that same immersive experience to any website on the internet. Halloween Vibes was born from the idea of transforming an ordinary browsing session into a fun, creepy, and fully interactive Halloween adventure. 🎃👻

What it does

Halloween Vibes is a Chrome extension that instantly converts any website into a spooky Halloween environment.

✨ Key Features

Visual Magic: Floating pumpkins, bats, spiders, webs, witches, and themed cursors

Audio Effects: Ambient eerie music + jump scare sounds (user-controlled & tab-aware)

Jump Scares: Skull fly-bys, zombie peeks, Bloody Mary crack effects

Smart Engine:

Overlay mode that preserves original site layouts

Per-tab sound controller

Automatic pause/resume when switching tabs

Performance-optimized injection

Developer Friendly: Built with React, TypeScript, Vite, and Framer Motion

How we built it

We structured Halloween Vibes as a modern Chrome extension using:

React 18 + TypeScript for the popup UI

Vite for ultra-fast builds

Tailwind CSS for styling

Framer Motion for animations

Chrome Storage API for user preferences

Web Audio API for sound and jump scare effects

A content script injects decorations, themes, and audio logic into any active tab. A background service worker handles extension state and communication.

Challenges we ran into

🔊 Sound Management Challenges

Preventing audio from duplicating across tabs

Keeping ambient music and jump scares in sync

Complying with strict browser autoplay policies

Making per-tab sound toggles work reliably

🧩 Technical Challenges

Integrating React + Vite with Chrome Manifest V3

Handling imports inside content scripts

Avoiding broken layouts caused by overlays

Working around websites with strict CSP rules

Accomplishments that we're proud of

A fully polished Halloween extension that works on nearly all websites

Smooth and stable visual effects that don’t break page layouts

A responsive and clean popup UI

A tab-aware sound system that works exactly how users expect

Fun, lightweight jump scares

Optimized performance:

<10MB memory usage

<50ms injection time

What we learned

How browser autoplay restrictions affect audio behavior

Managing multi-tab communication in Chrome extensions

Advanced animation techniques using Framer Motion

Setting up a scalable Chrome extension workflow with Vite

Balancing creativity with performance and accessibility

What's next for Halloween Vibes

🎨 Multi-Theme Expansion

New Halloween styles (cute, gothic, retro, cyberpunk)

Holiday themes such as:

🎄 Christmas

🎆 New Year

💖 Valentine’s Day

🐇 Easter

🎉 Birthday mode

🧰 Feature Additions

Custom user sound packs

Adjustable jump scare timing

More decorations & animations

Theme selector inside the popup

Seasonal event updates year-round

Halloween Vibes is evolving into a full seasonal web transformation extension, making the web festive and fun no matter the time of year. 🌟

Built With

Share this project:

Updates