News Ticker Bar
A broadcast lower bar with a standing flag and a headline crawl.
SceneScenes
news-ticker-bar30fps · 960×540
Install
$ npx remotion-ui@latest add news-ticker-barThe bar rises from the frame edge, the flag wipes out ahead of the crawl, and the headlines run continuously — two copies of the run chase each other so the loop never shows a seam. Headlines dissolve into the right edge instead of being sliced off against the dateline.
infinite-marquee is the generic looping-text primitive. This is the dressed
news bar built on the same idea, with the flag, strapline and timestamp furniture
a broadcast frame needs. Drop strapline for a single-line bar.
Crawl speed is pixelsPerSecond in layout units, so it stays consistent across
frame sizes.
Transparent overlay scene designed to sit over footage. infinite-marquee is the generic looping-text primitive — this is the dressed news bar with the chrome a broadcast frame needs.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/scenes/news-ticker-bar- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: headlines, flag, strapline, timestamp, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
Example
import { NewsTickerBar } from "@/remotion/scenes/news-ticker-bar";
<NewsTickerBar
flag="Breaking"
headlines={["Registry crosses 165 components", "CLI adds batch install"]}
strapline="Live from the newsroom"
timestamp="21:04"
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| headlines* | string[] | - | Headlines cycled through the crawl, separated by a bullet. |
| flag | string | "Breaking" | Standing flag on the left — BREAKING, MARKETS, LIVE. |
| strapline | string | - | Second line under the crawl. Omit for a single-line bar. |
| timestamp | string | - | Clock or dateline pinned to the right edge. Omit to hide it. |
| pixelsPerSecond | number | 118 | Crawl speed in units per second. |
| accentColor | string | "#F97362" | Flag fill and top rule colour. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| holdSeconds | number | - | Seconds the bar holds before it retreats. Omit to leave it up. |
| speed | number | 1 | Animation speed multiplier. |