android-style-logo-reveal

Android Style Logo Reveal (Revelação de Logotipo Estilo Android)

Se várias skills puderem fazer isso: quando a solicitação não nomear esta skill e seu agente também tiver outras skills de omnigami que façam o mesmo tipo de coisa (outros filmes de lançamento, cenas, decks ou mockups), liste-as pelo nome e pergunte qual delas o usuário quer antes de começar. Se for nomeada, ou for a única instalada, prossiga.

Para páginas de produtos em japonês, coreano ou chinês, mantenha o texto nesse idioma e defina o lang do filme como o <html lang> da página; as faces Noto agrupadas e as quebras de frase cuidam do texto.

Uma abertura de 15,5 segundos que constrói a marca do produto a partir de sua própria geometria e termina em seu lockup. Linhas de construção finas crescem ao longo das bordas reais da marca; círculos de compasso são desenhados a partir de seus arcos reais, um a cada 0,75 s, enquanto quatro linhas curtas dizem o que o produto faz por você; a marca preenche, desliza para o centro e segura; a câmera avança até que sua cor seja todo o quadro; a primeira palavra da linha do produto pousa sozinha, enorme; um wipe em uma das formas próprias da marca carrega essa palavra para o resto da linha; um disco se estica para dentro da entrada real do produto (ou seu botão principal), onde as últimas palavras são digitadas; o envio é pressionado, um disco da cor da marca floresce no quadro, e a câmera recua para fora da marca até o lockup. Campos planos, sem desfoque, sem gradientes, sem sombras. 30 fps em uma grade de 120 BPM, widescreen (1920 × 1080).

Você trabalha adaptando um filme finalizado. reference/ é o filme completo para a Ostlery (um assistente de reserva de estadia fictício criado para os exemplos do omnigami; sua história e fontes estão em reference/STORY.md). Mantenha sua mecânica: a suavização, a linha do tempo, o avanço e recuo da câmera, o wipe, o disco, o florescimento, as proporções do lockup e as próprias verificações do filme. Seus substantivos se tornam os do usuário: a marca, a construção desenhada a partir dessa marca, as quatro linhas, a linha, a entrada, as cores, as fontes e a palavra-marca. Cada configuração que você altera é rotulada como ADAPT em reference/index.html; tudo rotulado como KEEP permanece.

Leia style.md antes de planejar e critique.md antes de julgar qualquer coisa.

O que precisa

• A marca como caminhos vetoriais (um SVG). A construção é a geometria real da marca, então um PNG não é suficiente: peça o SVG (ou encontre-o na fonte ou site do produto). Nunca trace, redesenhe ou "melhore" uma marca.
• A linha do produto: uma frase própria, de três a sete palavras, que se lê em duas partes (Ostlery: "Planeje uma estadia" + "em uma frase."). A primeira palavra deve ser curta e forte: ela pousa sozinha, tão grande quanto o quadro permitir.
• Quatro coisas que o produto faz por você, na voz dele (do site ou guia de marca).
• Uma entrada ou botão real do produto, como o produto o estiliza: de preferência, um campo com seu próprio botão de envio dentro dele (um compositor, uma caixa de busca com um botão "ir", um prompt); caso contrário, seu botão de ação principal. Nunca um componente que o produto não tenha (veja "A entrada").
• Suas fontes (arquivos com suas licenças): a face de exibição para a linha, a face de interface, a face da palavra-marca, ou a palavra-marca delineada como um SVG. Se uma face não puder ser enviada, peça um arquivo licenciado ou use a face aberta mais próxima e informe.

Leia o site antes de perguntar; depois pergunte uma vez, em uma mensagem, pelo que ele não puder responder. Se o usuário não quiser perguntas ou uma execução não supervisionada, decida a partir do que você pode alcançar e informe o que decidiu.

Configuração

Verifique Node 20+, ffmpeg e um navegador da família Chrome (scripts/chrome.mjs o encontra; CHROME_PATH substitui). Explique qualquer coisa faltante e pare. Trabalhe em logo-reveal/ no diretório atual; defina SKILL_DIR para a pasta deste arquivo primeiro:

SKILL_DIR=/caminho/para/android-style-logo-reveal   # a pasta onde este SKILL.md está
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/ permanece intocado, para comparação. Você edita film/: seu index.html e seus assets/ (substitua mark.svg e as fontes pelas do produto, cada fonte com sua licença, e delete as da referência quando as suas carregarem). Seu STORY.md e PRODUCT.md vão no topo de logo-reveal/. Olhe para out/reference/16x9-sheet.png agora: essa é a referência.

1. Leia a marca

