android-style-logo-reveal

Revelación de Logotipo Estilo Android

Si varias habilidades pueden hacer esto: cuando la solicitud no nombre esta habilidad y tu agente también tenga otras habilidades omnigami que hagan el mismo tipo de cosa (otros films de lanzamiento, tomas, presentaciones o maquetas), enuméralas por nombre y pregunta cuál quiere el usuario antes de comenzar. Si está nombrada, o es la única instalada, continúa.

Para páginas de producto en japonés, coreano o chino, mantén el texto en ese idioma y configura el lang del film con el <html lang> de la página; las fuentes Noto incluidas y los saltos de frase manejan el texto.

Un abridor de 15,5 segundos que construye la marca del producto a partir de su propia geometría y termina en su lockup. Finas líneas de construcción crecen a lo largo de los bordes reales de la marca; se dibujan círculos de compás a partir de sus arcos reales, uno cada 0,75 s, mientras cuatro líneas cortas dicen lo que el producto hace por ti; la marca se llena, se desliza al centro y se mantiene; la cámara se empuja hacia ella hasta que su color ocupa todo el fotograma; la primera palabra de la línea del producto aterriza sola, enorme; un barrido en una de las formas propias de la marca lleva esa palabra al resto de la línea; un disco se estira hacia la entrada real del producto (o su botón principal), donde se escriben las últimas palabras; se presiona enviar, un disco del color de la marca florece en el fotograma, y la cámara retrocede fuera de la marca hacia el lockup. Campos planos, sin desenfoque, sin degradados, sin sombras. 30 fps en una cuadrícula de 120 BPM, panorámico (1920 × 1080).

Trabajas adaptando un film terminado. reference/ es el film completo para Ostlery (un asistente ficticio de reserva de estancias creado para los ejemplos de omnigami; su historia y fuentes están en reference/STORY.md). Mantén su maquinaria: las curvas de easing, la línea de tiempo, el empuje y retroceso de la cámara, el barrido, el disco, el florecimiento, las proporciones del lockup y las comprobaciones del propio film. Sus nombres se convierten en los del usuario: la marca, la construcción dibujada a partir de esa marca, las cuatro líneas, la línea, la entrada, los colores, las fuentes y la marca denominativa. Cada ajuste que cambies está etiquetado como ADAPT en reference/index.html; todo lo etiquetado como KEEP se queda.

Lee style.md antes de planificar y critique.md antes de juzgar cualquier cosa.

Lo que necesita

• La marca como trazados vectoriales (un SVG). La construcción es la geometría real de la marca, por lo que un PNG no es suficiente: pide el SVG (o encuéntralo en el código fuente o sitio del producto). Nunca traces, redibujes o "mejores" una marca.
• La línea del producto: una oración propia, de tres a siete palabras, que se lea como dos partes (Ostlery: "Plan a" + "stay in a sentence."). La primera palabra debe ser corta y fuerte: aterriza sola, tan grande como el marco lo permita.
• Cuatro cosas que el producto hace por ti, en su propia voz (de su sitio o guía de marca).
• Una entrada o botón real del producto, tal como el producto lo estiliza: mejor, un campo con su propio botón de enviar dentro (un compositor, un cuadro de búsqueda con un botón de ir, un prompt); de lo contrario, su botón de acción principal. Nunca un componente que el producto no tenga (ver "La entrada").
• Sus fuentes (archivos con sus licencias): la fuente display para la línea, la fuente de interfaz, la fuente de la marca denominativa, o la marca denominativa delineada como SVG. Si no se puede enviar una fuente, pide un archivo con licencia o usa la fuente abierta más cercana y dilo.

Lee el sitio antes de preguntar; luego pregunta una vez, en un mensaje, por lo que no pueda responder. Si el usuario no quiere preguntas o una ejecución no supervisada, decide a partir de lo que puedas alcanzar y di lo que decidiste.

Configuración

