Halo Notification

Animated notification with rim glow and glyph stagger. Renders a polished toast surface with sliding and fading effects. Use for local AnimatePresence notifications with rim variants and glyph stagger.

byjordan from Cult UI

Installation

terminal

pnpm dlx layro-cli add @nolly-studio/halo-notification

npx layro-cli add @nolly-studio/halo-notification

npx layro-cli add @nolly-studio/halo-notification

bunx layro-cli add @nolly-studio/halo-notification

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

/**
 * Polished notification surface (`HaloPolishedToastSurface`) and
 * {@link HaloPolishedNotification} — slide + fade shell for local
 * `<AnimatePresence>` use. Self-contained {@link HaloCard}, rim variants, and
 * glyph stagger (no imports from `halo-card.tsx`). App-wide Sonner toasts:
 * `@/components/cult-pro/halo-toast`.
 */
import {
  forwardRef,
  useEffect,
  useMemo,
  useState,