赛博朋克通知库，带故障动画和打字机效果

Source: Dev.to

一个轻量级前端库，为网页通知带来赛博朋克美学。它提供：

• Glitch 动画，营造复古未来感。
• 打字机效果，实现文字的动态出现。
• 通过简单的组件/API，轻松集成 React（或原生 JavaScript）。
• 可自定义的 CSS 变量，用于调节颜色、Glitch 强度和动画速度。

安装

npm install cyberpunk-notify

基本用法（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>;
}

自定义

你可以在样式表中定义 CSS 变量来覆盖默认样式：

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

演示

项目的 GitHub 页面提供了在线演示，展示了不同通知类型（info、success、warning、error）以及 Glitch 和打字机效果。

---

本文最初发布于 Dev.to。