Hero made by @ybouane.

@crazygl/hero-notification-storm

Tiny notification, message, alert and success cards stream from deep space toward a tilted product dashboard, curving inward under a magnetic pull and brightening on arrival. Hover anywhere to slow the storm to a crawl.

Demo

Notification Storm

Install

npm install @crazygl/hero-notification-storm

Usage

import NotificationStorm from '@crazygl/hero-notification-storm';

export default function Page() {
  return (
    <NotificationStorm
      heading="All your activity, organized."
      screenshot="https://crazygl.com/samples/screenshot-dashboard-dark.avif"
      notificationStyle="ios-dark"
      revealStyle="stream"
    />
  );
}

Customise

• Screenshot — screenshot (central dashboard; aspect read from the image) plus screenshotX/Y, screenshotScale, screenshotTilt, screenEmissive.
• Notifications — notificationStyle (ios-dark/light, android-dark/light, web-dark/light), revealStyle (stream / drop-in / fade-in / pop), notifications (one per line app | title | body), useAppIcons + appIconColors.
• Cards — cardCount (4–30), cardSize.
• Motion — flowSpeed, pullStrength (magnetic pull), parallaxStrength.
• Atmosphere — haloColor/haloStrength, bgCenter/bgEdge, transparentBackground.

Best for

• CRMs, support and ticketing tools
• Monitoring, observability, and analytics dashboards
• AI agent inboxes and activity feeds — "every event, sorted at the center"

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.