1. node scripts/capture.mjs <url> capture e leia cada captura de tela e capture/brand.json. Abra o produto em si (seu app, uma demo ou sua fonte). Um app local: sirva-o (python3 -m http.server) e use seu endereço.
2. Escreva PRODUCT.md: o que ele faz em uma frase, sua voz, suas fontes e licenças, a ideia da marca (o que suas formas representam: os arcos da Ostlery são "portas dentro de portas", a porta "a única estadia que encontra"), sua entrada ou botão principal e sua estilização, a linha e os quatro benefícios, cada um com onde você o encontrou, e a data. E suas cores por papel (os tokens do filme, C):
   • paper o fundo, ink seu texto, card o preenchimento da entrada;
   • ember a cor da marca (o nome é o da referência; mantenha os nomes dos papéis);
   • lake as linhas de construção: uma cor fria que a marca usa para links, linhas ou mapas. Se ela não tiver, ou a mantiver para outra coisa, use sua tinta (nunca um cinza claro: parece desbotado);
   • ok as verificações ao lado das linhas: sua cor de sucesso, ou sua tinta se essa cor for racionada (Tovra mantém seu verde para dinheiro que chegou).

2. As palavras

• As quatro linhas dizem o que o produto faz por você: benefícios, na voz da marca, duas a cinco palavras cada. Elas são definidas a 64 px em uma coluna de 650 px e todas encolhem para caber na mais larga: mantenha a mais longa em cerca de 22 caracteres (a mais longa da Ostlery, "Encontra a que se encaixa", 23 caracteres de Figtree, cabe justo a 64 px; uma face mais larga cabe menos, e uma linha que define abaixo de cerca de 56 px parece pequena). Nunca os detalhes específicos dos dados de amostra: não um filtro, um preço, um cliente, um nome de resultado ("Abaixo de $220 por noite" e "Melhor ajuste · Heron Point Cabin" foram rejeitados para a Ostlery: eles não dizem nada sobre por que alguém os quereria). Ordene-os como o produto funciona; o último é a recompensa, e ele pousa quando a marca preenche. Quatro, nunca cinco: cada um deve durar cerca de um segundo para ser lido.
• A linha, dividida em duas: line1, a declaração (duas a quatro palavras), e line2, o resto, digitado na entrada (20 caracteres ou menos é o melhor para leitura; a verificação do filme falha se a digitação entrar no pressionar), ou o rótulo do próprio botão. Use a linha do produto se ele tiver uma. Uma palavra-chave pode ser marcada *assim* para ser definida na cor da marca, em qualquer parte, mas nunca a primeira palavra (ela pousa na cor do fundo no campo da marca). Escreva a marca ao redor da palavra apenas; o filme lê *pago*. como *pago.*. Uma marca que mantém sua cor para um significado pode não marcar nada.
• A palavra-marca: o nome do produto como seu lockup o define (sua caixa, sua face e peso, ou seu SVG delineado).

Escreva STORY.md no formato de reference/STORY.md: o TL;DR, o que cada batida diz, a folha de batidas com a construção da sua marca, preenchimento, wipe, formas de canto e entrada, e cada palavra com sua fonte. Mostre ao usuário as quatro linhas, a linha e o plano de construção em algumas linhas e peça uma revisão, a menos que ele tenha solicitado uma execução não supervisionada. Nunca considere o silêncio como aprovação.

3. Construa a marca a partir de sua própria geometria

Este é o coração do filme: o espectador deve sentir que a marca foi desenhada com cuidado, porque cada linha desenhada está realmente nela. Cada número abaixo está na caixa de 100 unidades do filme (a marca centralizada em (50, 50), seu lado mais longo indo de 8 → 92). Calcule-os no papel a partir dos números do SVG primeiro, depois digite-os.

1. Coloque a marca (MARK_D, MARK_FIT, BOX). Copie exatamente os dados do caminho do SVG em MARK_D, uma entrada por parte (uma parte é um pedaço que você preencherá sozinho; caminhos fill-rule="evenodd" permanecem como estão). Se o SVG não for desenhado na caixa de 100 unidades, defina MARK_FIT = [s, 0, 0, s, tx, ty] com s = 84 / (seu lado mais longo), tx = 50 - s × (seu centro x), ty = 50 - s × (seu centro y); então cada número SVG v mapeia para s × v + tx (x) ou s × v + ty (y). Defina BOX para os limites da marca na caixa (uma marca quadrada: 8, 8, 92, 92; uma larga mantém x 8 → 92 e seus limites y se movem para dentro). Uma marca multicolorida: dê a drawMark e os preenchimentos a cor de cada parte.
2. A grade (GRID_X, GRID_Y): uma linha para cada borda real. Liste o x de cada borda reta vertical, o y de cada horizontal, as tangentes de cada arco (seu centro ± seu raio, em ambas as direções), o eixo de simetria de cada parte, e os eixos centrais em 50 (desenhados um pouco mais escuros). Mescle linhas mais próximas que 2 unidades; mantenha cerca de 6–12 verticais e 4–8 horizontais. Nada na grade que não seja uma borda, uma tangente ou um eixo da marca.
3. Os primitivos (PRIMS, T.circles): com o que o designer da marca a desenhou, do maior para o menor, no máximo cinco. Cada um é desenhado por um ponto em movimento ao longo de 0,65 s em STROKE, com uma âncora onde começa e uma na metade do caminho, os mais antigos escurecendo, enquanto a linha de dimensão desliza para o mais novo:
   • um círculo, de um dos arcos da marca: { x, y, r }, seu centro e raio (ele começa em seu ponto de mola direito e sobe por cima). Arcos que compartilham um centro formam a construção mais forte (os cinco da Ostlery são concêntricos);
   • qualquer outro contorno: { path, half }, dados do caminho SVG nas unidades da caixa começando onde o ponto deve começar, e a parcela de seu comprimento onde a segunda âncora pousa: uma barra arredondada como um contorno, a diagonal de um quadrado, a mediana de um triângulo, o tronco e a curva de uma letra. Uma marca sem arcos precisa destes. Dê a cada um dim: [x, 50], onde a linha de dimensão começa, no eixo central (seu cruzamento da borda direita), para que a linha corra nivelada com a coluna das linhas. Olhe para cada estágio da construção: círculos pequenos dentro de um grande podem ler como um rosto (a moeda de Tovra com três pequenos arcos lê como dois olhos e uma carranca); desenhe as formas que eles arredondam em vez disso (o T como duas barras arredondadas). Nunca uma caixa delimitadora, uma ferramenta de caneta, um cursor ou qualquer adereço de ferramenta de design.