Verifica Node 20+, ffmpeg y un navegador de la familia Chrome (scripts/chrome.mjs lo encuentra; CHROME_PATH lo anula). Explica cualquier cosa faltante y detente. Trabaja en logo-reveal/ en el directorio actual; configura SKILL_DIR a la carpeta de este archivo primero:

SKILL_DIR=/ruta/a/android-style-logo-reveal   # la carpeta donde está este 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/ permanece intacto, para comparar. Editas film/: su index.html y sus assets/ (reemplaza mark.svg y las fuentes con las del producto, cada fuente junto a su licencia, y elimina las de referencia una vez que las tuyas carguen). Tu STORY.md y PRODUCT.md van al inicio de logo-reveal/. Mira out/reference/16x9-sheet.png ahora: ese es el estándar.

1. Lee la marca

1. node scripts/capture.mjs <url> capture y lee cada captura de pantalla y capture/brand.json. Abre el producto mismo (su app, un demo o su código fuente). Una app local: sírvela (python3 -m http.server) y usa su dirección.
2. Escribe PRODUCT.md: qué hace en una oración, su voz, sus fuentes y licencias, la idea de la marca (qué representan sus formas: los arcos de Ostlery son "puertas dentro de puertas", el umbral "la única estancia que encuentra"), su entrada o botón principal y su estilo, la línea y los cuatro beneficios, cada uno con dónde lo encontraste, y la fecha. Y sus colores por rol (los tokens del film, C):
   • paper el fondo, ink su texto, card el relleno de su entrada;
   • ember el color de la marca (el nombre es el de la referencia; mantén los nombres de los roles);
   • lake las líneas de construcción: un color frío que la marca usa para enlaces, líneas o mapas. Si no tiene ninguno, o lo guarda para otra cosa, usa su ink (nunca un gris claro: se lee tenue);
   • ok las marcas de verificación junto a las líneas: su color de éxito, o su ink si ese color está reservado (Tovra guarda su verde para el dinero que ha llegado).

2. Las palabras

• Las cuatro líneas dicen lo que el producto hace por ti: beneficios, en la voz de la marca, de dos a cinco palabras cada una. Se colocan a 64 px en una columna de 650 px y todas se encogen para ajustarse a la más ancha: mantén la más larga en aproximadamente 22 caracteres (la más larga de Ostlery, "Finds the one that fits", 23 caracteres de Figtree, apenas cabe a 64 px; una cara más ancha admite menos, y una línea que se coloca por debajo de unos 56 px se lee pequeña). Nunca los detalles específicos de los datos de muestra: no un filtro, un precio, un cliente, un nombre de resultado ("Under $220 a night" y "Best fit · Heron Point Cabin" fueron rechazados para Ostlery: no dicen nada sobre por qué alguien lo querría). Ordénalos como funciona el producto; el último es la recompensa, y aterriza cuando la marca se llena. Cuatro, nunca cinco: cada una debe durar aproximadamente un segundo para leerse.
• La línea, dividida en dos: line1, la declaración (de dos a cuatro palabras), y line2, el resto, escrito en la entrada (20 caracteres o menos se lee mejor; la comprobación del film falla si la escritura se encuentra con el botón de presionar), o la etiqueta del propio botón. Usa la línea propia del producto si la tiene. Una palabra clave puede marcarse *así* para colocarse en el color de la marca, en cualquiera de las partes, pero nunca la primera palabra (aterriza en el color del fondo sobre el campo de la marca). Escribe la marca alrededor de la palabra solamente; el film lee *paid*. como *paid.*. Una marca que guarda su color para un significado puede no marcar nada.
• La marca denominativa: el nombre del producto tal como lo establece su lockup (su caso, su cara y peso, o su SVG delineado).

