Halloween Event Website

Cursed Code

Comment

🎃 Haunted Halloween 2025 — Hackathon Story

🧱 Website Sections

The website is divided into immersive sections that guide the visitor through the spooky journey:

  • 🏠 Home / Hero Section – Glitching title and countdown timer
  • 🧭 Navigation Bar – Floating menu with smooth transitions
  • 👀 About Section – Overview of the event and its features
  • ⏰ Event Schedule – Interactive timeline of Halloween activities
  • 🧩 Bento Grid – Information cards for attractions and dates
  • 🕹️ Games & Contests – Halloween-themed interactive events
  • 🧑‍🎤 Team Section – 3D profile cards for the organizing team
  • 🖼️ Gallery – Past Halloween event photos
  • ❓ FAQ Section – Expandable questions with smooth animation
  • ✉️ Contact Section – Styled form and event contact details
  • 🕯️ RSVP Section – Interactive “I DARE” and “I’M TOO SCARED” buttons
  • ⚰️ Footer – Quick links and a spooky disclaimer

👾 The Haunted Glitch Effect

One of the most unique parts of this project is the Haunted Glitch Effect — a mysterious, unpredictable event that appears at random intervals.

When it triggers, eerie distortions, flickering lights, and ghostly overlays flash across the screen for a few seconds — giving visitors the feeling that the site is haunted.
Each time it happens, the animation looks slightly different, making it unpredictable and immersive.

This effect reflects the idea that even the digital world can be “possessed.”
It’s a perfect blend of creative animation timing and thematic design, keeping users engaged and intrigued every time it appears.

💡 Inspiration

The inspiration for Haunted Halloween 2025 came from wanting to create an interactive haunted experience on the web — something that goes beyond static visuals.
We wanted a site that feels alive, where design and code combine to bring Halloween’s eerie energy to the screen.

From movies, haunted houses, and classic Halloween nights — we drew from everything that gives people chills, laughter, and excitement.

🏗️ How We Built It

We built the project using HTML, CSS, and JavaScript, enhanced with Three.js and GSAP libraries.

  • HTML structured the layout into clear themed sections.
  • CSS handled the design — gradients, glows, shadows, and smooth transitions.
  • GSAP made motion effects and entry animations more dynamic.
  • Three.js added subtle 3D depth, like floating bats and glowing particles.
  • JavaScript controlled interactivity, the countdown timer, and the random haunted glitch trigger.

Everything was built from scratch — no templates, just creativity and code.

⚙️ Challenges We Faced

Like every haunted project, we ran into our share of ghosts 👻:

  • Making the glitch feature random but not too frequent
  • Ensuring animations ran smoothly across devices
  • Keeping 3D effects optimized without lag
  • Syncing GSAP animations with scroll behavior
  • Adjusting hover effects to stay readable on all backgrounds

Balancing performance with style was tricky — the more “spooky” effects we added, the more optimization we needed.

🧠 What We Learned

Through this project, we learned how to:

  • Combine creative design with technical precision
  • Use animation libraries like GSAP to bring visuals to life
  • Apply random logic and timing for natural, surprising effects
  • Manage CSS transitions, hover states, and 3D depth smoothly
  • Design a consistent theme that fits a story

Most importantly, we learned that even a simple web page can tell a story — it can make people feel something.
In our case, we made them feel haunted.

Built With

Share this project:

Updates