Tickers & marquees

Also searched as: news ticker, marquee, stock ticker, split-flap display, crawl

Canonical Definition

A ticker or marquee is a continuous, horizontally or perspective-scrolling strip of textual data, stock metrics, or headlines designed to convey steady information flow.

Duration

Continuous loop (20-60 frames per phrase cycle)

Easing Curve

Linear (for infinite crawl) or stepped/spring (for split-flap flips)

Unlike static cards or lower thirds, tickers rely on continuous linear velocity. They evoke financial exchanges, breaking newsrooms, and transit terminals.

In programmatic video, tickers allow streaming hundreds of data points (financial gains, customer testimonials, product updates) without requiring individual composition cuts.

Mechanical Split-Flap Displays

Simulating physical departure boards with flip physics and foley audio

Split-flap boards animate each character position independently with physical upper/lower tile flips. They deliver immense tactile satisfaction and suspense as words resolve.

Catalog Implementation/Split-Flap Board
blocktickersInspect in catalog
346 lines of React

How this works: Individual alphanumeric tiles flip rapidly around a central horizontal axis until settling on the target message.

  • Simulated 3D perspective fold on the upper flap
  • Cascading letter resolution timing
  • Pairs seamlessly with mechanical audio click foley

Perspective & Infinite Scrollers

Angled 3D typographic rails that extend into the z-plane

By applying CSS 3D perspective transforms, an ordinary text crawl transforms into a dynamic architectural horizon.

Catalog Implementation/Perspective Marquee
componenttickersInspect in catalog
151 lines of React

How this works: Infinite looping text rail tilted in 3D space with continuous seamless repetition.

  • Seamless modulo arithmetic for continuous loop without frame skips
  • CSS rotateX and rotateY perspective projection
  • Configurable linear travel velocity

Engineering Guidelines & Common Pitfalls

Best Practices (What to do)

  • Use monospace or tabular figure fonts for financial tickers to avoid jitter as numbers fluctuate.
  • Pair with a subtle gradient mask at screen edges so text appears from and fades into shadows.

Common Failure Modes (What to avoid)

  • Setting the crawl speed too fast: text must move at a speed that allows reading without motion sickness.
  • Frame stutter: marquees must increment positions by clean integer or sub-pixel values to avoid visual jitter.

Working catalog implementations

Typed Remotion components ready to drop into code.

Browse all tickers & marquees
Generate with AI

Build tickers & marquees in Animatiq

Prompt our motion agent in natural language. Get back typed Remotion React code with custom easing curves, brand palettes, and frame-accurate timing.

Launch in composer

Related motion principles