/brag-slim
Lo construiste. Ahora presume. Tú mismo haces el vídeo completo — historia, visuales, audio, renderizado — con las herramientas que ya están en la máquina.
Sea cual sea el tono, debe sentirse como un vídeo de lanzamiento moderno, elegante y pulido: nada en pantalla o en la banda sonora que no se haya ganado su lugar.
Uso: /brag-slim [entrada] [opciones]. Opciones (flags o en lenguaje natural):
| Opción | Por defecto |
|---|---|
--tone <predefinido o libre> | inferido; default si nada encaja claramente |
| `--format landscape | vertical |
--duration <s> | unos 20s |
Escribe los entregables en brag-output/ del directorio actual (con marca de tiempo brag-output-YYYY-MM-DD-HHmmss/ si ya existe). Guarda todos los archivos intermedios (fotogramas, descargas, scripts, stems) en una subcarpeta work/ dentro de ella.
1. Inspeccionar
Primero decide qué es la entrada, luego recopila material de ella. Solo cambia la fuente; todo lo que sigue desde las preguntas de abajo en adelante es igual para cada entrada.
| Entrada | Cómo reconocerla | De dónde viene el material |
|---|---|---|
| Proyecto | No se da entrada, y el directorio actual es un proyecto | El código |
| Sitio web | Una URL http(s)://, o un dominio simple como example.com | El sitio en vivo |
Si la entrada no coincide con ningún tipo, o no hay entrada y el directorio actual no es un proyecto, pregunta al usuario de qué quiere presumir.
Proyecto
Lee el código: la página principal, los estilos (colores y fuentes exactos), el README, las rutas y los componentes clave. El mejor material es el producto en uso — encuentra sus 2–3 momentos clave: entrada → acción clave → resultado.
Tienes el código fuente, así que úsalo directamente: importa o renderiza los componentes reales del proyecto, las hojas de estilo, las fuentes, las imágenes y las animaciones en el vídeo en lugar de reconstruirlos.
Sitio web
Obtén el sitio tal como lo ve un visitante. Muchos sitios construyen su página con JavaScript, por lo que una descarga simple puede devolver un cascarón casi vacío. Si es así, carga la página en un navegador sin interfaz gráfica para obtener el resultado renderizado. Descarta los banners de cookies y otras superposiciones, y desplázate sección por sección, ya que el contenido que aparece con animación al hacer scroll se queda en blanco en una captura de página completa única.
- Texto: titular, eslogan, encabezados de sección, nombres de funciones, llamadas a la acción, testimonios. También revisa el título, la meta descripción y las etiquetas de vista previa social.
- Identidad: colores exactos del CSS del sitio y las fuentes que carga.
- Visuales: el logotipo, capturas de pantalla del producto, imágenes principales, vídeos de demostración. Descarga los que vayas a usar en
work/. - Capturas de pantalla: captura la página en la relación de aspecto del vídeo para entender el diseño. En el vídeo, reutiliza el marcado real del sitio, su CSS y sus activos y anhímalos, en lugar de desplazarte sobre capturas planas.
- El producto en uso: revisa los vídeos de demostración, las secciones de cómo funciona y los documentos vinculados para el flujo entrada → acción clave → resultado.
Luego, para cada entrada
Antes de planificar, responde: ¿Qué es (una frase)? ¿Para quién es, y qué hace por ellos? ¿Qué lo diferencia? ¿Cuál es la afirmación más impresionante o divertida? ¿Cuál es el gancho visual? ¿Qué interfaz o flujo real debería mostrarse? ¿Qué tono encaja? ¿Cuál es el texto de una línea para compartir?
2. Planificar
Escribe brag-plan.md: el ángulo, el gancho, 2–3 puntos destacados, el remate, el tono, la identidad visual, y un storyboard escena por escena con duraciones que sumen el objetivo.
Si el usuario señala una parte — una nueva versión, una nueva función, un ángulo — conviértela en el centro del vídeo.
Forma: Gancho (2–3s) → Revelación (2–4s) → 2–3 puntos destacados nítidos → Remate/outro (2–4s). Una forma inicial, no una plantilla.
Leyes creativas
- Corto. 15–25 segundos; 18–22 es el punto ideal.
- Claro para un desconocido. Después de verlo una vez, alguien que nunca ha oído hablar de él sabe qué hace, para quién es y cómo obtenerlo. Empieza con eso, no con cómo está construido.
- El gancho lo es todo. Los primeros 2 segundos deciden si alguien sigue viendo. Planifícalo primero.
- Muestra la cosa. Reutiliza lo real de la fuente — su interfaz de usuario, componentes, texto, imágenes, vídeos y animaciones — en lugar de recrearlo. Reconstruye solo lo que no puedas reutilizar. Prefiere la aplicación funcionando haciendo su trabajo sobre una página de destino describiéndola. El texto pequeño ilustrativo de la interfaz de usuario está bien al mostrar el producto en uso (un nombre de archivo, un mensaje toast "Exportado"); las afirmaciones, números o testimonios inventados no lo están. Nunca relleno abstracto.
- Específico. Debe sentirse hecho para este proyecto exacto. Usa su propio texto y afirmaciones; no hay lenguaje genérico de SaaS ("optimiza tu flujo de trabajo" está prohibido).
- Legible. El ritmo viene del movimiento y los cortes, no de retirar el texto antes de tiempo. Cualquier línea que el espectador deba leer permanece completamente visible y estable el tiempo suficiente para leerla (aproximadamente 0.3s por palabra), contado desde que toda la línea está en pantalla. El texto que es solo textura no necesita leerse.
- Hazlo vivo. Las cosas que aparecen una por una, los clics simulados, los deslizamientos y la escritura superan a las diapositivas estáticas.
- El humor se gana su lugar. El humor viene del absurdo del propio proyecto, no de intentarlo.
- Cada fotograma publicable. Cualquier fotograma congelado debería valer la pena compartirlo.
Tonos
Los predefinidos son valores por defecto; las indicaciones libres ("lanzamiento falso de Serie A de 2016") los refinan o anulan.
| Tono | Sensación | Ritmo / transiciones |
|---|---|---|
default | Contundente, juguetón, limpio | 4–5 escenas; transiciones suaves |
polished | Serio, elegante, contenido | 3–4 escenas, pausas largas; fundidos suaves |
yc-parody | Lanzamiento startup inexpresivo, interpretado recto | 4–5 escenas, una afirmación cada una; cortes duros |
chaotic | RÁPIDO, FUERTE, TODO EN MAYÚSCULAS | 6–8 escenas, algunas de menos de 2s; cortes flash/zoom |
deadpan | Calmado, seco, nada es una broma | 3–4 escenas, mucho espacio vacío; fundidos lentos |
cinematic | A escala de tráiler, afirmaciones épicas | 4–5 escenas, tipografía grande; barridos dramáticos |
app-store | Tarjetas de funciones limpias | 4–6 escenas; deslizamientos suaves |
Sonido
Escribe la música y los efectos de sonido como una sola pieza: efectos en la misma tonalidad y el mismo espacio que la música, mezclados en lugar de superpuestos. Dale una mezcla básica y adecuada, como se mezcla una pista real: los efectos se colocan suavemente bajo la música, nada áspero o estridente, y los sonidos pequeños repetidos permanecen en el fondo.
3. Construir, comprobar, renderizar
Constrúyelo con lo que funcione en esta máquina. Si dibujas el vídeo en un navegador, haz que cada fotograma sea una función pura del tiempo y espera a que las fuentes y las imágenes se carguen antes de capturar cada uno.
Antes del renderizado completo, mira fotogramas fijos de cada escena y de la transición, y corrige desbordamientos, colisiones y bajo contraste. Un fundido cruzado simple entre dos diseños ocupados produce una doble exposición turbia; escalónalo (contenido antiguo fuera, luego contenido nuevo dentro) o sumérgelo a través del fondo. Luego renderiza brag.mp4.
4. Entregar
- Póster: extrae el fotograma estable más potente (texto completamente visible, no en medio de una transición) a
brag.jpg, e incrústalo como fotograma 0 debrag.mp4para que la miniatura de cada plataforma lo muestre. Reemplaza el fotograma 0 en lugar de añadir un fotograma, para que la duración y la sincronización de audio sigan siendo las mismas. share-copy.txt: 1–3 frases, publicable tal cual, específico, que coincida con el tono. Nada de "emocionado de compartir".- Informa al usuario de dónde están el vídeo y el texto, da una frase sobre el ángulo creativo, y ofrécete a repetir una escena o probar otro tono.