Escribe STORY.md en la forma de reference/STORY.md: el TL;DR, qué dice cada tiempo, la hoja de tiempos con tu construcción de marca, relleno, barrido, formas de esquina y entrada, y cada palabra con su fuente. Muestra al usuario las cuatro líneas, la línea y el plan de construcción en unas pocas líneas y pide una revisión, a menos que haya solicitado una ejecución no supervisada. Nunca tomes el silencio como aprobación.

3. Construye la marca a partir de su propia geometría

Este es el corazón del film: el espectador debe sentir que la marca fue diseñada con cuidado, porque cada línea dibujada está realmente en ella. Cada número a continuación está en el cuadro de 100 unidades del film (la marca centrada en (50, 50), su lado más largo corriendo de 8 a 92). Calcúlalos en papel a partir de los números del SVG primero, luego escríbelos.

1. Coloca la marca (MARK_D, MARK_FIT, BOX). Copia los datos de trazado del SVG exactamente en MARK_D, una entrada por parte (una parte es una pieza que rellenarás por sí sola; los trazados con fill-rule="evenodd" se quedan como están). Si el SVG no está dibujado en el cuadro de 100 unidades, configura MARK_FIT = [s, 0, 0, s, tx, ty] con s = 84 / (su lado más largo), tx = 50 - s × (su centro x), ty = 50 - s × (su centro y); entonces cada número SVG v se mapea a s × v + tx (x) o s × v + ty (y). Configura BOX a los límites de la marca en el cuadro (una marca cuadrada: 8, 8, 92, 92; una ancha mantiene x de 8 a 92 y sus límites y se mueven hacia adentro). Una marca multicolor: asigna a drawMark y los rellenos el color de cada parte.
2. La cuadrícula (GRID_X, GRID_Y): una línea por cada borde real. Enumera la x de cada borde recto vertical, la y de cada horizontal, las tangentes de cada arco (su centro ± su radio, en ambas direcciones), el propio eje de simetría de cada parte, y los ejes centrales en 50 (dibujados un poco más oscuros). Fusiona líneas más cercanas de 2 unidades; mantén aproximadamente 6–12 verticales y 4–8 horizontales. Nada en la cuadrícula que no sea un borde, una tangente o un eje de la marca.
3. Las primitivas (PRIMS, T.circles): con lo que el diseñador de la marca la dibujó, la más grande primero, como máximo cinco. Cada una se dibuja mediante un punto en movimiento durante 0,65 s en STROKE, con un ancla donde comienza y una a medio camino, las más antiguas atenuándose, mientras la línea de dimensión se desliza hacia la más nueva:
   • un círculo, de uno de los arcos de la marca: { x, y, r }, su centro y radio (comienza en su punto de resorte derecho y sube por encima de la parte superior). Los arcos que comparten un centro forman la construcción más fuerte (los cinco de Ostlery son concéntricos);
   • cualquier otro contorno: { path, half }, datos de trazado SVG en las unidades del cuadro comenzando donde el punto debe comenzar, y la fracción de su longitud donde aterriza la segunda ancla: una barra redondeada como un contorno, la diagonal de un cuadrado, la mediana de un triángulo, el asta y la curva de una letra. Una marca sin arcos necesita estos. Asigna a cada uno dim: [x, 50], donde comienza la línea de dimensión, en el eje central (su cruce del borde derecho), para que la línea corra nivelada hacia la columna de líneas. Mira cada etapa de la construcción: los círculos pequeños dentro de uno grande pueden leerse como una cara (la moneda de Tovra con tres pequeños arcos se leen como dos ojos y un ceño fruncido); dibuja las formas que redondean en su lugar (la T como dos barras redondeadas). Nunca un cuadro delimitador, una herramienta de pluma, un cursor o cualquier accesorio de herramienta de diseño.
