Eidetic

Announcement Ticker

Feedback
Marketing
Layout

A horizontally scrolling marquee for displaying announcements with NEW badges and pause-on-hover support.

Preview

Default announcement ticker with scrolling animation

NEW🚀 New: GPT-4o support now available•
📊 Model evaluation reports now export to PDF•
🎉 Over 1 million evaluations completed this month•
NEW⚡ 40% faster inference with our new engine•
🔒 SOC 2 Type II certification achieved•
NEW🚀 New: GPT-4o support now available•
📊 Model evaluation reports now export to PDF•
🎉 Over 1 million evaluations completed this month•
NEW⚡ 40% faster inference with our new engine•
🔒 SOC 2 Type II certification achieved•

Custom Announcements

Provide custom announcement items

NEWVersion 3.0 is now available•
Scheduled maintenance on Saturday 2am-4am UTC•
NEWNew API endpoints for batch processing•
NEWVersion 3.0 is now available•
Scheduled maintenance on Saturday 2am-4am UTC•
NEWNew API endpoints for batch processing•

Custom Speed

Slower animation duration for readability

NEW🚀 New: GPT-4o support now available•
📊 Model evaluation reports now export to PDF•
🎉 Over 1 million evaluations completed this month•
NEW⚡ 40% faster inference with our new engine•
🔒 SOC 2 Type II certification achieved•
NEW🚀 New: GPT-4o support now available•
📊 Model evaluation reports now export to PDF•
🎉 Over 1 million evaluations completed this month•
NEW⚡ 40% faster inference with our new engine•
🔒 SOC 2 Type II certification achieved•

Props

Component API reference

PropTypeDefaultDescription
announcementsAnnouncement[][...defaultAnnouncements]Announcements to display (id, text, isNew)
durationnumber20Animation duration in seconds (higher = slower)
pauseOnHoverbooleantrueWhether to pause animation on hover
newBadgeTextstring'NEW'Text for the new badge
classNamestring—Additional CSS classes

Usage

Import and implementation example

import { AnnouncementTicker } from '@/components/ui/announcement-ticker'
import type { Announcement } from '@/components/ui/announcement-ticker'


const announcements: Announcement[] = [
  { id: 1, text: 'New feature: Dark mode', isNew: true },
  { id: 2, text: 'Performance improvements', isNew: false },
  { id: 3, text: 'API v2 now available', isNew: true },
]


export default function Example() {
  return (
    <AnnouncementTicker
      announcements={announcements}
      duration={25}
      pauseOnHover
      newBadgeText="NEW"
    />
  )
}

Features

Built-in functionality

  • Marquee animation: Smooth infinite horizontal scrolling via CSS animation
  • Pause on hover: Animation pauses when user hovers over the ticker
  • NEW badges: Highlight new announcements with a colored badge
  • Seamless loop: Duplicated items for continuous scrolling without gaps
  • Configurable speed: Control animation duration for faster or slower scrolling
  • Custom badge text: Override the NEW badge text

Accessibility

Accessibility considerations

ARIA Attributes

Content is rendered as visible text elementsNEW badge is visually distinct with high contrast

Keyboard Navigation

KeyAction
N/ANon-interactive scrolling content

Notes

  • Pause on hover allows users to read content at their own pace
  • Consider providing a static alternative for users who prefer reduced motion
  • Announcements should be concise and readable at scroll speed
  • Screen readers will read the full content regardless of animation

Related Components

BannerAlertToast