---
title: Foto & motion
intro: Jenis foto dan video yang sudah dimiliki XSERIES, cara memakainya di produk digital, gaya grading, dan aturan animasi.
updated: 1 Nov 2026
status: Hipotesis
---

## Inventaris foto yang ada

Tabel ini memetakan foto yang sudah dimiliki XSERIES, seberapa layak dipakai di web, dan di halaman mana sebaiknya dipakai.

| Jenis | Contoh | Kualitas untuk web | Pemakaian |
|---|---|---|---|
| **Potret takhta (studio)** | Player card XS-3 | Tinggi, tapi butuh file asli | Player card, halaman pemain |
| **Arena render** | FAQ, tiket XS-3 | Tinggi | Hero, latar tiket |
| **Dokumenter (bandara, sekolah)** | XS-2 | Sedang (dari story) | Cerita, arsip, halaman tim |
| **Pertandingan** | Klip XS-2 | Rendah (screenshot story) | Butuh foto resmi dari fotografer event |
| **Press conference** | XS-2 | Sedang | Berita, arsip |

![Potret takhta](/assets/evidence/xs3-players-2.jpg "Potret takhta XS-3: tracksuit hitam berlogo X, pose duduk. Sumber: IG @xseries___.")
![Kedatangan di bandara](/assets/evidence/xs2-falcao-tiba.jpg "Dokumenter XS-2: kedatangan Falcão. Grading hangat, autentik. Sumber: highlight IG @xseries___.")
![School visit](/assets/evidence/xs2-school-visit.jpg "Dokumenter XS-2: school visit. Menghubungkan bintang dengan jaringan sekolah GOS. Sumber: highlight IG @xseries___.")
![Laga XS-2](/assets/evidence/xs2-match-clip-1.jpg "Momen pertandingan XS-2, diambil dari story. Resolusi rendah, jadi perlu foto resmi. Sumber: highlight IG @xseries___.")

## Dua gaya foto

Baca dua kolom ini sebagai pasangan: "panggung" membuat pemain terasa besar, "ruang ganti" membuat pemain terasa dekat.

```viz-compare
## Panggung
tone: stage
sub: Membuat pemain terasa besar
- Contoh | Potret takhta, arena, key visual
- Cahaya | Terarah, kontras tinggi, rim light merah/teal
- Grading | Hitam pekat, highlight dingin, aksen merah
- Di produk digital | Hero, kartu, profil
## Ruang ganti
tone: locker
sub: Membuat pemain terasa dekat
- Contoh | Bandara, school visit, latihan
- Cahaya | Natural, apa adanya
- Grading | Hangat, sedikit grain (seperti XS-2)
- Di produk digital | Cerita, arsip, feed tim
```

Contoh nyata dari materi yang sudah ada. Bandingkan cahaya dan grading kedua kelompok.

```viz-moodboard
## Panggung
sub: XS-3
- /assets/evidence/xs3-players-2.jpg | Potret takhta XS-3 | wide
- /assets/evidence/xs3-faq-cover.jpg | Arena render, cahaya merah dan teal
- /assets/evidence/xs3-ticket-keyvisual.jpg | Key visual tiket XS-3
## Ruang ganti
sub: XS-2
- /assets/evidence/xs2-falcao-tiba.jpg | Kedatangan Falcão, grading hangat | wide
- /assets/evidence/xs2-school-visit.jpg | School visit
- /assets/evidence/xs2-roster-bandara.jpg | Seri kedatangan roster di bandara
```

Kedua gaya dipakai bersama. Ini menjawab celah XS-2, di mana grafis dan dokumenter terasa seperti dua brand ([Audit identitas](/visual-direction/audit-identitas/)). Yang menyatukan keduanya adalah bingkai UI yang sama (hitam, wordmark, tipografi), bukan grading yang sama.

## Kebutuhan shoot untuk XS-3

Enam catatan ini perlu dikirim ke tim produksi GOS sebelum photoshoot pemain. Tiap catatan menyebut untuk apa foto itu dipakai.

