android-style-logo-reveal

Dévoilement de Logo Style Android

Si plusieurs compétences peuvent le faire : lorsque la demande ne nomme pas cette compétence et que votre agent possède également d'autres compétences omnigami qui fabriquent le même type de chose (autres films de lancement, plans, présentations ou maquettes), listez-les par nom et demandez à l'utilisateur laquelle il souhaite avant de commencer. Si elle est nommée, ou si c'est la seule installée, allez-y.

Pour les pages produits en japonais, coréen ou chinois, conservez le texte dans cette langue et définissez le lang du film sur le <html lang> de la page ; les polices Noto groupées et les césures de phrases gèrent le texte.

Un ouvreur de 15,5 secondes qui construit la marque du produit à partir de sa propre géométrie et se termine sur son logotype. De fines lignes de construction se développent le long des bords réels de la marque ; des cercles de compas sont tracés à partir de ses arcs réels, un toutes les 0,75 s, tandis que quatre courtes lignes disent ce que le produit fait pour vous ; la marque se remplit, glisse au centre et s'arrête ; la caméra pousse dedans jusqu'à ce que sa couleur soit tout le cadre ; le premier mot de la ligne du produit atterrit seul, énorme ; un fondu dans l'une des propres formes de la marque porte ce mot dans le reste de la ligne ; un disque s'étire dans la propre entrée du produit (ou son bouton principal), où les derniers mots sont tapés ; l'envoi est pressé, un disque de la couleur de la marque fleurit dans le cadre, et la caméra se retire de la marque sur le logotype. Champs plats, pas de flou, pas de dégradés, pas d'ombres. 30 images par seconde sur une grille de 120 BPM, large (1920 × 1080).

