Explore the sinister world of Art the Clown through a cinematic web experience with parallax backgrounds, jump scares, and interactive elements.
Art The Clown Cinematic Experience is an interactive web project built with Next.js, React, and TypeScript.
It features full-screen sections, dynamic background animations, jump scares, and cinematic storytelling.
This project demonstrates interactive UI, parallax/animated backgrounds, and sound integration for immersive horror experience.
- 🎬 Hero Section with animated entrance text
- 🌫️ Background Effects — fog overlay and animated background image
- 🔊 Background Music with mute/unmute button
- 🩸 Jump Scare — triggers when reaching the footer with shake animation
- 🖼️ Gallery Section — showcasing Art the Clown images with hover scale effect
- 🎞️ Video Section — cinematic encounter clip
- 📱 Responsive Design — optimized for mobile, tablet, and desktop
- 🖱️ Interactive Header & Navigation with social icons
| Technology | Purpose |
|---|---|
| ⚛️ React | Dynamic UI and animations |
| 🧭 Next.js | File-based routing & optimization |
| 🟦 TypeScript | Type safety and structured code |
| 🎨 Tailwind CSS | Styling and responsive design |
| 🎞️ Framer Motion | Animations, background scaling, jump scare effects |
| 🔊 HTML Audio | Background music integration |
Users can:
- Scroll through full-screen sections with hero, story, gallery, and video 🎬
- Experience foggy and red-tinted animated backgrounds 🌫️
- Listen to cinematic background music with mute/unmute functionality 🔊
- Encounter a jump scare when reaching the footer 🩸
- View a gallery of Art the Clown images with hover animation 🖼️
- Watch a cinematic video clip of Art the Clown 🎞️
- Navigate via social icons and smooth scroll 🖱️
This project demonstrates interactive front-end design, animations, audio integration, and responsive layouts.
Developed by: Your Name
💬 Front-End Developer | Creating cinematic and interactive web experiences