LED wall — pitch-side advertising board

▶Live demo

The same code that runs in the prototype — auto-rotation, identical timings. The board renders at its real width (874px): the ball and keeper positions were measured at that width.

The demo is not showing here. The component is desktop-only (≥1200px) and your window is narrower. Open it on a desktop.

Official Betting Partner Ολλανδία — ΙαπωνίαΝικητής αγώνα 1 1.85 ΠΑΙΞΕ ΝΟΜΙΜΑ* 21+ · ΑΡΜΟΔΙΑ ΑΡΧΗ ΕΕΕΠ · ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ 1 Goal / No Goal Θα κρατήσει το μηδέν; Goal1.72 No Goal2.05 Αναλυτές FoxbetΚώστας Φίλιος & Γιάννης Μάρκουλας Το Προγνωστικό μας 1 & Over 2.5 3.10 Ολλανδία — Ιαπωνία · ΠΑΙΞΕ ΝΟΜΙΜΑ* · 21+ ΕΕΕΠ

Hovering the board pauses it. The buttons replay one scenario; the rotation carries on normally afterwards.

00Read this first

The board is one container with N scenarios, not N components. The container defines the surface, the pixel grid, the sponsor colour and the rotation clock; each scenario is an independent little film living inside it.

01The surface — anatomy & tokens

Five layers, in this order from the bottom up. The order is part of the spec, not a detail: the pixel grid must sit above the content.

Optional, via a class on the stage: .tilt = rotateX(6deg) with perspective:900px on the parent; .nodots, .noglow = those layers switch off.

02The rotation — model & timing

One JS clock, not one big CSS keyframe. Each scenario has its own internal timeline that restarts from frame 0 every time its turn comes round.

03The three MVP scenarios

Approved by Vasilis (2026-08-02) out of six that were tried. The other three (photo-save, Golden Sub, Goal) exist in the local concept files and do not ship.

04The figures — masks, not photos

Each player is the alpha of a photo as a mask-image over a flat colour. The anatomy stays real (these are not stick figures) while the rendering belongs to the board — and the kit is done in CSS.

/* το σχήμα από τη φωτογραφία, το χρώμα από την ομάδα */
.ledwsil{ background:currentColor;
          -webkit-mask-image:url(concept-assets/keeper-ready.png);
                  mask-image:url(concept-assets/keeper-ready.png);
          mask-size:contain; mask-repeat:no-repeat; mask-position:center bottom; }

/* ΕΜΦΑΝΙΣΙΜΟ = hard-stop gradient που τον κόβει η μάσκα:
   φανέλα / σορτσάκι / κάλτσες. Τα stops είναι ανά πόζα — κάθε μάσκα έχει
   δική της γεωμετρία· η βουτιά τρέχει 90deg γιατί το σώμα είναι οριζόντιο. */
.m-f .fr1{ color:#2650C8;   /* Ιαπωνία */
  background:linear-gradient(180deg,#2650C8 0 50%,#F3F3F3 50% 65%,#2650C8 65% 100%); }
.m-f .lp2-dive{ color:#FF6A00; /* Ολλανδία, οριζόντιο σώμα */
  background:linear-gradient(90deg,#FF6A00 0 36%,#F3F3F3 36% 54%,#FF6A00 54% 100%); }

The motion is flipbook + travel, which is how a real perimeter board works:

05Configurability — scenarios of our own NOT MVP · phase 2

The goal: to author scenarios without a deploy — a different creative per sponsor, per sport, per fixture, per campaign. The MVP stays at three hard-coded scenarios; this section is the spec for the next step, so that the MVP does not rule it out.

The model: one scenario = a duration + a list of layers. Each layer has a type, content, a position and a keyframe timeline. The renderer knows nothing about football — it knows layers.

{
  "id": "save-clean-sheet",
  "duration": 9000,
  "sport": "football",            // φίλτρο: πού επιτρέπεται
  "weight": 3,                    // βάρος στη ρότα (0 = ανενεργό)
  "layers": [
    { "type": "prop",   "art": "goal-frame", "at": {"right":14,"top":6,"w":190,"h":118} },

    { "type": "figure",                       // φιγούρα με μάσκα
      "poses": { "idle":"keeper-ready.png", "act":"keeper-dive.png" },
      "kit": "$match.home.kit",             // binding, όχι σταθερά
      "at": {"right":52,"bottom":10,"h":80},
      "track": [ {"t":0,"pose":"idle"}, {"t":.25,"crouch":true},
                 {"t":.30,"pose":"act","x":-38,"y":40,"rot":30},
                 {"t":.33,"x":0,"y":0,"rot":0} ] },

    { "type": "ball", "track": [ … ], "endsIn": "gloves" },
    { "type": "flash", "at_t": .33 },

    { "type": "copy", "in": .38, "align": "left",
      "eyebrow": "Goal / No Goal",
      "title":   "Θα κρατήσει το μηδέν;",
      "odds": [ {"label":"Goal",   "value":"$odds.btts.yes"},
                 {"label":"No Goal","value":"$odds.btts.no"} ] }
  ]
}

Layer types — the MVP already implements all six, just hard-coded. Phase 2 turns them into data:

Bindings — because a scenario is not a picture but a template:

What else phase 2 will need (out of scope for now): a scenario store plus a simple editor/preview, JSON validation, impression/click tracking per scenario, and a preview at the real 874px width before anything is published.

06Accessibility

07Performance

• No canvas, no rAF loop, no video. Everything runs on transform, opacity and clip-path — composited by the compositor, never touching the main thread.
• The JS is one setTimeout per scenario. Nothing runs per frame.
• The masks are PNGs — only the alpha matters, so they can be compressed aggressively (grayscale + alpha). Today ~500KB in total; target <150KB once the licensed material replaces them, and loading="lazy" does not help (they are CSS masks) — size them correctly from the start instead.
• The pixel grid is gradients, not an image: zero requests, zero memory.
• The board is below the fold on most screens — it could happily start on an IntersectionObserver, like the player heartbeat, if you would rather it did not spin in an invisible tab.

08Markup & where it hooks in

<div class="bo adledwrap">
  <a class="adled bo-stoiximan" data-adbrand …>…</a>   <!-- mobile ticker, μένει -->

  <div class="ledw-stage tilt" data-ledw>              <!-- desktop board -->
    <a class="ledw bo-stoiximan" data-ledwbrand href="…" aria-label="…">
      <span class="ledw-msgs">
        <span class="ledw-msg m-a" data-m="a">…</span>
        <span class="ledw-msg m-f" data-m="f">…</span>
        <span class="ledw-msg m-e" data-m="e">…</span>
      </span>
      <span class="ledw-grid"  aria-hidden="true"></span>
      <span class="ledw-sweep" aria-hidden="true"></span>
    </a>
    <span class="ledw-glow" aria-hidden="true"></span>
  </div>
</div>

09What is MVP and what is not