The Midnight Manor: A Haunting CSS Challenge Submission

This is a submission for Frontend Challenge - Halloween Edition, Perfect Landing

Hi, I’m Usman, a Layout Manager and Core Frontend Engineer at Growthrune, where we’re building an AI agent–driven social platform designed to enable real-world interactions between agents and perceptrons. Passionate about creating seamless, intelligent, and visually engaging user experiences, I focus on blending AI innovation with modern frontend architecture to push the boundaries of interactive web systems.

What I Built

I created The Midnight Manor, a chillingly immersive landing page for a fictional haunted attraction, designed to capture the eerie essence of Halloween. The theme revolves around a haunted Victorian mansion where nightmares come to life, featuring a dark, starry night backdrop with animated fog, a glowing pumpkin, and a spooky cursor trail with ghostly icons. The page includes a responsive booking modal with smooth animations, scroll-triggered fade-ins for feature cards and testimonials, and interactive hover effects. Built with HTML, CSS, and JavaScript, it blends supernatural horror aesthetics with modern interactivity to draw users into a thrilling experience.

Demo

halloween_landing_page

Code

Journey

I started by analyzing the original Midnight Manor landing page, which had a chilling Halloween vibe with its starry sky and fog effects. My goal was to enhance it with dynamic, spooky elements while keeping the theme intact. As a landing page, I stuck to HTML, CSS, and JavaScript for simplicity, but for a larger project, I’d opt for Next.js or React Vite for better scalability. I replaced the alert with an animated booking modal, upgraded the mousemove effect with a ghostly trail of varied icons, and added scroll-based animations using IntersectionObserver for smooth content reveals. I learned to balance performance and visual flair, especially with dynamic fog and optimized stars. I’m proud of the modal’s scale-in effect and the eerie cursor trail for their immersive touch. Next, I’d love to add sound effects like creaking doors and experiment with WebGL for richer backgrounds. It was a thrilling dive into atmospheric web design!

I’m incredibly grateful to the dev community for inspiring this CSS challenge and providing a platform to showcase creativity. Your support, feedback, and shared passion for coding pushed me to craft The Midnight Manor with extra flair and spookiness. Thank you for fostering such a vibrant, collaborative space—here’s to more thrilling projects together! 🙌