🦇 Haunted Pixels: A Cinematic Halloween Landing Page

#frontendchallenge #devchallenge #javascript #webdev

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

🎃 What I Built

Haunted Pixels is a fully interactive Halloween landing page. Part art installation, part frontend engineering showcase.

Built with React + TypeScript + Tailwind, it merges atmospheric design with smooth interactivity to create a living, breathing haunted world inside the browser.
Every layer from the fog and lightning to the crawling spiders is modular and reactive.

✨ Core Features

🧱 Component-based horror system — Each visual effect (bats, spiders, lightning, glitch, etc.) is an independent React component.
🕸 Dynamic Floating Entities — Animated bats and spiders drift across the viewport in organic motion loops.
💀 Cinematic Parallax + Glitch FX — Multi-depth background and screen distortions amplify immersion.
💡 Responsive & Accessible — Smooth scroll, keyboard focus, and semantic alt tags on all visual elements.
⏰ Animated Header — Real-time spooky clock, glowing logo, and smooth transitions on scroll.
🔊 Ambient Creepy Audio — Subtle sound layers that adapt with movement and hover.

👻 Demo

🌐 Live Demo: https://couragecodejourney.github.io/haunted-pixels-perfect/
📦 Source: GitHub Repository

🧩 Technical Breakdown

The landing page is built with:

React + TypeScript for maintainable and modular UI.
Tailwind CSS for scalable, token-driven theming (custom HSL palette for Halloween tones).
Vite for lightning-fast builds and GitHub Pages deployment.
Custom Animation System: Defined in index.css using CSS keyframes for ghost-float, blood-drip, bat-fly, and screen-shake.

Component Example – Floating Entities

const [entities, setEntities] = useState<Entity[]>([]);
useEffect(() => {
  const types = ["bat", "bat", "bat", "spider", "spider", "spider", "spider"];
  setEntities(types.map((type, i) => ({
    id: i,
    top: Math.random() * 100,
    left: Math.random() * 100,
    size: 80 + Math.random() * 80,
    type,
  })));
}, []);

Each entity is independently animated, creating believable random movement without heavy libraries.

🕯 Journey

I wanted to push beyond typical Halloween themes not just spooky visuals, but a haunted atmosphere that feels alive.

I experimented with layering depth and rhythm: subtle motion, ambient flickers, and light-to-dark transitions that react to scroll and hover.

The hardest challenge was balancing performance and cinematic animation, ensuring the multiple background and entity layers ran smoothly on mobile while retaining visual fidelity.

I also implemented a minimal design system via HSL tokens, so colors, shadows, and glows could be tuned across all components consistently.

In the end, Haunted Pixels became more than a landing page, it’s a technical mood piece that fuses frontend fundamentals with Halloween storytelling.

🦇 “Enter if you dare.”

DEV Community