A Cyberpunk notification library with glitch animations and typewriter effects.

Source: Dev.to

Installation

npm install cyberpunk-notify

Basic Usage (React)

import { CyberpunkToast } from "cyberpunk-notify";

function App() {
  const notify = () => {
    CyberpunkToast.show({
      message: "Welcome to the future!",
      type: "info",
    });
  };

  return <button onClick={notify}>Show Notification</button>;
}

Customization

You can override the default styles by defining CSS variables in your stylesheet:

:root {
  --cp-notify-bg: #0f0f0f;
  --cp-notify-color: #00ff41;
  --cp-glitch-intensity: 0.8;
  --cp-typewriter-speed: 50ms;
}

Demo

A live demo is available on the project’s GitHub page, showcasing different notification types (info, success, warning, error) with the glitch and typewriter effects.

---

This article was originally published on Dev.to.