---
name: expocut-data-widgets
description: Builds data-driven and interactive-looking videos in ExpoCut through the MCP server — bar chart races, live counters and countdowns, scoreboards, polls, news tickers, breaking banners, QR codes, weather cards, follower counters, and phone/device mockups for app demos. Use when the user wants a stats video, chart race, data visualization, countdown, timer, poll sticker, score bug, live ticker, subscriber counter, "app demo in a phone frame", or animated numbers counting up. Do NOT use for plain text titles or captions (use the core skill or expocut-kinetic-captions).
license: Free to use and redistribute with attribution to expocut.com.
compatibility: Works standalone as guidance; becomes hands-on when paired with the ExpoCut in-app MCP server (private/loopback network only).
metadata:
  author: ExpoCut (expotechin.com)
  version: "1.0.0"
  homepage: https://expocut.com/skill.html
---

# Data videos & widgets

You are a data storyteller. Numbers perform when they MOVE and when one
number owns each beat.

## The widget system

- list_widgets → 20 widget ids: news-ticker, live-clock, countdown, stopwatch,
  scoreboard, poll, stat-bar, quote-card, breaking-banner, news-alert,
  follower-counter, like-burst, comment-bubble, qr-code, searchbar,
  weather-card, caption-box, confetti, fire-meter, bar-chart-race.
- add_widget_layer { widgetId, config, x, y, startTime, duration, scale }
- update_widget_config { layerId, config }  (shallow merge)
- get_widget_config { layerId } to read back before editing.

## Bar chart race (the flagship)

1. add_widget_layer { widgetId: "bar-chart-race", startTime, duration }
2. bar_chart_race.set_data { layerId, data: { frames, series } }
   — this dotted tool replaces frames+series ATOMICALLY (never patch them via
   update_widget_config; the parallel arrays corrupt). CSV import: pass `csv`.

Craft rules that make races perform:
- Keep **8–12 bars max**; highlight ONE protagonist bar in a distinct color
  and narrate its journey.
- Big date/year counter as the focal anchor.
- Let the race RESOLVE by ~80% of runtime; hold the final frame with the
  takeaway stat for the last 20%.
- Slow down at pivotal overtakes — those are the "beat moments" people share.
- 30–60 s total; open with the surprising end-state as the hook
  ("How X overtook everyone in 10 years").

## Stats-video conventions

- ONE number per beat; count-up animations synced to music beats; a soft
  "pop" SFX as each number lands (see expocut-audio-post).
- Comparison framing beats raw values: "40× bigger than Y", not "4,120,000".
- stat-bar / follower-counter / scoreboard configs update via
  update_widget_config between beats — countdowns and clocks run themselves.

## Phone & device mockups (app demos)

add_device_mockup { device, color, widthFrac, screenRect, startTime, duration }
then place the screen-recording layer into `screenRect`. Pair with
add_shape_widget for animated backdrop grids behind the device.

## Verify loop

1. get_widget_config { layerId } → confirm the config landed (especially
   after bar_chart_race.set_data — check frames/series lengths match).
2. preview_filmstrip across the race — does the protagonist bar read at a
   glance? Is the year counter legible at phone size?
3. capture_canvas { grid: true } — widgets inside the 900×1400 safe zone.