Two-Stands Transfers — Broadcast Graphics Template

Soccer player transfer broadcast graphics — transparent overlay for 1920×1080 frames.

Specifications

Property	State 1 (Reveal)	State 2 (Compact)
Frame	1920×1080 px (transparent)	1920×1080 px (transparent)
Graphics area	1920×758 px	641×758 px (centered)
Duration	5 seconds	holds until next
Player photo	641×758 PNG (1:1)	230px crop from 641-wide source

Layout — State 1 (0–5 s)

Full-width 1920×758 bar:

┌─────────────────── 1920×758 ──────────────────────────────┐
│                                                          │
│ ┌──────────┐  ПЕРЕХОД                                     │
│ │          │                                              │
│ │  PLAYER  │  PLAYER NAME                                 │
│ │  PHOTO   │                                              │
│ │          │                                              │
│ │  641px   │  [MLS]  ЧЕЛСИ           ┌──────────┐        │
│ │ (1:1)    │                         │  138 млн │        │
│ │          │                         └──────────┘        │
│ └──────────┘                                             │
└──────────────────────────────────────────────────────────┘

Layout — State 2 (after 5 s)

Shrinks to centered 641×758:

┌──────── 641×758 ────────┐
│                         │
│ ┌────────┐  ПЕРЕХОД     │
│ │ PHOTO  │  PLAYER NAME │
│ │ 230px  │              │
│ │        │  ЧЕЛСИ       │
│ │        │  ┌────────┐  │
│ └────────┘  │ 138 млн│  │
│            └────────┘  │
└─────────────────────────┘

Data — data/transfers.json

Generated from assets/transfers-list.csv. Each transfer object:

{
  "id": 1,
  "playerName": "Морган Роджерс",
  "photo": "assets/players/player_01.png",
  "team": {
    "name": "Челси",
    "logo": "assets/teams/chelsea.svg",
    "color": "#034694",
    "accent": "#FFFFFF"
  },
  "price": "138 млн",
  "isFreeAgent": false
}

For free agents (isFreeAgent: true), the price badge turns green and the label shows "Статус" instead of "Сумма".

Data source — assets/transfers-list.csv

Player, Club, Sum
Морган Роджерс, Челси, 138 млн
Энтони Гордон, Барселона, 80 млн
Ибрагим Конате, Реал, Свободный агент

Edit the CSV, then re-run the generator to rebuild transfers.json and regenerate placeholder PNGs + team crests.

Usage

1. Run a local server (needed for fetch)

python3 -m http.server 8000

2. Open in browser

http://localhost:8000

3. Controls

Key	Action
→ / Enter	Next transfer
← / Backspace	Previous transfer
R	Replay current
H	Hide / Show
A	Toggle autoplay (8s loop)

External API (CasparCG / OBS)

window.transferGraphics.showAt(0);  // show transfer #1 (starts State 1)
window.transferGraphics.next();     // next transfer
window.transferGraphics.prev();     // previous transfer
window.transferGraphics.replay();   // replay current
window.transferGraphics.hide();      // hide graphics
window.transferGraphics.show();      // show graphics
window.transferGraphics.autoplay();  // toggle autoplay

Generating Placeholder Assets

python3 generate_placeholders.py

This reads assets/transfers-list.csv and generates:

• assets/teams/*.svg — team crest placeholders (colored shields)
• assets/players/player_*.png — player PNG placeholders at 641×758
• data/transfers.json — the transfer data file

Replace the placeholder PNGs with real 641×758 player cutouts — just drop your files into assets/players/ with the same names (player_01.png, player_02.png, …). No scaling needed — the source image is displayed 1:1 in State 1, and CSS object-fit: cover crops it for the compact State 2.

Timing

0.0 s   Card enters (slide + fade)
0.15s   Photo scales in
0.35s   "ПЕРЕХОД" label slides down
0.55s   Player name slides in
1.0 s   Team block appears
1.35s   Price badge pops in (bounce)
5.0 s   Container shrinks 1920 → 641 (0.85 s smooth transition)
5.85s+  Compact state holds