4. Os tempos das linhas e primitivos (LINES, T.lines, T.circles): as linhas em 0,75, 2,0, 3,25 e 4,5 s (a última com o preenchimento). Cinco primitivos começam a cada 0,75 s a partir de 0,75 s; com menos, comece um em cada tempo de linha (três: 0,75, 2,0, 3,25). Em seguida, mova keyTimes (perto do final do arquivo) para os momentos do seu filme: um dentro do desenho de cada primitivo e da pausa de cada linha.
5. O preenchimento (FILLS): a ordem vem da ideia da marca, e a parte que é a recompensa da ideia acende primeiro. Cada passo é rise (uma parte preenche de seu pé para cima), along (uma banda preenche ao longo de sua linha central, dada como um caminho nas unidades da caixa com seu comprimento, de uma extremidade à outra) ou grow (uma parte preenche para fora de um ponto); cada um em STROKE ao longo de 0,6–0,75 s, o próximo começando antes do último ter terminado para que nenhum passo pare. Ostlery: a porta sobe de sua soleira, então os arcos externo e interno preenchem ao longo de seus próprios caminhos, pé esquerdo por cima. Uma marca de parte única preenche uma vez (a moeda de Tovra sobe verde de seu pé, como a barra paga do seu app).
6. Onde a câmera entra (DOOR): um ponto no meio de uma parte sólida da marca, com pelo menos 19,2 × 10,8 unidades dessa parte ao seu redor (o quadro no início da puxada, 100 px por unidade), para que o avanço pouse em uma cor. Se nenhuma parte for tão grande, aumente UP e UP2 juntos (as verificações do filme dizem quando pousa). O avanço entra onde a ideia da marca diz "para dentro" (Ostlery: através de sua porta).

4. O wipe, as formas de canto, o campo da linha e a entrada

• O wipe (archWipe, WIPE, T.wipe): a mudança do campo da marca para o campo da linha nunca é um corte brusco. É uma das formas próprias da marca, dimensionada muito mais larga que o quadro, subindo ou deslizando sobre o campo com a próxima cena dentro dela, em 0,55 s, terminando assim que sua borda limpa os cantos distantes do quadro para que seu assentamento aconteça na tela. O da Ostlery é sua porta; o de Tovra é o disco de sua moeda. Desenhe o seu como um caminho em archWipe (mantenha seu argumento keep: o filme também recorta fora dela). A primeira palavra passa por cima de ambos os campos.
• As formas de canto (corners): duas peças da marca espreitam das bordas do quadro no campo da linha (Ostlery: seu arco externo no canto superior direito, preenchido; um contorno de porta no canto inferior esquerdo), deslizando com uma saída suave; grandes o suficiente para serem lidas como a forma, nunca cruzando a linha ou a entrada, e nunca cortadas pelo quadro em um entalhe perdido.
• O campo da linha (LINE): tinta, suas palavras na cor do fundo (a referência). Se a entrada ou botão do produto for escuro, ele desapareceria na tinta: defina LINE = { field: C.paper, text: C.ink } (a primeira palavra então pega a cor da linha dentro do wipe).
• A entrada (INPUT, SEND, BUTTON, COMP, ICON_UP): um componente real do produto, redesenhado a partir de seu CSS na escala do filme, nunca duas de suas peças unidas em uma que ele não tenha. Em ordem de preferência:
  1. Um campo com seu próprio botão de envio dentro dele (INPUT.kind = 'field', a referência): seu preenchimento, seu arredondamento (INPUT.round, seu raio de canto como uma parcela de sua altura; 0,5 totalmente arredondado), a cor de seu envio, forma (SEND.round) e ícone, sua face e peso de texto. Um disco branco surge, se estica para dentro do campo, o envio entra em sua extremidade, line2 é digitado a 0,045 s por letra com um cursor constante.
  2. Seu botão de ação principal (INPUT.kind = 'button'), quando ele não tem tal campo: um disco na cor do botão surge e se estica para dentro do botão (seu próprio raio, INPUT.round), e seu ícone e rótulo (line2, o rótulo real do botão) são inseridos em um movimento; sem digitação. BUTTON contém seus tamanhos: mantenha a proporção própria do app...