A cyberpunk-inspired digital rain animation that brings the iconic matrix rain effect to life with modern web technologies. Create mesmerizing visual displays with customizable text, colors, and effects.

SynthRain-drbaph.mp4

✨ Features

• 🎨 Customizable Colors: Choose any color for your rain effect with a built-in color picker
• 📝 Custom Text: Input your own characters or use the default cyberpunk-style text
• 🎮 Interactive Controls:
  • Adjust rain speed in real-time
  • Control character size
  • Toggle fullscreen mode
  • Hide/show interface

• 📸 Media Capture:
  • Take instant screenshots
  • Record video clips
• 📱 Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
• ⌨️ Keyboard Shortcuts: Quick access to common features

🚀 Quick Start

1. Clone the repository:

git clone https://github.com/Saganaki22/SynthRain.git

2. Open index.html in your web browser

That's it! No build process or dependencies required.

🎮 Controls

• Text Input: Enter custom characters for the rain effect

• Color Picker: Select any color for the rain

• Speed Slider: Control the rain animation speed

• Size Slider: Adjust the character size

• Toggle Button: Show/hide the control interface (Esc key)

• Fullscreen Button: Enter/exit fullscreen mode

• Camera Button: Take a screenshot

• Record Button: Capture video clips

  

🛠️ Technical Details

SynthRain is built with vanilla JavaScript and HTML5 Canvas, focusing on performance and smooth animations. It uses:

• HTML5 Canvas for rendering
• Media Recorder API for video capture
• Fullscreen API for immersive experience
• CSS Grid and Flexbox for responsive layout

📜 License

Copyright 2025 drbaph

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

🙌 Contributing

Contributions are welcome! Feel free to submit issues and pull requests.

🎥 Demo

Check out the live demo: SynthRain Demo

---

Made with 💚 by drbaph