🎃 Spookify - Halloween Landing Page

#frontendchallenge #devchallenge #javascript #webdev

Frontend Challenge Perfect Landing Submission 🦇🎃

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

What I Built

A stunning, fully-featured Halloween-themed landing page built with modern web technologies. This project showcases advanced animations, interactive elements, and responsive design for an immersive spooky experience.

✨ Features

🎨 Visual Effects

Animated Particle System - 80 floating particles with Halloween colors (orange, red, white)
Custom Ghost Cursor - Interactive ghost cursor with glowing trail effect
GSAP Scroll Animations - Professional parallax effects and scroll-triggered animations
Hover Micro-interactions - Spooky shake, glow pulse, and 3D transform effects
Gradient Borders - Rotating gradient animations on card hover
Pumpkin Glow Effects - Pulsing orange glow throughout the page

🎭 Interactive Elements

Responsive Mobile Menu - Slide-in hamburger menu for mobile devices
Interactive Particles - Particles react to mouse hover and clicks
Smooth Scroll Animations - Elements fade in and animate on scroll
CTA Button - Continuous pulse animation with enhanced hover effects
Auto-hiding Navbar - Navbar hides on scroll down, shows on scroll up

📱 Responsive Design

Fully responsive on all devices (mobile, tablet, desktop)
Optimized particle count for mobile performance (40 vs 80)
Custom cursor disabled on touch devices
Mobile-optimized text sizes and spacing
Adaptive grid layouts

🚀 Performance

60 FPS animations with GSAP
Optimized particle rendering
Once-only animations to prevent re-rendering
Efficient scroll triggers
Touch-device detection for better mobile UX

Demo

Spookify Halloween Art Challenge

Journey

1. Advanced Animation Techniques

GSAP ScrollTrigger Mastery: Learned how to create professional parallax effects and coordinate multiple scroll-triggered animations
Canvas API for Custom Effects: Built a custom cursor with trailing effects using HTML5 Canvas
Animation State Management: Discovered the importance of using gsap.set() and gsap.fromTo() for reliable initial states
Performance Optimization: Implemented once: true flags to prevent animations from reversing and causing layout issues

2. React & Next.js Best Practices

Client-Side Components: Used "use client" directive effectively for interactive components
useEffect Lifecycle: Managed side effects and cleanup for animations, event listeners, and canvas rendering
Component Composition: Built modular, reusable components that work together seamlessly
TypeScript Integration: Leveraged TypeScript for type-safe props and better developer experience

3. Responsive Design Patterns

Mobile-First Approach: Implemented responsive breakpoints using Tailwind's utility classes
Touch Device Detection: Learned to detect touch devices and disable features like custom cursor for better UX
Adaptive Performance: Reduced particle count on mobile devices (40 vs 80) for better performance
Responsive Grid Systems: Mastered grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 patterns

4. CSS Animation Techniques

Keyframe Animations: Created complex animations like spooky-shake, glow-pulse, and cta-pulse
CSS Gradients: Implemented rotating gradient borders and multi-layer gradient backgrounds
Transform & Filter Effects: Used transform, filter, and backdrop-blur for modern visual effects
CSS Variables: Defined custom color palette with CSS custom properties for consistency

5. Performance & Optimization

60 FPS Target: Ensured all animations run at 60 FPS using GSAP and optimized CSS
Lazy Loading: Particles and animations only initialize when components mount
Z-Index Layering: Properly managed stacking contexts to prevent overflow issues
Event Listener Cleanup: Learned to remove event listeners in useEffect cleanup functions

6. Problem-Solving & Debugging

Animation Conflicts: Resolved conflicts between Framer Motion and GSAP by choosing the right tool for each job
Scroll Behavior Issues: Fixed hero section overflow by adding overflow-hidden and proper z-index
Visibility Problems: Debugged cards disappearing by understanding toggleActions and animation lifecycle
State Persistence: Ensured elements stay visible after animations complete

7. Third-Party Library Integration

tsparticles: Integrated and configured a complex particle system with custom options
GSAP + ScrollTrigger: Combined multiple GSAP plugins for advanced scroll effects
Framer Motion: Used alongside GSAP for different types of animations
Package Management: Used pnpm for efficient dependency management

8. UI/UX Design Principles

Visual Hierarchy: Created clear focus points with size, color, and animation
Micro-interactions: Added delightful details that enhance user engagement
Accessibility Considerations: Disabled problematic features on touch devices
Theme Consistency: Maintained Halloween aesthetic throughout all components

Top comments (4)

shemith mohanan • Oct 22

Wow, this is next-level! 🎃 The amount of detail you’ve packed in — from GSAP ScrollTrigger to the custom ghost cursor — makes this landing page feel alive.
Loved how you balanced aesthetics with performance (especially optimizing particle counts for mobile).
It’s not just spooky; it’s smart design in action! 👏🦇