This is a submission for Frontend Challenge - Halloween Edition, Perfect Landing
What I Built
HalloweenFest 2025 - an immersive landing page for a fictional three-day Halloween festival at "Hollow Manor." Built with vanilla HTML/CSS/JS (no frameworks), it's a sub-50KB experience that combines spooky atmosphere with solid frontend fundamentals.
Features include atmospheric animations (floating bats, flickering candles, pulsing jack-o'-lantern), an interactive ghost mascot, scroll-triggered timeline, parallax effects, and mobile-first responsive design. The theme balances spooky with family-friendly, offering haunted attractions, mystical entertainment, costume contests, and a midnight circus.
Demo
Or view it directly: HalloweenFest 2025 Live Demo
Journey
Concept: Created a fictional festival mythology to design immersive features like "welcome potions" and ghost story circles.
Technical Wins:
- Performance-first animations using CSS will-change and throttled scroll events
- Native Intersection Observer API for scroll reveals (no libraries needed)
- CSS custom property theme system for rapid design iteration
- Maintained full keyboard accessibility and 4.5:1 contrast ratios throughout
Proud Of: Building everything from scratch with zero dependencies - every line of code is intentional and optimized. The interactive ghost mascot adds personality, and the mobile-first approach ensures graceful degradation across all devices.
Lessons Learned: CSS animations are incredibly powerful when optimized properly, semantic HTML improves both SEO and JavaScript targeting, and the will-change property eliminates paint flashing during scroll.
Next Steps: Would add PWA capabilities, real payment processing, skeleton loading states, and WebGL particle effects.
License: MIT License - feel free to fork and spook-ify for your own needs!
Credits: Built solo by @aniruddhaadak for the Frontend Challenge - Halloween Edition.
Happy Halloween, coders! 🎃👻🦇
Top comments (0)