🌸 Nezuko Kamado | Cinematic Scrollytelling 🌸

A high-performance, dark-tech interactive digital film portfolio featuring the Chosen Demon.
Built with pure HTML5 Canvas, CSS3, and GSAP ScrollTrigger.

Explore Features »

View GitHub · Contact Developer

---

⚡ Overview

This project is a premium "Scrollytelling" experience that pushes the boundaries of web motion and creative engineering. It seamlessly blends WebGL-inspired aesthetics with brutalist typography and a layered, interactive narrative to present a dynamic "Demon Dossier" for Nezuko Kamado.

The core of the experience relies on mapping an 88-frame ultra-high-resolution image sequence directly to the user's scroll progression via HTML5 <canvas>.

✨ Key Features

• 🎬 Cinematic Canvas Scrolling: Ultra-smooth, frame-by-frame scrubbing of high-quality image sequences bound to scroll velocity.
• 🚀 High-Performance Rendering: Zero flickering with requestAnimationFrame scaling and native GSAP hardware acceleration.
• 🌸 Dynamic Thematic UI: A dark, immersive "Pale Pink/Neon" visual system inspired by Nezuko's Blood Demon Art (Combustible Blood).
• 🎛️ Asymmetrical Layouts: Floating glassmorphic panels, edge-aligned typography, and cinematic overlays.
• 📱 Responsive Architecture: Perfectly scaled canvas object-fit: cover calculations that adapt seamlessly to mobile and desktop aspect ratios.
• ✨ Neon Glow Effects: Custom CSS text-stroke and multi-layered text-shadows for ultra-realistic glowing typography.

🛠️ Tech Stack

• Core: Vanilla HTML, CSS, JavaScript (No heavy frameworks required)
• Animation: GSAP (GreenSock) + ScrollTrigger plugin
• Graphics Pipeline: HTML5 Canvas 2D Context API

📂 Project Structure

📁 Nezuko/
├── 📄 index.html      # Main markup, structural DOM elements, and UI Overlays
├── 🎨 styles.css      # Custom styling, neon glow utilities, and responsive design
├── ⚙️ script.js       # Image sequence loading, Canvas rendering, and GSAP logic
└── 📁 sequence/       # Directory containing the 88-frame image sequence (.png)

🚀 Getting Started

To run this project locally, simply serve the directory using any local web server.

Prerequisites

You need a simple HTTP server to avoid CORS issues when loading the canvas image sequence.

# Example using Node.js (http-server)
npm install -g http-server

Installation

1. Clone the repository:

   git clone https://github.com/iamgajanan70/NezukoPortfolio.git

2. Navigate to the directory:

   cd NezukoPortfolio

3. Start a local development server:

   http-server -c-1 -p 8080

4. Open in browser: Navigate to http://localhost:8080

Note: Ensure that your 88 frames are correctly placed in the /sequence/ directory following the naming convention: frame_00_delay-0.09s.png to frame_87_delay-0.09s.png.

🎨 Design System

• Background: #0c080a (Dark warm tint)
• Surface Layer: #170d12
• Primary Accent: #fbcfe8 (Pale Pink / Neon Glow)
• Secondary Accents: #f97316 (Flame Orange), #4ade80 (Bamboo Green)
• Typography: Inter (Google Fonts), System Monospace

👨‍💻 Developer

Gajanan Waichale

• 🌐 GitHub: @iamgajanan70
• 📸 Instagram: @lost_gajanan
• ✉️ Email: someonespecial522@gmail.com

---

"Design translated into living systems."
SYS.END // 2026 DEMON SLAYER ARCHIVES