huypham85/app-3d-video

Vidéo 3D d'application

Aperçu

Une vidéo verticale de 20 secondes entièrement rendue sur ce Mac : un iPhone SceneKit réaliste dans un monde ivoire lumineux, la mascotte de l'application comme personnage qui saute et appuie sur l'interface réelle, des titres axés sur la valeur, et une musique swing originale qui fait atterrir chaque saut sur une note de marimba. template/ est un projet d'exemple complet (une application de rappel de médicaments appelée "MyApp") et fonctionne tel quel. Changez le scénario, l'interface utilisateur, les données, la marque et la musique ; conservez l'apparence sauf si l'utilisateur demande autre chose.

SOUS-COMPÉTENCE OBLIGATOIRE : motion-video (moteur, planification sur grille rythmique, révision des visuels). Chaque valeur (palette, tailles, lumière, musique, pièges, deuxièmes appareils, réel vs illustratif) se trouve dans reference.md à côté de ce fichier.

Là où les deux compétences diffèrent, celle-ci prévaut : copiez template/, exécutez bash mv3d.sh (et non mv.sh), et les rebonds, étincelles et confettis de la mascotte font partie de l'apparence même si le préréglage santé de motion-video les évite. L'interface utilisateur qui porte des données reste en fondu et pop ; la mascotte fait les sauts.

Partir du modèle

cp -R ~/.claude/skills/app-3d-video/template ~/Movies/MotionVideo/<slug>
cd ~/Movies/MotionVideo/<slug>
bash mv3d.sh audio                   # score.swift -> music.wav, affiche les niveaux ; à exécuter avant les visuels
bash mv3d.sh stills 0.5,4.6,10.1     # BEATS -> stills/ + sheet.png
bash mv3d.sh video                   # out.mp4, environ 5 min pour 20 s avec un téléphone : à exécuter en arrière-plan
bash mv3d.sh frames out.mp4 2.5,6.3  # SECONDES -> check/ + check_sheet.png

La marque se trouve dans le bloc BRAND en haut de scenes.swift : APP_NAME (mot de la carte de fin), APP_VERSION (le numéro 3D ; revérifiez sa taille et sa position sur les visuels lorsque la longueur change), LABEL (petite étiquette au-dessus du premier titre), END_PILL (pastille dégradée sur la carte de fin), et les couleurs de la mascotte. Remplacez ensuite chaque appel headline(...) dans render(), les en-têtes de commentaires et plan.md. "COMING IN …" et "COMING SOON" sont le texte d'accroche ; pour un lancement, demandez à l'utilisateur l'étiquette et le texte de la carte de fin.

Les scènes d'exemple (carte Live Activity, widget d'écran verrouillé, fond d'écran boîte à pilules hebdomadaire) appartiennent à l'application d'exemple. Remplacez-les par l'interface utilisateur propre à l'utilisateur, en conservant les techniques : canevas 2D image par image mappés sur l'écran du téléphone, la mascotte se tenant debout et appuyant sur les éléments, accélérés temporels pilotés par une seule horloge.

Flux de travail

1. Faits. Lisez le dépôt de l'utilisateur pour chaque fonctionnalité : chaînes réelles, mise en page, palette, états, barrières payantes, les couleurs de l'icône de l'application (elles deviennent celles de la mascotte). Demandez ce que le code ne peut pas répondre (quelles fonctionnalités, noms exacts, gratuit ou payant, teaser ou lancement, durée ; par défaut 20 s vertical). Une fonctionnalité sans interface utilisateur dans le dépôt : demandez un design ou une capture d'écran. Sans cela, dessinez-la à partir du système de design de l'application, listez-la comme illustrative, et montrez-la sur la première feuille de visuels.
2. Mascotte. Par défaut, la capsule bicolore dans les couleurs de la marque de l'application. Si l'application a sa propre mascotte ou une forme d'icône simple, construisez-la à partir de primitives SceneKit dans buildCapsule() (conservez CAP_HALF, la taille unitaire et la liste des matériaux pour que les ombres et les deux passes fonctionnent encore).
3. Planifiez plan.md sur la grille rythmique (96 BPM swing, 8 mesures = 20 s). Une fonctionnalité = une interaction de la mascotte avec son interface réelle. Un matin, un ensemble de données, une horloge. Le téléphone est la scène ; un deuxième appareil (Watch, iPad) n'intervient que pour une fonctionnalité qui y vit (reference.md, "Deuxième appareil"). Listez réel vs illustratif.
4. Copiez. Titre = ce que l'utilisateur obtient, jamais un nom de fonctionnalité. Un puce PRO sur la sous-ligne pour les éléments payants. Si une compétence d'humanisation est installée, exécutez-la sur chaque ligne, puis revérifiez les faits.
5. Musique. Conservez le son (ukulélé, marimba, sifflet, claquements, mi majeur, le chœur synthétique sur le temps fort de la carte de fin) mais écrivez de nouveaux accords, mélodie et hits pour la nouvelle chorégraphie : chaque atterrissage est une note de marimba sur son battement visuel. Si l'application a son propre son de notification, il peut remplacer le chœur synthétique (voir la fin de score.swift) ; faites correspondre la tonalité de la partition à celui-ci (motion-video references/score-guide.md). Si l'utilisateur demande une musique différente, changez aussi les instruments. Ciblez −13…−15 dBFS, 0 % d'écrêtage.
6. Visuels, deux tours minimum, y compris les battements de saut en vol. Vérifiez : la mascotte ne couvre jamais les informations, elle marque une pause sur ce qu'elle presse, les ombres sont visibles, le haut du téléphone se trouve en dessous du titre, rien ne transparaît à travers la copie, et aucune couleur réelle de l'interface utilisateur ne se bat avec le titre orange.
7. Rendu en arrière-plan, puis frames sur le MP4 et regardez-les.
8. Livrez à ~/Downloads/<App>_<Topic>_3D_<N>s[_vN].mp4 et envoyez ou montrez le fichier à l'utilisateur. Signalez battement par battement en secondes, réel vs illustratif, et que l'audio a été jugé par mesure. Conservez les versions antérieures dans v1/. Conservez la vidéo dans une langue jusqu'à ce que l'utilisateur l'approuve ; chaque locale supplémentaire est un rendu complet, donc demandez quelles locales ils veulent.

Contrat d'apparence

• Monde ivoire/avoine avec un soleil doux. Pas de fond sombre de studio, pas de rose saturé.
• Téléphone titane neutre, fond d'écran beige de style photo, horloge à encre foncée, palettes claires pour les cartes à l'écran.
• Titres gras SF Pro Rounded ; la ligne 2 est le dégradé orange.
• La mascotte interagit (atterrit, piétine, donne des coups de tête, saute sur les éléments). Elle ne se contente jamais d'orbiter ou de poser.
• Ombres douces réelles. Pas de profondeur de champ, pas de bloom.

Erreurs courantes

Erreur	Correction
Passer des battements à frames ou des secondes à stills	frames = secondes, stills = battements (20 s = 32 battements)
La mascotte quitte un bouton dès qu'elle atterrit	Restez environ 0,2 battement pour que l'appui se voie
La mascotte se tient sur l'heure ou l'étiquette	Placez-la à côté de l'info qu'elle couvrirait
Faire disparaître un maillage avec opacity	Déplacez-le, redimensionnez-le ou cachez-le
La couleur de la marque se heurte au titre dégradé orange	Conservez la marque sur la mascotte et le numéro de version ; changez le dégradé du titre seulement si l'utilisateur le demande