Photo & motion
The kinds of photos and video XSERIES already has, how to use them in the digital product, the grading style, and animation rules.
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 |
Two photo styles
Read these two columns as a pair: "stage" makes the player feel big, "locker room" makes the player feel close.
Makes the player feel big
- ExampleThrone portrait, arena, key visual
- LightDirectional, high contrast, red/teal rim light
- GradingDeep black, cool highlights, red accent
- In the digital productHero, cards, profiles
Makes the player feel close
- ExampleAirport, school visit, training
- LightNatural, as it is
- GradingWarm, slight grain (like XS-2)
- In the digital productStories, archive, team feed
Real examples from existing material. Compare the light and grading of the two groups.
Both styles are used together. This answers the XS-2 gap, where the graphics and documentary content feel like two brands (Identity audit). 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.
Sent to the GOS production team
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 (Player photos & rights).
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.
cubic-bezier(.2,.8,.2,1)Fade + rise 8pxcubic-bezier(.65,0,.35,1)180° Y rotation with light sweeping across the surfaceease-outFlash of the card's color and zoom 1.04, then a thin glow that stays while the card is still activeease-in-outRed dot pulses every 1.2 seconds while the match is liveease-outScore number rolls up with a "slot" effectlinearRed number, pulses every secondlinearX fills from mint to redease-in-outMini pitch animation that demonstrates the card's effect. It runs 3–5 seconds, depending on the effectRules
Left is for game moments, right is for regular UI.
Only for game moments
- WhenCards, goals, live
- ExampleFlash, zoom, "slot" effect on the score
For regular UI
- WhenNavigation, page enter, hover
- ExampleFade and short slide, fast
- No endlessly repeating animation on pages that are read (news, rules).
- Every animation has a
prefers-reduced-motionversion. - 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
- Rules illustrations at Kings League rules
- The XS-1 LED court as a canvas: XS-1 evidence
Research basis
- The throne portraits, arena renders, airport arrivals, school visit, and press conference come from IG highlights: Instagram content audit, FAQ and TICKET, and XS-2, from Instagram @xseries___
- The school visit connects to the Futsal Series student base: Games of Society
- The evidence photos are low resolution because they are all screenshots: research limitations
How this page connects
Pages this one builds on, and other pages that use it.