--- /** * RotatingNotificationCards — a thin notification bar that cycles through * a small deck of cards: the front card sits flat and fully opaque while * the next two settle behind it, scaled down and faded. Every few seconds * the front card slides to the back and the next one steps forward. A * custom element reorders the cards on an interval; positions animate via * a springy CSS transition. */ /** One notification in the rotation. */ export interface NotificationCard { /** Bold lead-in before the message, e.g. a sender or product name. */ highlight: string; /** Rest of the message, appended right after the highlight. */ title: string; /** Call-to-action button label. */ cta: string; /** Inline SVG markup for the leading glyph. Rendered as HTML — pass trusted content only. */ icon?: string; /** Background color for the icon chip. */ accent?: string; } interface Props { /** Cards to cycle through (first = front). */ cards?: NotificationCard[]; /** Milliseconds between rotations. */ interval?: number; /** Additional classes for the root element. */ class?: string; } const ORBIT_ICON = ''; const BARS_ICON = ''; const FACET_ICON = ''; const { cards = [ { highlight: 'Nimbus', title: 'finished deploying to production.', cta: 'Open Nimbus', icon: ORBIT_ICON, accent: '#6366f1', }, { highlight: 'Fluxline', title: 'shipped a new release note.', cta: 'Open Fluxline', icon: BARS_ICON, accent: '#0d9488', }, { highlight: 'Arclight', title: 'flagged three anomalies to review.', cta: 'Open Arclight', icon: FACET_ICON, accent: '#d97706', }, ], interval = 3000, class: className, } = Astro.props; /** Depth styling for a card at a given order position (0 = front). */ function depthAt(position: number) { if (position === 0) return { y: 0, scale: 1, opacity: 1, z: 3, name: 'front' }; if (position === 1) return { y: 8, scale: 0.95, opacity: 0.6, z: 2, name: 'mid' }; return { y: 16, scale: 0.9, opacity: 0.3, z: 1, name: 'back' }; } --- { cards.map((card, index) => { const { y, scale, opacity, z, name } = depthAt(index); return (

); }) }

Installation

Install dependencies

Add these files

Configuration

Use it