4. Los tiempos de las líneas y primitivas (LINES, T.lines, T.circles): las líneas a 0.75, 2.0, 3.25 y 4.5 s (la última con el relleno). Cinco primitivas comienzan cada 0,75 s desde 0,75 s; con menos, comienza una en cada tiempo de línea (tres: 0.75, 2.0, 3.25). Luego mueve keyTimes (cerca del final del archivo) a los momentos de tu film: uno dentro del dibujo de cada primitiva y cada mantenimiento de línea.
5. El relleno (FILLS): el orden proviene de la idea de la marca, y la parte que es la recompensa de la idea se ilumina primero. Cada paso es rise (una parte se rellena desde su pie hacia arriba), along (una banda se rellena a lo largo de su línea central, dada como un trazado en las unidades del cuadro con su longitud, de un extremo a otro) o grow (una parte se rellena hacia afuera desde un punto); cada uno en STROKE durante 0,6–0,75 s, el siguiente comenzando antes de que el último haya terminado para que ningún paso se detenga. Ostlery: el umbral se eleva desde su umbral, luego los arcos exterior e interior se rellenan a lo largo de sus propios trazados, pie izquierdo sobre la parte superior. Una marca de una sola parte se rellena una vez (la moneda de Tovra se eleva verde desde su pie, como su barra de pago en la app).
6. Donde entra la cámara (DOOR): un punto en medio de una parte sólida de la marca, con al menos 19.2 × 10.8 unidades de esa parte a su alrededor (el fotograma al inicio del retroceso, 100 px por unidad), para que el empuje aterrice en un solo color. Si ninguna parte es tan grande, eleva UP y UP2 juntos (las comprobaciones del film dicen cuándo aterriza). El empuje va hacia donde la idea de la marca dice "adentro" (Ostlery: a través de su puerta).

4. El barrido, las formas de esquina, el campo de la línea y la entrada

• El barrido (archWipe, WIPE, T.wipe): el cambio del campo de la marca al campo de la línea nunca es un corte duro. Es una de las formas propias de la marca, escalada mucho más ancha que el fotograma, subiendo o deslizándose sobre el campo con la siguiente escena dentro de ella, en 0,55 s, terminando justo cuando su borde despeja las esquinas lejanas del fotograma para que su asentamiento ocurra en pantalla. El de Ostlery es su umbral; el de Tovra, el disco de su moneda. Dibuja el tuyo como un trazado en archWipe (mantén su argumento keep: el film también recorta fuera de él). La primera palabra viaja sobre ambos campos.
• Las formas de esquina (corners): dos piezas de la marca se asoman desde los bordes del fotograma en el campo de la línea (Ostlery: su arco exterior arriba a la derecha, relleno; un contorno de umbral abajo a la izquierda), deslizándose con un ease-out; lo suficientemente grandes para leerse como la forma, nunca cruzando la línea o la entrada, y nunca cortadas por el fotograma en una muesca extraviada.
• El campo de la línea (LINE): ink, sus palabras en el color del fondo (la referencia). Si la entrada o botón del producto es oscuro, desaparecería sobre ink: configura LINE = { field: C.paper, text: C.ink } (la primera palabra entonces toma el color de la línea dentro del barrido).
• La entrada (INPUT, SEND, BUTTON, COMP, ICON_UP): un componente real del producto, redibujado de su CSS a escala del film, nunca dos de sus piezas unidas en una que no tenga. En orden de preferencia:
  1. Un campo con su propio botón de enviar dentro (INPUT.kind = 'field', la referencia): su relleno, su redondeo (INPUT.round, su radio de esquina como fracción de su altura; 0.5 completamente redondeado), el color de su enviar, la forma (SEND.round) y el icono, su cara y peso de texto. Un disco blanco brota, se estira hacia el campo, el enviar viaja al final, line2 se escribe a 0.045 s por letra con un caret constante.
  2. Su botón de acción principal (INPUT.kind = 'button'), cuando no tiene tal campo: un disco del color del botón brota y se estira hacia el botón (su propio radio, INPUT.round), y su icono y etiqueta (line2, la etiqueta real del botón) se colocan en un solo movimiento; sin escritura. BUTTON contiene sus tamaños: mantén la proporción propia de la app.