maddexritter-rgb/vibe-editing-promo

/promo — Generador de vídeos promocionales (Remotion + Claude Code)

Crea dos tipos de vídeos promocionales premium. Impulsado por Remotion (vídeo basado en React) + Claude Code + la habilidad remotion-best-practices.

🎬 ELIGE EL MODO PRIMERO (pregunta al usuario si no es obvio)

• MODO A — EXPLICATIVO / DEMO ANIMADO. Completamente animado, sin metraje real de larga duración como eje principal. Demos de presentaciones, lanzamientos de funciones, el vídeo del volante de contenido (content flywheel), promos SaaS, explicativos con marca. → se construye desde templates/glass/ (liquid-glass premium) o templates/saas/. Consulta la sección glass a continuación. Ejemplo práctico: ~/Downloads/engine/2026-06-12_WorkflowDemo (la composición FlywheelFilm).
• MODO B — PELÍCULA DE ARCHIVO / HISTORIA DE ORIGEN. El usuario te entrega un montaje largo (su propia edición — metraje real, capítulos separados por fotogramas negros) y quiere convertirlo en una película con marca: tarjetas de capítulo entre secciones, música adaptada a cada escena, transiciones flash y un desenlace con curva de crecimiento. → tarjetas de era + assemble.py. Consulta la sección MODO B a continuación. Ejemplo práctico: ~/Downloads/engine/2026-06-14_BrandHistory (una película de origen "4.5 años en ~5 minutos").

Ambos modos comparten el mismo kit de glass con tokens de marca (sting, GlassBG, tarjetas de era, curva de crecimiento, constants.ts de marca), por lo que parecen una misma familia. Cambia la marca en constants.ts + los logotipos en public/ — nunca codifiques un nombre de marca directamente en un componente.

Cuándo usar esto (frente a otras habilidades de vídeo)

• ✅ Usa esto: vídeos promocionales independientes, demos SaaS, avances de cursos, vídeos de lanzamiento de funciones, explicativos animados desde una URL.
• ❌ No uses esto: clips de personas hablando, reencuadre con seguimiento facial, edición de palabras de relleno, subtitulado de vídeos existentes (usa shortform / caption-clips en su lugar).

Plantillas de animación SaaS listas para usar

Tres componentes de Remotion listos para producción para el "estilo de animación SaaS" (el estilo de $1-2k por vídeo que domina el Instagram/TikTok tecnológico en 2026). Incorpóralos en cualquier proyecto de Remotion:

• templates/saas/SaasTextPopup.tsx — Intro de 4s con marca, texto emergente + revelación de logotipo.
• templates/saas/SaasGlassReveal.tsx — Tarjetas de características de interfaz de cristal de 6s con desenfoque de fondo (backdrop-blur).
• templates/saas/SaasDashboardTour.tsx — Recorrido de panel 3D de 8s con cursor animado.

Referencia técnica completa en editing-styles/saas-animation-style.md. Orquestador encadenado en saas-animation-video — actívalo con "make a saas animation video".

Consulta templates/saas/README.md para la conexión y personalización de la marca.

---

🟣 VÍDEOS DEMO / EXPLICATIVOS LIQUID-GLASS PREMIUM — templates/glass/

El sistema detrás del vídeo de presentación de alta gama, nativo de la marca y de efecto "¡ostras!" (el tipo que se inserta en una presentación de diapositivas como demo en vivo). Úsalo — no las plantillas SaaS — cuando el briefing sea un vídeo explicativo/demo pulido, basado en una presentación o concepto, con metraje real, interfaz de producto real y texto en pantalla en negrita en lugar de una voz en off. Ejemplo práctico: ~/Downloads/engine/2026-06-12_WorkflowDemo (la composición FlywheelFilm — una demo del volante de contenido). 1920×1080 a 30fps, tercios inferiores en negrita, sin VO.

