KQ-727 · NEWS/TICKER
News Ticker
A single line of market headlines flowing right to left on one frame loop that integrates the tape's velocity toward a target with exponential friction: the cruising speed while playing, zero the moment a pointer is over it, a headline holds focus, or play is off, so the tape eases to a stop and eases back up rather than freezing. Headlines are real buttons; focusing one pauses the tape and glides it into view on glide. A new headline is spliced into the ring after the item under the right edge, arrives from distances.shift on snap behind a signal wash that fades on the exit ease, and the ring's ResizeObserver moves the tape by exactly the width it added so nothing already on screen jumps.
4 headlines · running · latest 09:40 Basin Wire
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/news-ticker
Props
- headlines
- TickerHeadline[]
- default —
- In arrival order: { id, text, source, time, tone? } where time is an already-formatted string and tone is "up" | "down" | "flat". A new id pushes in at the right edge.
- playing / defaultPlaying
- boolean
- default true
- Controlled or initial play state. Off, the tape eases to a stop.
- onPlayingChange
- (playing: boolean) => void
- default —
- Fires from the tape's own Pause/Play toggle.
- speed
- number
- default 40
- Cruising speed in px/s.
- onSelect
- (id: string) => void
- default —
- Fires from the press on a headline.
- onPauseChange
- (paused: boolean) => void
- default —
- Fires from the hover, focus or play change that paused or resumed the tape.
- label
- string
- default Headlines
- Names the region.
| Prop | Type | Default | Description |
|---|---|---|---|
| headlines | TickerHeadline[] | — | In arrival order: { id, text, source, time, tone? } where time is an already-formatted string and tone is "up" | "down" | "flat". A new id pushes in at the right edge. |
| playing / defaultPlaying | boolean | true | Controlled or initial play state. Off, the tape eases to a stop. |
| onPlayingChange | (playing: boolean) => void | — | Fires from the tape's own Pause/Play toggle. |
| speed | number | 40 | Cruising speed in px/s. |
| onSelect | (id: string) => void | — | Fires from the press on a headline. |
| onPauseChange | (paused: boolean) => void | — | Fires from the hover, focus or play change that paused or resumed the tape. |
| label | string | Headlines | Names the region. |