```viz-notes
why: Untuk:
ask: Format:
## Foto dan video
code: #
tone: orange
sub: Dikirim ke tim produksi GOS
- **Potret takhta** semua pemain | Player card dengan berbagai latar | File asli resolusi penuh, latar terpisah (PNG/PSD dengan mask)
- **Potret netral** setengah badan | Thumbnail dan daftar pemain | Latar polos
- **Pose aksi** (menendang, selebrasi) | Animasi kartu aktif | Latar terpisah
- **Foto tim** per franchise | Halaman tim | Dengan jersey dan warna tim
- **Arena kosong dan penuh** | Transisi "sebelum dan sesudah" | Dari sudut yang sama
- **Video pendek 3–5 detik** per pemain | Flip player card | Loop
```

> [!IMPORTANT]
> Semua foto evidence di dokumentasi ini adalah screenshot dari Instagram dengan resolusi rendah. Untuk produksi, minta **file asli** dan **hak pakai** untuk web dan app ke GOS, termasuk izin pemakaian wajah pemain internasional ([V7](/research/pertanyaan-terbuka/#q-v7)).

## Motion

### Karakter gerak

Semua durasi animasi produk digital dicatat di tabel ini. Arahkan kursor atau tap tiap baris untuk melihat gerakannya. Kurva di kiri menunjukkan easing.

```viz-motion
- Masuk halaman | 240ms | cubic-bezier(.2,.8,.2,1) | Fade + naik 8px
- Flip kartu | 500ms | cubic-bezier(.65,0,.35,1) | Rotasi Y 180° dengan cahaya yang menyapu permukaan
- Kartu aktif (live) | 900ms | ease-out | Flash warna kartu dan zoom 1,04, lalu glow tipis yang menetap selama kartu masih aktif
- Titik LIVE | 1200ms loop | ease-in-out | Titik merah berdenyut tiap 1,2 detik selama laga berlangsung
- Gol | 400ms | ease-out | Angka skor naik dengan efek "slot"
- Shot clock 5 detik terakhir | 1000ms loop | linear | Angka merah, denyut tiap detik
- Loading | Loop sampai selesai | linear | X terisi dari mint ke merah
- Efek kartu di explainer | 4000ms | ease-in-out | Animasi lapangan mini yang memperagakan efek kartu. Panjangnya 3–5 detik, tergantung efek
```

### Aturan

Kiri untuk momen permainan, kanan untuk UI biasa.

```viz-compare
## Gerak besar
tone: stage
sub: Hanya untuk momen permainan
- Kapan | Kartu, gol, live
- Contoh | Flash, zoom, efek "slot" pada skor
## Gerak halus
tone: neutral
sub: Untuk UI biasa
- Kapan | Navigasi, masuk halaman, hover
- Contoh | Fade dan geser pendek, cepat
```

- Tidak ada animasi berulang tanpa henti di halaman yang dibaca (berita, aturan).
- Semua animasi punya versi `prefers-reduced-motion`.
- Video loop di player card maksimal 5 detik, tanpa suara, dan tidak autoplay di koneksi lambat.

## Referensi gerak

- Preloader animasi dan marquee di [ballerleague.us](https://ballerleague.us/c/rulebook)
- Ilustrasi aturan di [Kings League rules](https://pages.kingsleague.pro/rules)
- Lapangan LED XS-1 sebagai kanvas: [evidence XS-1](/assets/evidence/xs1-1.jpg)

## Dasar riset

- Potret takhta, arena render, kedatangan di bandara, school visit, dan press conference berasal dari highlight IG: [Audit konten Instagram](/research/audit-konten-instagram/#xs3-players), [FAQ dan TICKET](/research/audit-konten-instagram/#faq-dan-ticket), dan [XS-2](/research/audit-konten-instagram/#xs-2), dari [Instagram @xseries___](https://www.instagram.com/xseries___/)
- School visit terhubung ke basis pelajar Futsal Series: [Games of Society](/research/games-of-society/#portofolio-ip)
- Foto evidence beresolusi rendah karena semuanya screenshot: [batasan riset](/research/log-riset/#batasan)