Cyberpunk Toast Notifications with Glitch Effects – CyberToast.js

CyberToast.js is a vanilla JavaScript notification library that displays cyberpunk-style toast messages with typewriter text and glitch transitions.

The library creates stacked notifications in any screen corner, handles timed dismissal, and injects its complete stylesheet at runtime.

It’s ideal for sci-fi dashboards, browser games, neon landing pages, and terminal-themed web UI.

Features:

• Typewriter message reveal with a blinking terminal cursor.
• RGB glitch effects during entry and exit.
• CRT scanlines and pulsing neon borders.
• Success, error, and info color themes.
• Four fixed screen-corner positions.
• Countdown progress bar with hover pause.
• Click-anywhere dismissal.
• Runtime stylesheet injection from one JavaScript file.

See it in action:

How to use it:

1. Include the CyberToast.js script after the main page content.

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

2. Create one instance and reuse it for every notification that belongs in the same screen corner.

const notifications = new CyberToast({
  position: 'top-right',
  typingSpeed: 35,
  duration: 4500
});
notifications.show('Profile synchronized', 'success');

3. The second argument passed to show() selects the notification type.

notifications.show('Deployment completed', 'success');
notifications.show('Connection interrupted', 'error');
notifications.show('Patch notes loaded', 'info');

4. All configuration options.

• position (string): Sets the notification corner. Supported values are top-right, top-left, bottom-right, and bottom-left. The default value is top-right.
• duration (number): Sets how many milliseconds the toast remains after the typewriter sequence finishes. The default value is 4000.
• typingSpeed (number): Sets the delay between characters in milliseconds. The default value is 30.

5. CyberToast.js inserts a single <style> element with the ID cyber-toast-styles. The generated elements use regular DOM nodes, and page-level CSS can target their classes.

The success, error, and info themes set two CSS custom properties:

• --toast-accent controls text, borders, the cursor, and the progress bar.
• --toast-glow controls outer glow effects.

Use a more specific selector when custom rules load before the injected stylesheet.

body .cyber-toast.success {
  --toast-accent: #b6ff00;
  --toast-glow: rgba(182, 255, 0, 0.4);
}
body .cyber-toast.error {
  --toast-accent: #ff7a00;
  --toast-glow: rgba(255, 122, 0, 0.4);
}
body .cyber-toast {
  font-family: "IBM Plex Mono", monospace;
  border-width: 2px;
}

The default toast width starts at 300px, and each container sits 30px from its assigned edges. Narrow mobile layouts may need smaller offsets and a flexible width.

@media (max-width: 480px) {
  body .cyber-toast-container.top-right {
    top: 12px;
    left: 12px;
    right: 12px;
  }
  body .cyber-toast-container.top-right .cyber-toast {
    width: 100%;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
  }
}

Alternatives:

• SVG Gooey Toast Notification Library: Physics Toast
• Customizable Framework-Agnostic JavaScript Toast Notification Library: honey-toast
• Simple Toast Notification System: Toastinette.js
• Vanilla ES6 JavaScript Toast Notification Library: toaster-js