Vous travaillez en adaptant un film terminé. reference/ est le film complet pour Ostlery (un assistant de réservation de séjour fictif créé pour les exemples d'omnigami ; son histoire et ses sources sont dans reference/STORY.md). Conservez sa machinerie : l'assouplissement, la timeline, la poussée et le retrait de la caméra, le fondu, le disque, l'épanouissement, les proportions du logotype et les propres vérifications du film. Ses noms deviennent ceux de l'utilisateur : la marque, la construction tirée de cette marque, les quatre lignes, la ligne, l'entrée, les couleurs, les polices et le mot-symbole. Chaque paramètre que vous modifiez est étiqueté ADAPT dans reference/index.html ; tout ce qui est étiqueté KEEP reste.

Lisez style.md avant de planifier et critique.md avant de juger quoi que ce soit.

Ce dont il a besoin

• La marque sous forme de chemins vectoriels (un SVG). La construction est la géométrie réelle de la marque, donc un PNG ne suffit pas : demandez le SVG (ou trouvez-le dans la source ou le site du produit). Ne tracez jamais, ne redessinez jamais et n'"améliorez" jamais une marque.
• La ligne du produit : une phrase qui lui est propre, de trois à sept mots, qui se lit en deux parties (Ostlery : "Planifiez un séjour" + "en une phrase."). Le premier mot doit être court et fort : il atterrit seul, aussi grand que le cadre le permet.
• Quatre choses que le produit fait pour vous, dans sa propre voix (depuis son site ou son guide de marque).
• Une vraie entrée ou un vrai bouton du produit, tel que le produit le style : de préférence, un champ avec son propre bouton d'envoi à l'intérieur (un éditeur, une boîte de recherche avec un bouton go, une invite) ; sinon, son bouton d'action principal. Jamais un composant que le produit n'a pas (voir "L'entrée").
• Ses polices (fichiers avec leurs licences) : la police d'affichage pour la ligne, la police d'interface, la police du mot-symbole, ou le mot-symbole contouré en SVG. Si une police ne peut pas être fournie, demandez un fichier sous licence ou utilisez la police libre la plus proche et dites-le.

Lisez le site avant de demander ; puis demandez une fois, en un seul message, ce qu'il ne peut pas répondre. Si l'utilisateur ne veut pas de questions ou une exécution non supervisée, décidez à partir de ce que vous pouvez atteindre et dites ce que vous avez décidé.

Configuration

Vérifiez Node 20+, ffmpeg et un navigateur de la famille Chrome (scripts/chrome.mjs le trouve ; CHROME_PATH le remplace). Expliquez tout ce qui manque et arrêtez-vous. Travaillez dans logo-reveal/ dans le répertoire courant ; définissez d'abord SKILL_DIR sur le dossier de ce fichier :

SKILL_DIR=/chemin/vers/android-style-logo-reveal   # le dossier où se trouve ce SKILL.md
mkdir logo-reveal && cd logo-reveal
cp -R "$SKILL_DIR/reference" reference && cp -R "$SKILL_DIR/reference" film && cp -R "$SKILL_DIR/scripts" scripts && cp -R "$SKILL_DIR/music" music
rm -rf reference/out film/out film/STORY.md
npm init -y >/dev/null && npm i -D puppeteer-core
node scripts/render.mjs reference --times key --sheet --out out/reference

reference/ reste intact, pour comparaison. Vous éditez film/ : son index.html et ses assets/ (remplacez mark.svg et les polices par celles du produit, chaque police à côté de sa licence, et supprimez celles de la référence une fois que les vôtres sont chargées). Votre STORY.md et PRODUCT.md vont en haut de logo-reveal/. Regardez out/reference/16x9-sheet.png maintenant : c'est la référence.

1. Lire la marque

1. node scripts/capture.mjs <url> capture et lisez chaque capture d'écran et capture/brand.json. Ouvrez le produit lui-même (son application, une démo ou sa source). Une application locale : servez-la (python3 -m http.server) et utilisez son adresse.
2. Écrivez PRODUCT.md : ce qu'il fait en une phrase, sa voix, ses polices et licences, l'idée de la marque (ce que ses formes représentent : les arches d'Ostlery sont "des portes dans des portes", la porte "le seul séjour qu'elle trouve"), son entrée ou son bouton principal et leur style, la ligne et les quatre avantages, chacun avec l'endroit où vous l'avez trouvé, et la date. Et ses couleurs par rôle (les jetons du film, C) :
   • paper le fond, ink son texte, card le remplissage de son entrée ;
   • ember la couleur de la marque (le nom est celui de la référence ; conservez les noms de rôles) ;
   • lake les lignes de construction : une couleur froide que la marque utilise pour les liens, les lignes ou les cartes. Si elle n'en a pas, ou la garde pour autre chose, utilisez son encre (jamais un gris clair : il se lit faible) ;
   • ok les vérifications à côté des lignes : sa couleur de succès, ou son encre si cette couleur est réservée (Tovra garde son vert pour l'argent qui est arrivé).

2. Les mots

• Les quatre lignes disent ce que le produit fait pour vous : des avantages, dans la voix de la marque, deux à cinq mots chacun. Ils se composent à 64 px dans une colonne de 650 px et rétrécissent tous pour s'adapter au plus large : gardez le plus long à environ 22 caractères (le plus long d'Ostlery, "Trouve celui qui convient", 23 caractères de Figtree, tient juste à 64 px ; une police plus large en tient moins, et une ligne qui se compose en dessous d'environ 56 px se lit petite). Jamais les spécificités des données d'exemple : pas un filtre, un prix, un client, un nom de résultat ("Moins de 220 $ par nuit" et "Meilleur ajustement · Heron Point Cabin" ont été rejetés pour Ostlery : ils ne disent rien sur pourquoi quelqu'un le voudrait). Ordonnez-les comme le produit fonctionne ; le dernier est la récompense, et il atterrit lorsque la marque se remplit. Quatre, jamais cinq : chacun doit tenir environ une seconde pour être lu.
• La ligne, divisée en deux : line1, la déclaration (deux à quatre mots), et line2, le reste, tapé dans l'entrée (20 caractères ou moins se lit mieux ; la vérification du film échoue si la frappe rencontre la pression), ou le propre label du bouton. Utilisez la propre ligne du produit si elle en a une. Un mot clé peut être marqué *comme ceci* pour se composer dans la couleur de la marque, dans l'une ou l'autre partie, mais jamais le premier mot (il atterrit dans la couleur du fond sur le champ de la marque). Écrivez la marque autour du mot uniquement ; le film lit *payé*. comme *payé.*. Une marque qui garde sa couleur pour un sens peut ne rien marquer.
• Le mot-symbole : le nom du produit tel que son logotype le définit (sa casse, sa police et son poids, ou son SVG contouré).

Écrivez STORY.md dans la forme de reference/STORY.md : le TL;DR, ce que chaque temps fort dit, la feuille de temps avec la construction de votre marque, le remplissage, le fondu, les formes de coin et l'entrée, et chaque mot avec sa source. Montrez à l'utilisateur les quatre lignes, la ligne et le plan de construction en quelques lignes et demandez une révision, sauf s'il a demandé une exécution non supervisée. Ne prenez jamais le silence comme une approbation.

3. Construire la marque à partir de sa propre géométrie

C'est le cœur du film : le spectateur doit sentir que la marque a été conçue avec soin, car chaque ligne tracée est réellement dedans. Chaque nombre ci-dessous est dans la boîte de 100 unités du film (la marque centrée sur (50, 50), son côté le plus long allant de 8 à 92). Calculez-les d'abord sur papier à partir des nombres du SVG, puis tapez-les.

1. Placez la marque (MARK_D, MARK_FIT, BOX). Copiez exactement les données de chemin du SVG dans MARK_D, une entrée par partie (une partie est un morceau que vous remplirez seul ; les chemins fill-rule="evenodd" restent tels quels). Si le SVG n'est pas dessiné dans la boîte de 100 unités, définissez MARK_FIT = [s, 0, 0, s, tx, ty] avec s = 84 / (son côté le plus long), tx = 50 - s × (son centre x), ty = 50 - s × (son centre y) ; alors chaque nombre SVG v correspond à s × v + tx (x) ou s × v + ty (y). Définissez BOX sur les limites de la marque dans la boîte (une marque carrée : 8, 8, 92, 92 ; une marque large garde x 8 → 92 et ses limites y se déplacent). Une marque multicolore : donnez à drawMark et aux remplissages la couleur de chaque partie.
2. La grille (GRID_X, GRID_Y) : une ligne pour chaque bord réel. Listez le x de chaque bord vertical droit, le y de chaque bord horizontal, les tangentes de chaque arc (son centre ± son rayon, dans les deux sens), l'axe de symétrie de chaque partie, et les axes centraux à 50 (tirés un peu plus foncés). Fusionnez les lignes plus proches de 2 unités ; gardez environ 6 à 12 verticales et 4 à 8 horizontales. Rien sur la grille qui ne soit un bord, une tangente ou un axe de la marque.
3. Les primitives (PRIMS, T.circles) : ce avec quoi le designer de la marque l'a dessinée, de la plus grande à la plus petite, au maximum cinq. Chacune est dessinée par un point en mouvement sur 0,65 s sur STROKE, avec une ancre là où elle commence et une à mi-chemin, les plus anciennes s'atténuant, tandis que la ligne de dimension glisse vers la plus récente :
   • un cercle, à partir d'un des arcs de la marque : { x, y, r }, son centre et son rayon (il commence à son point de ressort droit et monte par-dessus le dessus). Les arcs qui partagent un centre font la construction la plus forte (les cinq d'Ostlery sont concentriques) ;
   • tout autre contour : { path, half }, données de chemin SVG dans les unités de la boîte commençant là où le point doit commencer, et la part de sa longueur où la deuxième ancre atterrit : une barre arrondie comme un contour, une diagonale de carré, une médiane de triangle, une hampe et un bol de lettre. Une marque sans arcs a besoin de ceux-ci. Donnez à chacun dim: [x, 50], où la ligne de dimension commence, sur l'axe central (son croisement de bord droit), afin que la ligne coure horizontalement vers la colonne des lignes. Regardez chaque étape de la construction : de petits cercles à l'intérieur d'un grand peuvent se lire comme un visage (la pièce de Tovra avec trois petits arcs se lit comme deux yeux et un froncement) ; dessinez les formes qu'ils arrondissent à la place (le T comme deux barres arrondies). Jamais une boîte englobante, un outil stylo, un curseur ou tout accessoire d'outil de conception.
4. Les temps des lignes et des primitives (LINES, T.lines, T.circles) : les lignes à 0,75, 2,0, 3,25 et 4,5 s (la dernière avec le remplissage). Cinq primitives commencent toutes les 0,75 s à partir de 0,75 s ; avec moins, commencez-en une à chaque temps de ligne (trois : 0,75, 2,0, 3,25). Ensuite, déplacez keyTimes (près de la fin du fichier) vers les moments de votre film : un à l'intérieur du dessin de chaque primitive et de la tenue de chaque ligne.
5. Le remplissage (FILLS) : l'ordre vient de l'idée de la marque, et la partie qui est la récompense de l'idée s'allume en premier. Chaque étape est rise (une partie se remplit de son pied vers le haut), along (une bande se remplit le long de sa ligne médiane, donnée comme un chemin dans les unités de la boîte avec sa longueur, d'une extrémité à l'autre) ou grow (une partie se remplit vers l'extérieur à partir d'un point) ; chacun sur STROKE sur 0,6 à 0,75 s, le suivant commençant avant que le dernier n'ait fini afin qu'aucune étape ne s'arrête. Ostlery : la porte s'élève de son seuil, puis les arches extérieure et intérieure se remplissent le long de leurs propres chemins, du pied gauche par-dessus le dessus. Une marque en une seule partie se remplit une fois (la pièce de Tovra s'élève en vert de son pied, comme la barre payée de son application).
6. Où la caméra entre (DOOR) : un point au milieu d'une partie solide de la marque, avec au moins 19,2 × 10,8 unités de cette partie autour (le cadre au début du retrait, 100 px par unité), afin que la poussée atterrisse sur une couleur. Si aucune partie n'est aussi grande, augmentez UP et UP2 ensemble (les vérifications du film disent quand elle atterrit). La poussée va là où l'idée de la marque dit "dedans" (Ostlery : à travers sa porte).

4. Le fondu, les formes de coin, le champ de la ligne et l'entrée

• Le fondu (archWipe, WIPE, T.wipe) : le changement du champ de la marque au champ de la ligne n'est jamais une coupe franche. C'est l'une des propres formes de la marque, mise à l'échelle beaucoup plus large que le cadre, montant ou glissant sur le champ avec la scène suivante à l'intérieur, en 0,55 s, se terminant juste au moment où son bord dépasse les coins éloignés du cadre afin que son installation se produise à l'écran. Celui d'Ostlery est sa porte ; celui de Tovra est le disque de sa pièce. Dessinez le vôtre comme un chemin dans archWipe (conservez son argument keep : le film clip aussi en dehors). Le premier mot chevauche les deux champs.
• Les formes de coin (corners) : deux morceaux de la marque apparaissent depuis les bords du cadre sur le champ de la ligne (Ostlery : son arche extérieure en haut à droite, remplie ; un contour de porte en bas à gauche), glissant en entrée avec un assouplissement de sortie ; assez grands pour se lire comme la forme, ne croisant jamais la ligne ou l'entrée, et jamais coupés par le cadre en une encoche parasite.
• Le champ de la ligne (LINE) : encre, ses mots dans la couleur du fond (la référence). Si l'entrée ou le bouton du produit est sombre, il disparaîtrait sur l'encre : définissez LINE = { field: C.paper, text: C.ink } (le premier mot prend alors la couleur de la ligne à l'intérieur du fondu).
• L'entrée (INPUT, SEND, BUTTON, COMP, ICON_UP) : un composant réel du produit, redessiné à partir de son CSS à l'échelle du film, jamais deux de ses morceaux assemblés en un seul qu'il n'a pas. Par ordre de préférence :
  1. Un champ avec son propre bouton d'envoi à l'intérieur (INPUT.kind = 'field', la référence) : son remplissage, son arrondi (INPUT.round, son rayon de coin comme part de sa hauteur ; 0,5 entièrement arrondi), la couleur de son envoi, sa forme (SEND.round) et son icône, sa police de texte et son poids. Un disque blanc surgit, s'étire dans le champ, l'envoi arrive à son extrémité, line2 est tapé à 0,045 s par lettre avec un curseur stable.
  2. Son bouton d'action principal (INPUT.kind = 'button'), lorsqu'il n'a pas de tel champ : un disque de la couleur du bouton surgit et s'étire dans le bouton (son propre rayon, INPUT.round), et son icône et son label (line2, le vrai label du bouton) se positionnent en un seul mouvement ; pas de frappe. BUTTON contient ses tailles : conservez la propre proportion de l'application.