# Country flag intro

Colour band slides in, the round flag pops, the country name wipes on. Uses gimgs.net/flags. 4 s, 16:9.

- Category: intro · Tags: flag, country, travel, geo, intro
- Spec: 1920×1080 @ 30 fps · 4s (16:9)
- License: CC0 · Tier: free
- JSON: https://gimgs.net/motion/flag-intro.json
- Kind: html
- Template HTML: https://gimgs.net/motion/flag-intro/template.html
- Player: https://gimgs.net/motion/flag-intro/play?p=<base64url JSON params>[&t=<seconds>]
- Credits: gimgs — https://gimgs.net/motion
- Page: https://gimgs.net/motion/flag-intro.html

## Params

| name | type | default | description |
|---|---|---|---|
| `country` | string | `"vn"` | ISO 3166-1 alpha-2 code (vn, us, jp…) or a regional code like gb-eng — resolved to https://gimgs.net/flags/{code}.svg |
| `name` | string | `"Vietnam"` | Country / city name |
| `subtitle` | string | `"Hanoi · GMT+7"` | Small line under the name (capital, time zone, episode…) |
| `accent` | string (color) | `"#da251d"` | Band and code colour — take it from the flag |
| `bg` | string (color) | `"#f7f6f3"` | Background (light or dark; subtitle contrast adapts) |
| `fg` | string (color) | `"#1a1a1a"` | Name colour |

Default params (base64url for `?p=`): `eyJjb3VudHJ5Ijoidm4iLCJuYW1lIjoiVmlldG5hbSIsInN1YnRpdGxlIjoiSGFub2kgwrcgR01UKzciLCJhY2NlbnQiOiIjZGEyNTFkIiwiYmciOiIjZjdmNmYzIiwiZmciOiIjMWExYTFhIn0`

## Prompt

## When to use
Chapter card for travel vlogs, country-by-country comparisons, sports/olympics recaps, geo-data explainers.

## How to adapt
- `country` is the ISO alpha-2 code; the flag is fetched from `https://gimgs.net/flags/{code}.svg` (circular, all countries + gb-eng/gb-sct/gb-wls). No upload needed.
- Pick `accent` from the flag's dominant colour so the band and the flag rhyme (vn → #da251d, jp → #bc002d, br → #009c3b, us → #3c3b6e).
- Dark variant: `bg: "#0b0c10", fg: "#ffffff"`; the subtitle switches to light automatically.
- Timeline: band 0–0.7 s, flag 0.35–1.15 s, code 0.8–1.3 s, name wipe 0.95–1.75 s, subtitle 1.5–2.0 s; holds from 2 s.
- Batch: one render per country, then concat — keep everything but `country/name/subtitle/accent` constant.

## Do not change
`window.motion`, `#stage` size, `animation-fill-mode: both`.

## Flow

1. **Pick codes**
   ISO alpha-2, lowercase.
2. **Render per country**
   `for cc in vn jp br; do P=$(printf '{"country":"%s","name":"%s"}' $cc $cc | base64 -w0 | tr '+/' '-_' | tr -d '='); …frames…; done`
3. **Concat**
   `ffmpeg -f concat -safe 0 -i list.txt -c copy countries.mp4`

## Render

Open frame_url in a headless browser with viewport width×height (deviceScaleFactor 1), wait for document.documentElement.dataset.motionReady === '1', screenshot; repeat for t = i/fps (i = 0…frames-1); then `ffmpeg -framerate <fps> -i frame-%04d.png -c:v libx264 -pix_fmt yuv420p out.mp4`. Or drop ?t to play it live.

## Contract

Self-contained HTML. Declares window.motion = { width, height, fps, duration, params, apply(params) [, seek(t)] }; root element #stage sized width×height; animations are CSS/WAAPI with animation-fill-mode: both so any t can be seeked via document.getAnimations(). The host runtime (injected by /play) merges ?p params, calls apply(), scales #stage to the viewport and, when ?t is given, pauses and seeks deterministically.