Estilo anuncio
La regla única: la parte de arriba (o la franja del pecho) MUESTRA el mecanismo de lo que ella dice; nunca vuelve a escribir la frase — la leyenda ya lo dice. Cada idea hablada se convierte en un esquema que cambia en la palabra.
Antes de empezar lee ../perfil-creadora.md y carga (o crea) el perfil.json de la raíz. Pregunta también,
en un solo mensaje, lo que falte: nombre del producto/oferta, el llamado final (CTA: "comenta X" o "clic en el link") y
las imágenes reales que ella quiere mostrar (portada del producto, capturas de resultado con los números, cuadros de videos de ella).
Guarda las imágenes en assets/img/ del proyecto. Nunca inventes logo, portada, número, precio o resultado.
src/index.template.html (copiado de template/index.template.html) es un catálogo de 15 esquemas listos, con
tiempos de ejemplo. Mantén el CSS y los helpers; reescribe el titular y elige/retemporiza los esquemas para el discurso de ella;
borra los bloques que no uses. El modelo antiguo, solo con texto, está en src/classico.template.html (úsalo solo si
ella pide ese visual: cópialo sobre index.template.html).
Estructura: titular y luego esquemas (obligatorio)
- 0 → ~5 s: solo el titular. Un título grande (línea blanca + línea en el color de acento, ~90–125 px, subrayado opcional barriendo la palabra clave). Sin esquema, sin pantalla de app, sin imagen.
- Después del titular: un esquema por idea hablada, cambiando en la palabra. Texto dentro del esquema solo en etiquetas cortas (1–3 palabras: "antes", "con IA", "tu negocio").
- Cuando el producto vende un proceso, muestra la complejidad del método antiguo al lado de la simplicidad del nuevo (línea de tiempo llena + reloj + ✕ × un pedido + ✓).
Esquemas del catálogo (reusa y retemporiza):
| Idea hablada | Esquema | Bloque |
|---|---|---|
| "hice X → pasé por Y → se convirtió en Z" | tarjeta de celular (cuadro real) → flecha punteada + punto avanzando → nodo redondo → flecha → tarjeta resultado | B2 |
| elimina errores / pausas | onda de audio: partes-problema se vuelven azul/rojo con etiqueta y desaparecen; reloj disminuye | B3 |
| sucede solo | celular donde los elementos aparecen solos + contador "0 clics" | B4 |
| método antiguo × método nuevo | dos paneles: línea de tiempo llena + reloj + ✕ × un pedido + ✓ | B5 |
| objeciones ("sin tiempo", "no sé") | No ✕ / Sí ✓: tarjetas de problema llevan ✕ → flecha → tarjeta solución con ✓ | B6 |
| duda → prueba | globo con la duda → tarjeta de prueba con ✓ | B7 |
| "necesita explicar bien" | pedido genérico → resultado gris ✕ × instrucción detallada siendo tecleada ✓ | B8 |
| lista de lo que entrega | casillas punteadas que se llenan con imágenes reales o íconos, una por ítem mencionado | B9 |
| curso / producto | portada real + chips volando hacia adentro + gráfico subiendo | B10 |
| prueba social | capturas reales con contador de vistas subiendo (recorta el contador de la propia captura) | B11 |
| copiar un estilo | referencia → nodo → el cuadro de ella recibiendo el mismo estilo + "= mismo estilo" | B12 |
| oferta / lanzamiento | etiqueta + sello → post con barra de envío → "✓ publicado" | B13 |
| tres pasos ("graba, edita, publica") | tres nodos encendiéndose uno en cada palabra | B14 |
| CTA de comentario | caja de comentario tecleando la palabra ("YO QUIERO") + tarjeta de direct | B15 |
| CTA de link | barra blanca "Saber más ›" pulsando | B16 |
Antes de renderizar, lee cada bloque y pregúntate: "¿la zona MUESTRA la idea, o solo repite la leyenda?"
Números: los contadores de B3, B5 y B11 vienen con marcadores (__B3_SEG_ANTES__, __B5_SEG_NUEVO__, __VIEWS_CAPTURA_1__…).
El montar.mjs se detiene con error mientras quede alguno. Cámbialo por el número REAL (dicho por ella o leído de la captura) o borra el contador.
Imágenes: bruto.jpg sale solo del video (nuevo-anuncio.mjs). Todo lo demás (portada, capturas, cuadros de otros
videos, referencia) solo si la alumna lo envía. Falta imagen → borra o rediseña el esquema (ícono dibujado en SVG,
tarjeta de texto); nunca dejes espacio de ejemplo. Nombre/@ y avatar vienen del perfil.json (montar.mjs reemplaza
__USUARIO__, __NOMBRE__ y pone el avatar; sin foto, un círculo con la inicial).
Zonas seguras (anuncio de Meta en Reels — obligatorio)
Deja libres 14 % arriba, 35 % abajo y 6 % a cada lado. En 1080×1920 la caja segura es
x 65–1015, y 270–1248: toda palabra, número, sello, CTA, leyenda y etiqueta de esquema queda dentro de ella (inclusive
en el pico de escala/rotación de las animaciones). Solo decoración (franja oscura, sombra de panel) puede salirse. Verifica con
$K --em video-proyectos/<slug> node ../../$E/scripts/zonas-seguras.mjs renders/<archivo>.mp4 assets/seguras.jpg t1 t2 … (caja roja en cada cuadro).
Zona de los esquemas (reel.json en la raíz del proyecto)
Los bloques se dibujan en un área de 1080×340 y el montar.mjs posiciona y escala esa área:
| Encuadre | reel.json |
|---|---|
| cabeza más baja, sobra espacio arriba (tope de la cabeza debajo de y ≈ 450) | {"franja":"superior","zonaTop":280,"zonaAltura":<tope de la cabeza − 290>,"capTop":<mentón + 20, máx. 1165>} |
| cabeza alta en el cuadro (selfie de cerca, coche) | {"franja":"pecho","zonaTop":<mentón + 20>,"zonaAltura":<≈ 1150 − zonaTop>,"capTop":<zonaTop + zonaAltura + 10, máx. 1165>} |
En modo pecho una franja oscura cubre desde el mentón hasta el final del área segura, y los esquemas + leyenda van sobre ella.
La leyenda (80 px de altura) debe terminar hasta y 1248.
Visual
| Elemento | Regla |
|---|---|
| Franja oscura | superior: degradé rgba(0,0,0,.66) → transparente bajando desde arriba. pecho: franja oscura desde el mentón hasta ~y 1300. |
| Kit de esquemas | paneles rgba(16,16,19,.92) radio 22 con borde claro de 1 px; tarjetas de celular 160×284 (9:16) con cuadros reales; nodo redondo de IA en color color_ia; flechas punteadas con punto en el color de acento avanzando; sellos redondos ✕ rojo #ff453a y ✓ verde #30d158 que estallan en la palabra; textos de interfaz en Inter. Decoración repetida (barras de onda, clips de la línea de tiempo) usa el rnd() con semilla del template — nunca Math.random ni from:"random" de GSAP. |
| Tipografía | fuente de título (Archivo Black o fuente_titulo del perfil) en el titular, etiquetas y leyenda. Blanco; acento en color color_acento (por defecto amarillo #FFD21F). |
| Movimiento | entradas cortas: sube + aparece en 0,45–0,6 s (power3.out / expo.out); sellos con back.out; contadores corriendo; barras llenándose; flechas creciendo. Salidas en 0,28 s. Los esquemas cambian en la palabra hablada. |
| Leyenda | una palabra por vez, 46 px, blanca con sombra suave (nunca contorno), justo debajo del mentón (capTop en reel.json). |
| CTA | caja de comentario tecleando la palabra + tarjeta de direct, o barra blanca "Saber más ›". |
Colores, tamaños y prohibiciones: template/DESIGN.md (copiado para cada proyecto).
Reglas de corte
- Elimina toda pausa (−30 dB / 0,15 s) y toda repetición; ≤ 90 s si es posible. Frase dicha dos veces: quédate con la ÚLTIMA (la corregida). Repetición de énfasis ("vale, vale") no es error.
- Anuncio corta sin J/L (
cortar.mjs --no-jl): la imagen acompaña al habla exactamente. - Después de cortar, retranscribe el
clean.mp4y léelo buscando frase duplicada y palabra cortada. La transcripción entera ESCONDE repeticiones: barre también el video completo en ventanas cortas, en una sola llamada,$K --em video-proyectos/<slug> node ../../$M/transcribir.mjs assets/clean.mp4 --ventanas 1,3,5,7,…(cada 2 s hasta el final), y compara.
Reglas de velocidad (la PC de la alumna puede ser lenta — aplican por encima de los pasos siguientes)
- La transcripción de
nuevo-anuncio.mjsya es--rapido(solo para elegir el corte). La retranscripción delclean.mp4(la de la leyenda) usa el modelo preciso — una vez por versión del corte. - Revisa empalmes y repeticiones en UNA llamada con
--ventanas. Nunca una ventana por vez. - No renderices borrador entero solo para mirar cuadros. Usa
$K --em video-proyectos/<slug> hyperframes snapshot --at t1,t2,… -o snapshots(un tiempo por esquema) y mira los PNGs. Renderiza UNA vez, cuando los snapshots estén correctos. - El codificador del raw.mp4 / clean.mp4 se elige solo. No lo cambies.
- Antes de cada etapa lenta, avisa en una línea corta en español qué está corriendo ("Renderizando el anuncio — puede llevar unos minutos."), para que la espera nunca parezca un congelamiento.
Flujo (todo comando mediante el lanzador $K)
E=.claude/skills/estilo-anuncio · M=.claude/skills/_motor · K = el lanzador de la skill videos-opus: "<VO>\bin\node.exe" "<VO>\scripts\video.mjs" kit, donde <VO> es la carpeta de la skill videos-opus (la que tiene el SKILL.md que te envió a leer esta guía). Él pone los programas portátiles en el camino y corre en la carpeta de trabajo del kit ($K carpeta muestra cuál es; los proyectos quedan en <carpeta>\video-proyectos\<slug>). $K --em <subcarpeta> … corre dentro de ella. Nada de npx, Python o node suelto: todo pasa por $K.
- Proyecto + transcripción rápida:
$K node $E/scripts/nuevo-anuncio.mjs "<video>" <slug>→video-proyectos/<slug>/con raw.mp4, raw.json,assets/palabras.txt, los dos modelos,assets/img/bruto.jpgyreel.json. - Encuadre: hoja de contacto con cuadrícula
(
$K --em video-proyectos/<slug> ffmpeg -i assets/raw.mp4 -vf "fps=1/5,drawbox=x=65:y=270:w=950:h=979:color=red:t=6,drawgrid=w=1080:h=100:[email protected]:t=2,scale=270:-1,tile=7x2" -frames:v 1 assets/contacto.png) y MIRA: líneas amarillas cada 100 px, caja roja = área segura. Encuentra el tope de la cabeza y el mentón y escribereel.json(tabla "Zona de los esquemas"). - Corte: lee
assets/palabras.txt, escribeassets/keeps.json; dentro deassets/:$K --em video-proyectos/<slug>/assets node ../../../$M/cortar.mjs --no-jl. - Revisión: en la raíz del proyecto:
$K --em video-proyectos/<slug> node ../../$M/transcribir.mjs assets/clean.mp4 assets/transcripcion.json --nombres "<términos del perfil>"; lee; haz el barrido--ventanas; ajusta el corte hasta que quede limpio; palabra oída mal →assets/caption-fixes.json. - Composición: reescribe
src/index.template.html: titular en 0–5 s, luego un esquema por idea hablada; tiempos de$K --em video-proyectos/<slug> node ../../$M/anclas.mjs "frase" …(raíz del proyecto); imágenes reales enassets/img/. - Montaje + verificación:
$K --em video-proyectos/<slug> node ../../$E/scripts/montar.mjs(se detiene con error si quedó marcador o falta imagen) →$K --em video-proyectos/<slug> hyperframes lint(0 errores) →$K --em video-proyectos/<slug> hyperframes snapshot --at …en CADA esquema y MIRA (rostro nunca cubierto, etiquetas legibles, números correctos, nada de ejemplo sobrante) →zonas-seguras.mjssobre los snapshots/tempos → render y entrega (por el lanzador, en la carpeta de trabajo del kit):$K node $M/renderizar.mjs <slug>— revisa los bloqueos, renderiza en segundo plano, valida y ya copia alistos/. Salida 3 = aún renderizando: corre$K node $M/renderizar.mjs <slug> --esperarhasta que salga LISTO. Nunca corras$K --em video-proyectos/<slug> hyperframes renderdirectamente nilistos.mjsa mano. Despuészonas-seguras.mjs renders/<slug>-final.mp4 …en los tiempos de los esquemas. - Entrega: responde en español, breve: dónde está, qué se cortó, imágenes usadas, qué quedó en duda, y que el video respeta el área segura de Meta. Nunca publiques ni subas el anuncio.
Variaciones de anuncio (cuando la alumna pide "más de una versión")
Mismo corte, otro titular y/u otro CTA: copia el proyecto (video-proyectos/<slug>-v2), cambia solo el bloque B1 y el
CTA, monta, snapshot del titular y render. No rehagas corte ni transcripción.
Ajustes después de la entrega
"quita la parte del precio" → keeps.json, pasos 3–4, recalcula los tiempos de los esquemas después del tramo con anclas.mjs y paso 6. "cambia el titular"
→ B1 y paso 6. "leyenda más arriba"
→ capTop en reel.json y paso 6. Nunca rehagas desde cero lo que ella no pidió cambiar.