LED wall — pitch-side advertising board

▶Ζωντανό demo

Ο ίδιος κώδικας που τρέχει στο prototype — αυτόματη εναλλαγή, ίδια timings. Η πινακίδα αποδίδεται στο πραγματικό της πλάτος (874px): οι θέσεις μπάλας/τερματοφύλακα είναι μετρημένες σε αυτό το πλάτος.

Το demo δεν εμφανίζεται εδώ. Το component είναι desktop-only (≥1200px) και το παράθυρό σου είναι πιο στενό. Άνοιξέ το σε 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+ ΕΕΕΠ

Hover πάνω στην πινακίδα = pause. Τα κουμπιά κάνουν replay ενός σεναρίου· η εναλλαγή συνεχίζει κανονικά μετά.

00Διάβασε πρώτα αυτό

Η πινακίδα είναι ένα container με N σενάρια, όχι N components. Το container ορίζει επιφάνεια, pixel grid, χρώμα χορηγού και το ρολόι της εναλλαγής· κάθε σενάριο είναι ανεξάρτητο «φιλμάκι» που ζει μέσα του.

01Η επιφάνεια — ανατομία & tokens

Πέντε στρώσεις, με αυτή τη σειρά από κάτω προς τα πάνω. Η σειρά είναι προδιαγραφή, όχι λεπτομέρεια: το pixel grid πρέπει να είναι πάνω από το περιεχόμενο.

Προαιρετικά, με class στο stage: .tilt = rotateX(6deg) με perspective:900px στον γονέα· .nodots, .noglow = απενεργοποίηση των αντίστοιχων στρώσεων.

02Η εναλλαγή — μοντέλο & timing

Ένα JS ρολόι, όχι ένα μεγάλο CSS keyframe. Κάθε σενάριο έχει δικό του εσωτερικό timeline που ξαναξεκινά από το καρέ 0 κάθε φορά που έρχεται η σειρά του.

03Τα τρία σενάρια του MVP

Εγκεκριμένα από τον Βασίλη (2026-08-02) μέσα από έξι που δοκιμάστηκαν. Τα υπόλοιπα τρία (photo-save, Golden Sub, Goal) υπάρχουν στα τοπικά αρχεία concept και δεν ships.

04Οι φιγούρες — μάσκες, όχι φωτογραφίες

Κάθε παίκτης είναι το άλφα μιας φωτογραφίας ως mask-image πάνω σε επίπεδο χρώμα. Έτσι η ανατομία μένει πραγματική (δεν είναι stick figures) αλλά η απόδοση είναι της πινακίδας — και το «εμφανίσιμο» γίνεται με 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%); }

Η κίνηση είναι flipbook + ταξίδι, όπως δουλεύει μια αληθινή περιμετρική πινακίδα:

05Παραμετροποίηση — δικά μας σενάρια NOT MVP · φάση 2

Ο στόχος: να φτιάχνουμε σενάρια χωρίς deploy — άλλο creative ανά χορηγό, ανά άθλημα, ανά αγώνα, ανά καμπάνια. Το MVP παραμένει τρία hard-coded σενάρια· αυτή η παράγραφος είναι η προδιαγραφή του επόμενου βήματος, ώστε το MVP να μην την αποκλείσει.

Το μοντέλο: ένα σενάριο = διάρκεια + λίστα από layers. Κάθε layer έχει τύπο, περιεχόμενο, θέση και ένα timeline από keyframes. Ο renderer δεν ξέρει τίποτα για ποδόσφαιρο — ξέρει 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 — το MVP ήδη υλοποιεί και τους έξι, απλώς hard-coded. Η φάση 2 τούς κάνει data:

Bindings — γιατί ένα σενάριο δεν είναι εικόνα αλλά πρότυπο:

Τι θα χρειαστεί επιπλέον στη φάση 2 (εκτός scope τώρα): αποθήκη σεναρίων + απλός editor/preview, validation του JSON, καταγραφή impressions/clicks ανά σενάριο, και προεπισκόπηση σε πραγματικό πλάτος 874px πριν δημοσιευτεί.

06Προσβασιμότητα

07Απόδοση

• Καμία canvas, κανένα rAF loop, κανένα βίντεο. Όλα τρέχουν σε transform, opacity και clip-path — συνθέτονται από τον compositor και δεν πιάνουν το main thread.
• Το JS είναι ένα setTimeout ανά σενάριο. Τίποτα δεν τρέχει ανά καρέ.
• Οι μάσκες είναι PNG — μόνο το άλφα μετράει, άρα μπορούν να συμπιεστούν επιθετικά (grayscale + alpha). Σήμερα ~500KB συνολικά· στόχος <150KB μετά την αντικατάσταση με αδειοδοτημένο υλικό, και loading="lazy" δεν βοηθά (είναι CSS masks) — προτιμήστε σωστό μέγεθος από την αρχή.
• Το pixel grid είναι gradients, όχι εικόνα: μηδέν requests, μηδέν memory.
• Η πινακίδα είναι κάτω από το fold στις περισσότερες οθόνες — μπορεί άνετα να ξεκινά με IntersectionObserver όπως ο παλμός στους παίκτες, αν θέλετε να μη γυρίζει σε αόρατο tab.

08Markup & πού συνδέεται

<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>

09Τι είναι MVP και τι όχι