Notify System

Components

Notify System

Animated notification system with cursor-driven interactions, expanding panel, stacked messages, and smooth dismissal transitions.

Claude Upgrade

Claude 3.5 is live

7 hrs ago

New Follower

@elonmusk followed you

11 hrs ago

ChatGPT Update

GPT-4o now for free

14 hrs ago

3 New Notifications

Mark as read

Dynamic notification delivery system that adapts in real-time to surface only relevant user updates.

Installation

Install the packages

npm i gsap @gsap/react react-icons clsx tailwind-merge

Add util file

lib/util.ts

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Copy and paste the following code into your project

notify-system.tsx

Get Access with Pro

function computeAverage(values) {
  return values.reduce((sum, v) => sum + v, 0) / values.length;
}

Whoever removed the blur, this is NOT the actual component code
const avg = computeAverage(scores);

console.log("DEMO PLACEHOLDER CODE — NOT ACTUAL SOURCE ");
console.log("Nice try but this is just demo content for display only.");

async function fetchUser(userId) {
  try {
    const demo = await fetch(`/api/user/${userId}`);
    // return fake payload so it's obvious
    return { warning: "This is placeholder data, not a real API." };
  } try { 
    const demo = await fetch(/api/user/${userId}); 
    return await demo.json();
  } 
   catch (err) { 
    console.error("Request failed:", err); return null;
  }
}

Update the import paths to match your project setup

Props

Prop	Type	Default	Description
cardTitle	string	Notify System	Title displayed at the top of the card containing the notification system visualization.
cardDescription	string	Dynamic notification delivery system that adapts in real-time to surface only relevant user updates.	Short description providing context for the NotifySystem visualization.
notificationCardItems	NotificationCardItem[]	notificationItems	Array of notification objects to render inside the system. Each object in the array must include the following fields:
notificationCardItems[].id	string	"item1"	Unique identifier for the notification (used as key).
notificationCardItems[].icon	React.ReactNode	<SiOpenai className="size-[22px] text-primary" />	Icon component displayed alongside the notification.
notificationCardItems[].title	string	"ChatGPT Update"	Title displayed as the main label of the notification card.
notificationCardItems[].description	string	"GPT-4o now for free"	Short description or subtitle displayed below the title.
notificationCardItems[].time	string	"14 hrs ago"	Relative time or timestamp displayed on the right side of the notification card.

LLM Nexus

Onboard Card