CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
Project Overview
This is a Matrix-style digital rain effect web application built with vanilla HTML5 Canvas and JavaScript. The application creates a 3D layered animation effect with falling characters and special text messages.
Running the Application
Simply open index.html in a web browser - no build process or server required.
Code Architecture
Core Components
- index.html: Main HTML file with embedded CSS styling for the Matrix effect
- script.js: Complete animation logic using HTML5 Canvas API
Key Systems
3D Layered Animation System (script.js:24-57):
- 10 depth layers with different opacities, font sizes, and perspective offsets
- Front layers (higher z-index) have larger fonts and higher opacity
- Back layers create depth illusion with smaller fonts and lower opacity
Character Rendering (script.js:12-17):
- Uses Japanese katakana, Latin letters, and numbers for authentic Matrix appearance
- Random character selection from combined alphabet
Special Text System (script.js:29-34, 81-94, 144-155):
- Periodic spawning of "NIGHT OF CODING 2025" messages in yellow
- Special drops move independently through the rain effect
- Only appears in front 3 layers for visibility
Animation Loop (script.js:59-161):
- 80ms intervals (~12.5 FPS) for smooth but visible character drops
- Layer-specific fade effects create trailing characters
- Automatic canvas resizing on window resize
Performance Considerations
The animation renders all layers each frame with opacity-based fading. Canvas dimensions automatically adjust to window size, recalculating column counts and positioning.