A news ticker that scrolls upward in a loop. The row passing through the middle lights up, the edges fade out, and hover or focus pauses it. Two columns scroll in opposite directions.
npx shadcn@latest add https://hyperblur.dev/r/ticker-vertical.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/ticker-vertical.tsx.
import { TickerVertical } from "@/components/hyperblur/ticker-vertical"
<TickerVertical items={[{ tag: "FED", text: "Fed holds rates steady", meta: "09:42" }]} rows={5} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { text: string; meta?: string; tag?: string }[] | required | Rows to show. Text is truncated with an ellipsis; tag renders as a small label and meta as a muted trailing value. |
| rows | number | 5 | Rows visible at once. The highlight sits on the middle one. |
| rowHeight | number | 34 | Height of one row in pixels. |
| speed | number | 24 | Scroll speed in pixels per second. |
| columns | 1 | 2 | 1 | With 2, a second column scrolls the opposite way starting from a different item. |
| accent | string | "#2f7bff" | Color of the highlight band and its tags. |