🎃 Eldritch Eclipse | Frontend Challenge: Halloween Edition

#frontendchallenge #devchallenge #javascript #webdev

Frontend Challenge Perfect Landing Submission 🦇🎃

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

What I Built

Eldritch Eclipse – A horror-themed Halloween festival landing page that combines brutalist design, glitch animations, and immersive 3D effects to create an unsettling yet engaging user experience.

🎭 The Vision

A landing page that doesn't just tell you about a spooky event—it makes you feel the dread. Every scroll, every hover, every interaction reinforces the Halloween atmosphere through:

Glitch text effects that destabilize as you read
Pulsating red accents that evoke supernatural presence
Comic-book brutalism buttons that feel hand-drawn and chaotic
3D fog effects (Vanta.js) that blur the line between digital and otherworldly

🎨 Design Philosophy

Dark Brutalism – Harsh blacks, blood reds, and jagged clip-paths create visual tension
Accessibility First – All animations respect prefers-reduced-motion, form validation is clear, semantic HTML throughout
Smooth Interactions – Lenis smooth scrolling + AOS animations ensure premium feel without janky transitions
Responsive Horror – Works flawlessly on mobile, tablet, and desktop

🏗️ Halloween Theme

The Eldritch Eclipse festival frames Halloween as a cosmic horror event—your ticket "is not a guarantee of safe return." This dark comedy tone runs through:

Feature cards offering "Graveyard Deals" and spectral lineup descriptions
A registration form that feels like signing away your soul
Testimonials from "survivors" who attended previous events
A schedule presented as a countdown to something ominous

⚡ Technical Highlights

Zero build step – Pure HTML/CSS/JS with CDN libraries
Modern animations – AOS (Animate on Scroll), Vanta.js (3D fog), custom glitch keyframes
Form validation – Real-time feedback with comic-button submit states
Intersection Observer – Performant scroll reveals without libraries
Tailwind CSS – Utility-first responsive design

This project proves you can create a production-grade, spooky landing page using vanilla web standards and modern CDN libraries—perfect for portfolios, hackathons, or just celebrating Halloween with code! 🎃👻

Demo

srijan-xi.github.io

Journey

🎯 Starting Point

I began with a blank canvas and a single goal: create a Halloween landing page that feels genuinely spooky, not just themed. Most Halloween projects lean on orange pumpkins and friendly ghosts—I wanted to explore the unsettling side of the holiday through brutalist design and horror aesthetics.

🛠️ The Build Process

Phase 1: Foundation & Theme

Started with semantic HTML and Tailwind CSS for rapid prototyping
Defined a strict color palette: blood red (#B30000), pure black (#0A0A0A), and amber accents
Created custom CSS variables to ensure consistency across all components
Built the glitch text animation from scratch using text-shadow and keyframes

Phase 2: Interactivity & Polish

Integrated Lenis for buttery-smooth scrolling—the difference is night and day
Added AOS (Animate on Scroll) for performant, staggered reveal animations
Experimented with Vanta.js for ambient 3D fog backgrounds—ended up loving how it adds depth without being distracting
Designed three distinct button styles to match different interaction contexts:
- Sleek .btn for primary CTAs
- Comic-brutalist .comic-brutal-button for forms (complete with halftone and ink splatter effects)
- Animated .crush-btn for secondary actions

Phase 3: User Experience

Built a complete registration form with real-time validation
Implemented form submission feedback with button state transitions
Added a mobile hamburger menu for responsive navigation
Ensured all animations respect prefers-reduced-motion for accessibility

💡 What I Learned

Animation storytelling – Animations aren't just eye candy; they guide users and reinforce narrative. Every glitch, every fade-in tells part of the "cosmic horror" story.
CDN-first approach works – You don't need a build step for modern web development. Libraries like Lenis, AOS, and Vanta.js deliver production-quality features straight from CDN.
Accessibility + brutalism can coexist – Dark themes, glitch effects, and stark designs can still be accessible with semantic HTML, ARIA labels, and motion preferences.
Micro-interactions matter – The .btn:hover glow, the .comic-brutal-button burst animation, the sticky header fade—these tiny details compound into a cohesive, premium feel.
CSS variables are a game-changer – Switching the entire color scheme takes one line of code. This scales beautifully for theme variations or client customizations.

🎓 Key Takeaway

Building Eldritch Eclipse taught me that constraints breed creativity. By committing to a specific aesthetic (brutalist horror) and keeping the tech stack lean (vanilla JS + CDN libraries), I created something far more cohesive and memorable than a generic "pretty" landing page. The best projects aren't about using the most tools—they're about making intentional choices that serve the vision.

I'm excited to iterate on this foundation and explore how motion design and dark aesthetics can tell stories beyond Halloween. 🎃👻