---
title: Photo & motion
intro: Photo use, grading, and animation rules.
updated: 1 Nov 2026
status: Hipotesis
---

## Inventory of existing photos

This table maps the photos XSERIES already has, how usable they are on the web, and which pages they suit best.

| Type | Example | Quality for web | Use |
|---|---|---|---|
| **Throne portrait (studio)** | XS-3 player cards | High, but needs the original files | Player card, player page |
| **Arena render** | XS-3 FAQ, tickets | High | Hero, ticket background |
| **Documentary (airport, school)** | XS-2 | Medium (from stories) | Stories, archive, team pages |
| **Match** | XS-2 clips | Low (story screenshots) | Needs official photos from the event photographer |
| **Press conference** | XS-2 | Medium | News, archive |

![Throne portrait](/assets/evidence/xs3-players-2.jpg "XS-3 throne portrait: black tracksuit with the X logo, seated pose. Source: IG @xseries___.")
![Airport arrival](/assets/evidence/xs2-falcao-tiba.jpg "XS-2 documentary: Falcão's arrival. Warm grading, authentic. Source: IG highlight @xseries___.")
![School visit](/assets/evidence/xs2-school-visit.jpg "XS-2 documentary: school visit. Connects the stars with the GOS school network. Source: IG highlight @xseries___.")
![XS-2 match](/assets/evidence/xs2-match-clip-1.jpg "An XS-2 match moment, taken from a story. Low resolution, so official photos are needed. Source: IG highlight @xseries___.")

## Two photo styles

Read these two columns as a pair: "stage" makes the player feel big, "locker room" makes the player feel close.

```viz-compare
## Stage
tone: stage
sub: Makes the player feel big
- Example | Throne portrait, arena, key visual
- Light | Directional, high contrast, red/teal rim light
- Grading | Deep black, cool highlights, red accent
- In the digital product | Hero, cards, profiles
## Locker room
tone: locker
sub: Makes the player feel close
- Example | Airport, school visit, training
- Light | Natural, as it is
- Grading | Warm, slight grain (like XS-2)
- In the digital product | Stories, archive, team feed
```

Real examples from existing material. Compare the light and grading of the two groups.

```viz-moodboard
## Stage
sub: XS-3
- /assets/evidence/xs3-players-2.jpg | XS-3 throne portrait | wide
- /assets/evidence/xs3-faq-cover.jpg | Arena render, red and teal light
- /assets/evidence/xs3-ticket-keyvisual.jpg | XS-3 ticket key visual
## Locker room
sub: XS-2
- /assets/evidence/xs2-falcao-tiba.jpg | Falcão's arrival, warm grading | wide
- /assets/evidence/xs2-school-visit.jpg | School visit
- /assets/evidence/xs2-roster-bandara.jpg | Roster arrival series at the airport
```

Both styles are used together. This answers the XS-2 gap, where the graphics and documentary content feel like two brands ([Identity audit](/visual-direction/audit-identitas/)). What ties them together is the same UI frame (black, wordmark, typography), not the same grading.

## Shoot needs for XS-3

These six notes need to be sent to the GOS production team before the player photoshoot. Each note says what the photo is used for.

```viz-notes
why: Used for:
ask: Format:
## Photo and video
code: #
tone: orange
sub: Sent to the GOS production team
- **Throne portrait** of all players | Player cards with various backgrounds | Original full-resolution files, separate background (PNG/PSD with mask)
- **Neutral portrait**, half body | Thumbnails and the player list | Plain background
- **Action poses** (kicking, celebrating) | Active card animation | Separate background
- **Team photo** per franchise | Team page | With the team's jersey and colors
- **Empty and full arena** | "Before and after" transition | From the same angle
- **Short 3–5 second video** per player | Player card flip | Loop
```

> [!IMPORTANT]
> All evidence photos in these docs are low-resolution Instagram screenshots. For production, ask GOS for the **original files** and **usage rights** for web and app, including permission to use the faces of international players ([V7](/research/pertanyaan-terbuka/#q-v7)).

## Motion

### Motion character

Every animation duration in the digital product is recorded in this table. Hover or tap each row to see the movement. The curve on the left shows the easing.

```viz-motion
- Page enter | 240ms | cubic-bezier(.2,.8,.2,1) | Fade + rise 8px
- Card flip | 500ms | cubic-bezier(.65,0,.35,1) | 180° Y rotation with light sweeping across the surface
- Active card (live) | 900ms | ease-out | Flash of the card's color and zoom 1.04, then a thin glow that stays while the card is still active
- LIVE dot | 1200ms loop | ease-in-out | Red dot pulses every 1.2 seconds while the match is live
- Goal | 400ms | ease-out | Score number rolls up with a "slot" effect
- Shot clock last 5 seconds | 1000ms loop | linear | Red number, pulses every second
- Loading | Loops until done | linear | X fills from mint to red
- Card effect in the explainer | 4000ms | ease-in-out | Mini pitch animation that demonstrates the card's effect. It runs 3–5 seconds, depending on the effect
```

### Rules

Left is for game moments, right is for regular UI.

```viz-compare
## Big motion
tone: stage
sub: Only for game moments
- When | Cards, goals, live
- Example | Flash, zoom, "slot" effect on the score
## Subtle motion
tone: neutral
sub: For regular UI
- When | Navigation, page enter, hover
- Example | Fade and short slide, fast
```

- No endlessly repeating animation on pages that are read (news, rules).
- Every animation has a `prefers-reduced-motion` version.
- Loop videos on the player card are 5 seconds at most, silent, and do not autoplay on slow connections.

## Motion references

- Animated preloader and marquee at [ballerleague.us](https://ballerleague.us/c/rulebook)
- Rules illustrations at [Kings League rules](https://pages.kingsleague.pro/rules)
- The XS-1 LED court as a canvas: [XS-1 evidence](/assets/evidence/xs1-1.jpg)

## Research basis

- The throne portraits, arena renders, airport arrivals, school visit, and press conference come from IG highlights: [Instagram content audit](/research/audit-konten-instagram/#xs3-players), [FAQ and TICKET](/research/audit-konten-instagram/#faq-and-ticket), and [XS-2](/research/audit-konten-instagram/#xs-2), from [Instagram @xseries___](https://www.instagram.com/xseries___/)
- The school visit connects to the Futsal Series student base: [Games of Society](/research/games-of-society/#ip-portfolio)
- The evidence photos are low resolution because they are all screenshots: [research limitations](/research/log-riset/#limitations)