Cyberpunk Stripe Banner Notification

CyberpunkStripeBannerNotification mounts as a fixed overlay at the top or bottom of the viewport. It renders a continuously-animating diagonal-stripe bar, a status message row, and an expandable detail panel that uses a GSAP cloak-style reveal and text scramble. The banner persists until the user dismisses it (stored in localStorage). Use it for site-wide status alerts, maintenance notices, or beta-access prompts.

Installation

npx shadcn@latest add @adv/cyberpunk-stripe-banner-notification

Usage

import { CyberpunkStripeBannerNotification } from '@/components/ui/cyberpunk-stripe-banner-notification';

// In your root layout or page:
<CyberpunkStripeBannerNotification position="top" />

Note: Because the component uses position: fixed, it renders over all other page content. Mount it once in a layout file. Dismiss state is persisted under the key cyberpunk-stripes-banner-dismissed in localStorage.

Example

The live preview below shows a contained, static reproduction of the banner's visual style. The full component is a viewport-level overlay.

Props