INDEPENDIENTE DE LA MARCA. El kit utiliza tokens de marca. Configura la marca en src/constants.ts (COLORS + fuente) y coloca los PNG del logotipo de la marca en public/. El ejemplo usa Speaker / company.com (Sambucus #131628, Electric Indigo #6f00ff, Lavender #a08bec, Poppins) — intercambia esos tokens por cada marca; nunca codifiques un nombre de marca directamente en un componente.

¿Qué hay en el kit (templates/glass/src/)?

• constants.ts — tokens de marca (COLORS, FPS, WIDTH, HEIGHT, ajustes preestablecidos de spring). EL lugar único para cambiar la marca.
• components/GlassBG.tsx — fondo de degradado con orbes flotantes persistentes (la base de flujo continuo; se sitúa detrás de cada beat).
• components/GlassPanel.tsx — el panel de "cristal líquido" esmerilado (filtro de fondo con desenfoque + brillo + profundidad). Variante dark para la legibilidad del texto. backdrop-filter SÍ se renderiza en el Chrome sin interfaz gráfica de Remotion.
• components/GlassBeats.tsx — los beats primitivos: GlassTitle (tarjeta de gancho), GlassFrame/SceneDemo (interfaz de usuario en una ventana de cristal + narración), GlassOutro (tarjeta de desenlace + logotipo), PayoffCard.
• components/BrandSting.tsx — ~1.5s de sting del logotipo (rayas → flash → floritura de la marca → logotipo).
• components/CreateShots.tsx — NarratorChip (el pie de foto en negrita del tercio inferior = la capa de "texto en negrita, sin VO") + tomas del reproductor multimedia.
• components/Flywheel.tsx — beats característicos: ContentFlywheel (el ANILLO del bucle de acumulación), FlywheelEscalation (desenlace de la pila de tarjetas), AutoPostScheduler (terminal en vivo + grabación de pantalla real, uno al lado del otro), RawSessionPlayer, HeroClipPlayer (clip en un marco de teléfono), Tier1Prompt/Tier1Pipeline (comando + pasos).
• components/ChannelScroll.tsx — un feed de canal real desplazándose (miniaturas + duraciones). RealClipShowcase.tsx — una cuadrícula de clips verticales reales reproduciéndose. GlassBrowser.tsx — interfaz de aplicación en un marco de navegador. ScaleWall/Odometer/Stopwatch — drama de volumen y números. FXOverlay — granulado/viñeta.
• audio/index.tsx — AudioBed (música, baja) + Sfx (whoosh/braam/riser/tick…) con un mapa de ganancia MASTER.
• compositions/FlywheelFilm.tsx — el ejemplo práctico: sting → gancho → prueba en bruto → comando → pipeline → (intermedios: canal + terminal/publicación automática/grabación) → (cortos: héroe + cuadrícula) → anillo del volante → escalada → outro.

El manual de producción (el orden que funciona)

1. LEE el material fuente PRIMERO (la presentación / el briefing). Extrae el concepto Y el lenguaje propio de la marca — toma líneas textuales para los beats para que el vídeo se sienta nativo de su discurso. (No inventes un texto genérico).
2. Configura los tokens de marca en constants.ts; coloca los logotipos en public/ (consulta el problema común #5 sobre los PNG de logotipos).
3. Haz un storyboard de los beats con TransitionSeries (sting → gancho → beats de demo → bucle de desenlace → escalada → outro). Mantenlo ajustado (~38–45s) — beats rápidos, tercios inferiores en negrita. ("Demasiado lento" es la observación número 1).
4. Conecta los activos reales (consulta los patrones a continuación) — metraje real/interfaz de usuario real > maquetas, siempre.
5. Renderiza: npx remotion render <CompId> out/<name>.mp4 --codec=h264 --crf=16 (añade "use Remotion best practices" al solicitar ediciones).
6. CONTROL DE CALIDAD EXTRAYENDO FOTOGRAMAS — nunca confíes a ciegas (problema común #1).
7. Entrega en el 20_DELIVER/ del proyecto (con el nombre de la marca). Solo local a menos que se indique lo contrario.

Patrones de activos reales

• Metraje → <OffthreadVideo muted startFrom={..} playbackRate={..} /> dentro de un marco de cristal/reproductor/teléfono/navegador. Crea proxies (720×1280 / 1080) para que el estudio y el renderizado sigan siendo rápidos.
• Grabaciones de pantalla → recorta SOLO la interfaz de la aplicación (elimina la pestaña del navegador/la barra de direcciones/el banner): ffmpeg -ss A -t B -i rec.mov -vf "crop=W:H:0:Y,scale=1600:-2" -an out.mp4. Acelera (playbackRate 2–3.5×) para que se vea que progresa a través de los pasos, no que se detiene.
• Terminal + grabación uno al lado del otro (el beat estrella): un terminal con estilo cuyo registro refleje la salida estándar del SCRIPT real (lee la habilidad/script real para obtener líneas auténticas) junto a la grabación de pantalla real — que ambos lean los mismos nombres lo vende como un solo sistema. Consulta AutoPostScheduler.
• Datos/miniaturas reales → obtén en vivo: yt-dlp "https://youtube.com/@CHANNEL/videos" --flat-playlist --print "%(id)s|%(duration_string)s|%(title)s", luego las miniaturas de https://i.ytimg.com/vi/<id>/maxresdefault.jpg (fallback mqdefault.jpg). Para datos de clips de Speaker, el MCP your analytics.

🛑 LOS PROBLEMAS COMUNES — cada uno es una solución real de la construcción de esto; léelos antes de renderizar

1. Control de calidad por fotogramas, nunca a ciegas. Después de cada renderizado, ffmpeg -ss <t> -i out.mp4 -frames:v 1 f.jpg en CADA beat y míralo realmente. Renderiza la primera mitad temprano con --frames=0-540 mientras los activos terminan.
2. Ensalada de texto en transiciones. Dos beats de texto que se funden se superponen formando un galimatías ilegible. SOLUCIÓN: desvanece el contenido de cada beat de texto hacia FUERA durante sus últimos ~14 fotogramas (un exit = interpolate(f,[dur-16,dur],[1,0]) multiplicado en la opacidad) para que desaparezca antes de que el siguiente se funda. (O corta directamente los beats de texto).
3. Filtración del sting/logotipo. Un sting (o cualquier beat) que termina en un logotipo brillante se FILTRA a través de la siguiente tarjeta de cristal translúcida durante la transición. SOLUCIÓN: desvanece el logotipo del sting al FINAL del mismo para que entregue el control en un fotograma oscuro y limpio.
4. Atenuación del texto por superposición (¡sutil!). Una superposición <AbsoluteFill> es un hermano posicionado, por lo que se pinta ENCIMA del texto estático y lo oscurece — el blanco brillante sobrevive, el texto de color lavanda/secundario se aplasta y se ve tenue. SOLUCIÓN: coloca la superposición en zIndex:0 y envuelve el texto en un contenedor position:relative; zIndex:1. (Entonces una superposición de alta opacidad elimina el pulso "brillo luego sin brillo" del orbe flotante sin oscurecer el texto).
5. Logotipos invisibles. Un PNG de logotipo cuadrado con relleno transparente renderiza la marca real diminuta/invisible. SOLUCIÓN: recorta el PNG a su contenido primero, luego ajústalo por el ANCHO (<Img style={{ width: 600, height: 'auto' }} />).
6. Recorte de audio. Los efectos de sonido sin mapear se reproducen a 1.0 → recorte a escala completa. SOLUCIÓN: una ganancia MAESTRA (~0.5) + un mapa de VOL completo por SFX + música ~0.2 bajo la voz; loudnorm I=-14:TP=-1.5 en el entregable final. Verifica que el volumedetect máximo sea ≤ ~−3 dB.
7. División de palabras en zsh. for x in $VAR NO se divide en zsh (una iteración con toda la cadena). Usa una lista literal o ${=VAR}. (Me atrapó al descargar miniaturas por lotes).
8. Mantén el último fotograma vivo (no en negro) — los outros terminan en la tarjeta del logotipo; verifica que la luminancia del último fotograma sea > ~10.
9. Fuentes a través de @remotion/google-fonts (Poppins, JetBrainsMono). Los números/palabras clave brillan con un textShadow constante (no confíes en el fondo para el brillo — consulta #4).

---

🧊 PARALAJE 3D + 2.5D + ☁️ ESCALA EN LA NUBE (potenciadores del MODO A)

Ejemplo práctico: ~/Downloads/_PROJECTS/2026-06-15_3DSaasDemo (una demo SaaS de muestra — héroe con paralaje, tarjetas de panel de cristal flotantes, gráfico de barras 3D + una variante WebGL real).

3D — dos caminos

• CSS 3D (predeterminado, sin dependencias, se renderiza en cualquier lugar). Envuelve una escena en perspective + transformStyle:'preserve-3d'; coloca capas en diferentes translateZ y anima la Z del mundo con useCurrentFrame() = un dolly de cámara donde las capas cercanas se mueven más que las lejanas (paralaje 2.5D real). Las tarjetas de cristal flotantes, los gráficos de barras extruidos (caras frontal/lateral/superior), los suelos de cuadrícula que se alejan, todo proviene de transformaciones CSS. Recurre a esto primero — es a prueba de balas en Chrome sin interfaz gráfica.
• WebGL real — @remotion/three + React Three Fiber. Mallas reales, iluminación, sombras, materiales. Úsalo solo cuando CSS-3D no pueda (geometría/iluminación/profundidad de campo reales). Instala @remotion/three + @react-three/fiber@^9 + three (R3F v9 es necesario para React 19; v8 es para React 18). Impulsa la animación con useCurrentFrame() de Remotion, NO con useFrame de R3F (Remotion renderiza fotograma a fotograma). Envuelve en `<ThreeCanvas