👾 CyberToast.js

CyberToast is a lightweight, zero-dependency JavaScript notification library inspired by Cyberpunk and Sci-Fi aesthetics. It features a typewriter effect, glitch animations, CRT scanlines, and a retro-terminal design.

🔗 Demo

👉 Live Demo

✨ Features

• Typewriter Effect — Text appears character by character, like a terminal boot sequence.
• Glitch Animations — Dramatic entry and exit with skew, blur, and RGB chromatic aberration.
• CRT Scanlines — Animated scanline sweep and subtle screen-noise overlay.
• Neon Pulse — Themed border glow that pulses while the toast is visible.
• Progress Bar — A countdown bar shows how much time is left before auto-dismiss.
• Hover to Pause — Hovering over a toast pauses both the timer and the progress bar.
• Click to Dismiss — Click any toast to close it immediately.
• Zero Dependencies — Pure Vanilla JS. No jQuery, no framework required.
• Auto-Injection — No separate CSS file needed. Styles are injected automatically.
• Customizable — Control typing speed, position, and duration.

📦 Installation

Just download src/CyberToast.js and include it in your project.

<script src="path/to/CyberToast.js"></script>

🚀 Usage

Initialize the library once, then call .show() whenever you need a notification.

// 1. Initialize
const toaster = new CyberToast({
    position: 'top-right', // 'top-right', 'top-left', 'bottom-right', 'bottom-left'
    typingSpeed: 40,       // speed in ms per character
    duration: 4000         // time before auto-dismiss
});

// 2. Show notifications
toaster.show('Access Granted', 'success');
toaster.show('System Failure', 'error');
toaster.show('Downloading...', 'info');

🎨 Configuration

Option	Type	Default	Description
position	String	'top-right'	Corner to display toasts.
duration	Number	4000	How long the toast stays visible (ms).
typingSpeed	Number	30	Speed of the typewriter effect (ms per char).

🖱️ Interactions

Action	Behavior
Hover	Pauses the auto-dismiss timer and progress bar.
Mouse leave	Resumes the countdown from where it was paused.
Click	Dismisses the toast immediately with a glitch-out exit.

👨‍💻 Author

Krystian Welcel