portfolio-reel

Portfolio reel (modèle : « skill 2 »)

Cette compétence crée une vidéo d'introduction finie d'environ 30 s à partir d'un seul fichier de configuration, promo.json. Une scène canvas dessine chaque image dans Chrome headless et lit les clips de l'utilisateur à l'intérieur des cartes. Il n'y a pas d'images d'archives, de vidéo IA ni de service de modèle. La structure copie le rythme de la vidéo de référence skill2.MP4 (une intro de créateur TikTok). Seules les techniques sont copiées, jamais ses images, mots, noms, pseudos ou filigrane.

Temps (3 sections)	Scène
0-2.3 s	gradient moutarde, deux grands cercles doux glissent ; hook[0] tape lettre par lettre, puis hook[1] apparaît en gros et en gras
2.3-2.9 s	un cercle blanc balaie vers le haut depuis le bas ; l'avatar apparaît comme un petit disque jaune
2.9-6.4 s	héro de profil sur fond blanc : l'avatar grandit en un grand cercle (avec un anneau jaune, ou un duo-tone jaune), puis le badge badge avec une étoile, hello mot par mot, roles séparés par de fines barres, et un bouton button noir avec ↑ dans un cercle blanc. La flèche monte et la page défile
6.4-20.5 s	une page par section (4.6 s chacune) sur fond gris clair avec des ombres douces de lumière de fenêtre : un titre en dégradé, puis 1-3 cartes arrondies qui suivent le défilement et flottent. Les vidéos jouent, les photos zoom lentement. Les cartes portrait se tiennent debout, les cartes paysage sont larges, les rangées mixtes se chevauchent
20.5-24.4 s	une lumière jaune émane du coin inférieur gauche pour revenir au dégradé ; cta[0], puis cta[1], mot par mot
24.4-30.3 s	une carte de profil noire apparaît à partir d'un point (avatar ou logo, handle, name, jusqu'à 3 stats de comptage, deux boutons). Un curseur clique sur le premier bouton, qui devient gris et affiche clicked, puis la carte se retourne en 3D vers son back

La durée est d'environ 30 s avec 3 sections, 4.6 s de plus ou moins par section, et un peu plus longue avec des textes longs.

Deux interfaces : "ui": "classic" (par défaut) ou "app"

app conserve la même chronologie et les mêmes textes, mais chaque scène est un écran d'application moderne sur un gradient maillé animé :

