사이버펑크 알림 라이브러리와 글리치 애니메이션 및 타자기 효과

Source: Dev.to

웹 알림에 사이버펑크 미학을 부여하는 가벼운 프런트‑엔드 라이브러리입니다. 주요 기능:

• 글리치 애니메이션으로 레트로‑퓨처리즘 느낌을 제공합니다.
• 타이프라이터 효과를 통해 동적인 텍스트 표시가 가능합니다.
• 간단한 컴포넌트/API를 이용해 React(또는 순수 JavaScript)와 쉽게 통합할 수 있습니다.
• 색상, 글리치 강도, 애니메이션 속도 등을 조정할 수 있는 CSS 변수를 커스터마이징할 수 있습니다.

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

다음과 같이 스타일시트에 CSS 변수를 정의하여 기본 스타일을 덮어쓸 수 있습니다:

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

Demo

프로젝트의 GitHub 페이지에서 라이브 데모를 확인할 수 있으며, 글리치와 타이프라이터 효과가 적용된 다양한 알림 유형(info, success, warning, error)을 보여줍니다.

---

이 글은 원래 Dev.to에 게시되었습니다.