Source: Dev.to

A Cyberpunk Notification Library with Glitch Animations and Typewriter Effects

A lightweight front‑end library that brings a cyber‑punk aesthetic to web notifications. It provides:

• Glitch animations that give a retro‑futuristic feel.
• Typewriter effects for dynamic text appearance.
• Easy integration with React (or plain JavaScript) via a simple component/API.
• Customizable CSS variables to tweak colors, glitch intensity, and animation speed.

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.