Vidéos Géo-Cartes (TikTok, Allemand)
L'utilisateur est un créateur TikTok. Chaque vidéo est construite entièrement en code avec HyperFrames (d'abord lire le skill hyperframes : contrat de rendu, check, snapshot, render).
Langue : toujours allemand – script, voix off, sous-titres, étiquettes, réponses à l'utilisateur.
Déroulement (sans demandes de clarification si l'utilisateur donne un sujet)
- Une fois par conteneur :
bash ~/.claude/skills/geo-karten-video/scripts/setup.sh(Tuiles, icônes, polices, GSAP local, limites, voix Piper. Réseau : seuls npm, PyPI et GitHub sont ouverts. Esri/NASA-GIBS/HuggingFace/jsdelivr sont bloqués, d'où les contournements ici.) - Projet :
bash scripts/projekt.sh <slug>->/home/user/videos/<slug> - Script (
skript.txt, une ligne = un beat/phrase). Durée : 30 s ~ 65-70 mots, 60-75 s ~ 150-170. Écrire les chiffres en toutes lettres pour la voix, affichage avec{}:sechsundvierzig{46}. Écrire les abréviations en entier (Lkw -> Laster). Faits uniquement vérifiables ; valeurs estimées avec "environ"/"à peu près" et conditionnel pour les expériences de pensée. - Voix off + temporisation des mots :
python3 scripts/voice.py skript.txt assets/audio --speed 1.05->voice.wav(48 kHz, -15 LUFS) +words.json. Si l'utilisateur a un enregistrement personnel : l'utiliser (temporisation des mots alors vianpx hyperframes transcribe --model small --language de, si les modèles sont accessibles). - Carte :
python3 scripts/map.py assets/map --bbox lon0,lon1,lat0,lat1 --laender DEU,... --staedte "Berlin:13.40,52.52;..."(Régions/Länder :--admin1 "Bayern;Sachsen-Anhalt"). Image <= ~5000 px de côté. - Icônes :
python3 scripts/icons.py --suche "oil"etpython3 scripts/icons.py assets/icons name=HEX ... - Construire les scènes - Modèle :
templates/beispiel-keiner-arbeitet/(index.html, karte.html, skript.txt). Sous-titres :python3 scripts/captions.py assets/audio/words.json compositions/untertitel.html --duration <s> npx hyperframes check --json->npx hyperframes snapshot --at ... -o snap(max. ~6 moments par appel, sinon le processus est tué) -> visualiser les images -> corriger.- Rendu en arrière-plan :
npx hyperframes render -o renders/<slug>.mp4 -q delivery -w 2 --quiet(run_in_background). Ensuite vérifier avec ffprobe, visualiser le planche contact, envoyer le fichier à l'utilisateur.
L'aspect visuel (analysé à partir de 3 vidéos de référence – construire exactement comme ça)
Format : 1080×1920, 30 ips, 30-75 s. Pas d'intro, pas de logo, l'image 0 est déjà l'accroche (pays coloré + personnage/icône).
La carte = la scène, un seul travelling continu. Image satellite, mer bleu pétrole foncé, terre verte/beige naturelle.
Presque pas de coupes franches : la caméra zoome/pivote entre les beats (0,8 s power2.inOut), avec une dérive lente entre les deux.
Caméra = un wrapper #k-cam (transform-origin 0 0), cible via cam(px, py, scale) -> pixels carte au centre de l'écran (540, 900).
Tout ce qui est lié aux lieux (icônes, étiquettes, pays) se trouve DANS le wrapper caméra en pixels carte.
Les grands nombres et les étiquettes "JOUR 1" sont dans l'espace écran.
Pays en tant que chemin SVG : surface semi-transparente (fill-opacity ~0,66, la texture satellite apparaît),
contour clair (~2,5 px), ombre portée drop-shadow(0 10px 10px rgba(0,0,0,.45)). Couleur animée via GSAP sur CSS-fill
(pas attr, CSS remplace l'attribut). Couleurs fixes par pays :
Allemagne #2f5bea (bleu royal), Turquie/Russie/Iran #e02424 (rouge), Ukraine #e5a82e (jaune orangé),
USA #5aa9ff (bleu clair), région d'accent #a8d82a (citron vert), parti/région en surbrillance #f2a41c (orange).
Les changements de couleur racontent une histoire (ex. bleu -> gris -> rouge lors d'un crash).
Noms de pays : Écriture manuscrite Kalam 700, blanc, incliné (-8 à -14 degrés), grand, ombre, souvent coupé.
Personnages/figures : PNG détouré (par l'utilisateur, car pas de génération d'images) ou figures OpenMoji,
toujours avec bord blanc autocollant + ombre (classe .st :
drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(5px 9px 7px rgba(0,0,0,.45))).
Ils se tiennent sur leur pays, apparaissent en popping (back.out(2.2), 0,45 s) et rétrécissent en sortant (0,22 s power3.in).
Icônes : Plates avec contour foncé épais (OpenMoji) : pompe à essence, baril de pétrole, argent, explosion, navires, drapeaux, urne électorale... Quantités = nombreuses petites icônes réparties sur les villes, décalées de 40 à 70 ms.
Nombres : Montserrat Black, blanc, énorme (170-230 px), ombre dure, en haut de l'image (top ~240 px),
comptage animé (1,0 s power2.out). Étiquettes de date/jour 96 px.
Sous-titres : UN mot par apparition, MAJUSCULES, Montserrat Black ~68 px, blanc avec ombre foncée,
centré à y ~1400 (comme la référence, tiers inférieur), petit pop par mot. Généré par captions.py.
Sources : Captures d'écran de titres/documents comme "fiches" volant en oblique ; occasionnellement une photo B-Roll (2-3 s), puis retour à la carte.
Son : La voix off est le rythme. SFX parcimonieux (assets/sfx) : pop pour les stickers importants, whoosh pour les travellings,
error pour les croix/arrêts, impact-bass au point de basculement. Musique uniquement si l'utilisateur fournit un fichier (pas d'accès musique ici).
Dramaturgie
- Accroche 0-3 s : question ou alerte immédiate + visage/pays visible tout de suite.
- Contexte : nombre/date/source concret.
- Escalade par étapes (Jour 1 / Jour 3 / Jour 7 ou événement -> réaction -> conséquence), tous les 1-3 s un nouvel élément.
- Point de basculement/payoff (le nombre bascule, le pays change de couleur, shake + impact).
- Fin : zoom arrière + question ouverte aux spectateurs (commentaires). Pas de générique.
Pièges techniques (mesurés)
- GSAP inclus localement (
assets/vendor/gsap.min.js), le CDN est bloqué. snapshotavec beaucoup de moments est tué -> par blocs de ~6.- Rendu avec
-w 2(grande carte + filtres nécessitent de la RAM). - La voix Piper sonne synthétique (16 kHz) - proposer à l'utilisateur un enregistrement personnel ou un fichier ElevenLabs ;
puis remplacer
voice.wavet recalculer les temporisations. - Crédit image petit en haut à droite : "Image : NASA Blue Marble".
- Le conteneur est éphémère : envoyer immédiatement les vidéos terminées à l'utilisateur ; conserver le skill/les projets uniquement s'ils sont poussés dans un dépôt Git.