SystemTicker
Scrolling horizontal ticker bar that continuously displays system status messages. Renders a seamless infinite-scroll animation using duplicated content. Ideal for status bars, dashboards, and decorative system UI.
Default Messages
Preview
sys.status: online // sec.level: classified // net.latency: 12ms // mem.usage: 64% // cpu.load: 0.42 // uptime: 99.97%sys.status: online // sec.level: classified // net.latency: 12ms // mem.usage: 64% // cpu.load: 0.42 // uptime: 99.97%sys.status: online // sec.level: classified // net.latency: 12ms // mem.usage: 64% // cpu.load: 0.42 // uptime: 99.97%
Custom Messages
Preview
agent.alpha: deployed // agent.bravo: standby // net.status: nominal // threat.level: lowagent.alpha: deployed // agent.bravo: standby // net.status: nominal // threat.level: lowagent.alpha: deployed // agent.bravo: standby // net.status: nominal // threat.level: low
Speed Variants
Preview
slow.ticker: 40s cycle // demo: runningslow.ticker: 40s cycle // demo: runningslow.ticker: 40s cycle // demo: running
normal.ticker: 25s cycle // demo: runningnormal.ticker: 25s cycle // demo: runningnormal.ticker: 25s cycle // demo: running
fast.ticker: 15s cycle // demo: runningfast.ticker: 15s cycle // demo: runningfast.ticker: 15s cycle // demo: running
Custom Separator
Preview
alpha: online | bravo: online | charlie: offlinealpha: online | bravo: online | charlie: offlinealpha: online | bravo: online | charlie: offline
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| messages | string[] | ["sys.status: online", "sec.level: classified", "net.latency: 12ms", ...] | Array of status messages to display in the scrolling ticker. |
| speed | "slow" | "normal" | "fast" | "normal" | Scroll speed of the ticker. slow = 40s, normal = 25s, fast = 15s. |
| separator | string | " // " | String used to separate individual messages. |
| className | string | - | Additional CSS classes for the ticker container. |
Accessibility
- The ticker is decorative and contains duplicated content for the infinite scroll effect.
- Consider adding
aria-hidden="true"if the ticker content is purely decorative. - Users who prefer reduced motion may benefit from a
prefers-reduced-motionmedia query to pause the animation. - The text uses a very small font size (10px) -- ensure critical information is also available elsewhere.