Temps	Scène app
hook	une barre de recherche en verre tape hook[0] hook[1] ; un menu déroulant de résultats liste la personne (avatar, nom, rôles) et les deux premières sections ; le curseur clique sur la personne
hero	le résultat cliqué grandit en un tableau de bord bento de tuiles en verre : une grande tuile photo (nom et pseudo), la tuile de salutation (badge, hello avec le surligneur, puces de rôles), une tuile de statistiques comptant profile.stats, une tuile button que le curseur clique, et une tuile listant les sections
sections	un carrousel horizontal, un diaporama par section : un grand numéro, le titre, « n travaux », une barre de progression en haut. Les travaux s'affichent dans des maquettes d'appareils : clips paysage dans une fenêtre de navigateur (feux tricolores, barre d'adresse site/section-title), clips portrait dans un téléphone, en cascade sur le côté droit
cta	un écran de discussion : points de frappe, puis cta[0] et cta[1] arrivent sous forme de bulles de message de la personne (la dernière dans la couleur d'accentuation)
card	une carte de profil avec une bannière de couverture dégradée, avatar chevauchant, pseudo, nom, statistiques de comptage et deux boutons en forme de pilule ; le curseur clique sur Suivre (confettis), puis elle se retourne vers un QR code de profile.qr / profile.back (réalisé avec qrencode lorsqu'il est installé), avec l'adresse en dessous

site (optionnel) définit l'adresse affichée dans les maquettes du navigateur, par défaut profile.back. Chaque style et effet fonctionne dans les deux interfaces (dans app, orbit et ticker ne sont pas utilisés).

Styles et effets

"style" choisit un thème de couleurs. Les styles sombres obtiennent des pages sombres avec une grille légère et des cartes lumineuses au lieu d'ombres de fenêtre.

Style	Aspect
mustard (par défaut)	le modèle : dégradé jaune moutarde, fond blanc, pages gris clair, pilule noire, boutons bleus
midnight	indigo à noir, cyan néon et violet, pages sombres, cartes lumineuses
sunset	pêche à rose, pages blanc chaud, titres et boutons corail
amber	or sur quasi-noir (aspect développeur ou portfolio), pages sombres, pilule et boutons ambre
mint	menthe à sarcelle, pages blanches, titres verts

"colors" remplace toute couleur individuelle du style.

Tous les effets sont activés par défaut. Désactivez-en un avec "effects": {"ticker": false}, ou tous avec "effects": false pour un aspect modèle simple :

Effet	Ce qu'il fait
bokeh	des particules de lumière douce dérivent vers le haut sur les scènes de dégradé
shine	un balayage lumineux sur la grande question, le bouton et la carte de profil, ainsi que des anneaux d'écho sur le balayage circulaire et un anneau d'impulsion sur le bouton
marker	un surligneur passe sous le nom (text.highlight choisit les mots, ou tout ce qui suit le deuxième mot)
orbit	un anneau en pointillés avec trois points tourne autour de l'avatar
blur	flou de mouvement vertical pendant le défilement de la page
labels	« 01 / 03 » au-dessus de chaque titre de section et un soulignement qui se dessine
glare	un reflet diagonal traverse chaque carte de travail après son atterrissage
ticker	de grandes étiquettes en contour défilent derrière les lignes de fermeture (text.tags, ou sinon les rôles et les titres de section)
confetti	une explosion de confettis dans les couleurs du style lorsque le bouton est cliqué
grain	grain de film et une légère vignette sur tout

Pour laisser l'utilisateur choisir, rendez les mêmes 4 moments dans chaque style (un « tableau de styles ») avant le rendu complet. Utilisez render.mjs --times sur des copies de promo.json qui diffèrent uniquement par style.

Prérequis : ffmpeg, Node 22+, Google Chrome ou Chromium (CHROME_PATH), et un Python avec numpy et scipy (PROMO_PY ; promo.sh en trouve un tout seul).

Flux de travail

1. Rassemblez ce dont la vidéo a besoin

• Avatar : une photo portrait, visage et épaules. Donnez crop: [x, y, size] (pixels) pour que le visage soit centré dans le cercle, et vérifiez l'aperçu. Avec un arrière-plan chargé ou clair, "avatarStyle": "duotone" crée une silhouette sombre sur jaune, comme dans le modèle.
• Sections (1-4) : un titre court chacune (2-4 mots) et 1-3 clips : vidéos ({"file", "at"}, 5.5 s à partir de at jouent dans la carte) ou images. Utilisez les meilleurs travaux de l'utilisateur, et mélangez portrait et paysage pour la variété.
• Textes : gardez-les courts.
  • hook : une petite ligne et une grande question de 1-2 mots.
  • badge : un slogan d'environ 50 caractères maximum.
  • hello : « Bonjour, je suis … ».
  • roles : 2-4 rôles courts.
  • button : l'étiquette du bouton.
  • cta : deux lignes de fermeture.
• Carte de profil : handle, name, jusqu'à 3 stats, buttons, clicked et back. N'utilisez que des chiffres réels (provenant de l'utilisateur, de son site ou de son profil). Une valeur de chaîne (comme "2023") est affichée telle quelle, sans comptage.
• Langue : pour le khmer, définissez "lang": "km" et écrivez du khmer naturel. Kantumruy Pro est inclus.
• Optionnel : style, effects, logo (dans le cercle de la carte), colors, text.highlight, text.tags, music (+ musicStart), sfxDir.

2. Écrivez le projet

Créez un dossier de projet et copiez examples/creator-reel.json dedans sous le nom promo.json, puis modifiez-le. Chaque clé est décrite dans references/config.md. Les chemins sont relatifs au dossier du projet.

3. Aperçu (environ 10 s)

<skill>/scripts/promo.sh <project>/promo.json --preview

Ceci coupe les clips et rend environ 13 images fixes vers out/<name>-preview.png. Lisez-le et vérifiez :

• le recadrage de l'avatar ;
• qu'aucune ligne n'est trop longue (les textes longs rétrécissent) ;
• que les cartes de chaque section montrent de bonnes images : changez at ;
• les chiffres de la carte de profil.

4. Rendu (environ 2 minutes ; exécutez-le en arrière-plan)

<skill>/scripts/promo.sh <project>/promo.json --jobs 4

Les étapes se déroulent dans cet ordre : assets, plan, render, mix, encode. --from mix remixe le son sans rendre à nouveau les images.

Sortie : out/<name>-1080p60.mp4 et out/<name>-contact.png.

5. Vérifiez avant de remettre

• Lisez la fiche de contact.
• ffprobe doit afficher la durée indiquée par build/cues.json. Le mix est normalisé à -14 LUFS / -1 dBTP.
• Vous ne pouvez pas entendre le résultat, alors dites à l'utilisateur ce que vous avez vérifié et demandez-lui d'écouter.

Réglage

• Timing : plan() dans scripts/scene.mjs. SEC est la durée d'une section et SCROLL la durée d'un défilement de page. Les repères dans buildCues() suivent automatiquement.
• Aspect :
  • Les thèmes sont STYLES et les effets sont EFFECTS dans scene.mjs ; les couleurs peuvent également provenir de colors.
  • La mise en page des cartes est layout().
  • Les ombres de fenêtre sont buildShade().
  • Le retournement est drawFlip(), bandes avec perspective.
• Son : SFX dans scripts/audio.py liste les noms de fichiers essayés dans sfxDir. make_bed() est le rythme lo-fi.