All work
Content & Video

Vertical Shorts Pipeline: Bar Replay on the Narration Clock

9:16 trading Shorts where TradingView bar replay is stepped over CDP in time with the voiceover, plus a canvas renderer and a real streaming terminal.

Replay API quirks solved (one-step lag, frozen axes, held frames), a deterministic 1080x1920 canvas reel rendered at 24 fps from headless Chrome, and a Bloomberg-style dashboard app fed by a real Python backtest engine and screen-recorded live.

Vertical Shorts Pipeline: Bar Replay on the Narration Clock — illustration
What makes it serious
  • Bar replay stepped on word timestamps with axis locking
  • Deterministic canvas reel, ~24 fps headless capture
  • Dashboard asserts its series equal the swept system before streaming
  • Measured-panel virtual camera for the 9:16 cut

Short-form trading content works when the chart is already moving inside three seconds. This pipeline steps TradingView's bar replay forward over the DevTools Protocol on the voiceover's own word timestamps, records the window, and edits to 1080x1920 on the GPU. The replay API has quirks that each cost a take: the first step after selecting a date behaves differently, each new bar arrives open and completes about a second later (so narration schedules the step that completes a bar), price axes must be locked explicitly, and scroll glitches are hidden by holding the previous frame when a static probe region changes.

Two other render routes were built for different needs. For a reel about a 2.45-billion-system sweep and Monte Carlo, everything is drawn by a canvas page that is a pure function of time; a headless Chrome capture calls it frame by frame into an NVENC encoder, so a two-minute reel renders in about 2.5 minutes with no real-time sync to lose. For a "real software running" reel, a Python engine replays gold bars and streams JSON over a WebSocket into a dense amber terminal dashboard, asserting its indicator series equal the sweep library's columns before streaming, then a 9:16 cut uses a virtual camera over panel rectangles measured from the live page.

Competitor research with transcripts informed the format: contrarian hook in three seconds, near-black background, fat candles, one accent word per caption.

How it works

  1. short.json defines beats, replay date and camera
  2. VO renders with word timestamps
  3. Driver stages the chart, steps replay per beat and records
  4. Renderer crops to 9:16 with camera and caption layers
  5. Audio bed and SFX are mixed; captions burned in

Screens

Vertical Shorts Pipeline: Bar Replay on the Narration Clock screenshot

Stack
Node.jsCDPTradingView DesktopRecordlyPythonPyTorchHTML CanvasWebSocketffmpeg (NVENC)Kokoro TTS
#shorts#reels#bar-replay#canvas#dashboard#video-pipeline