remotion-product-demos

Videos de Demostración de Producto con Remotion

Crea videos de demostración de producto de calidad profesional al estilo de las presentaciones de Apple usando Remotion.

Inicio Rápido

Proyecto: ~/Projects/tails-video/ Plantilla: src/templates/GlassPhoneDemo.tsx

cd ~/Projects/tails-video
npx remotion render src/index.ts GlassPhoneDemo out/demo.mp4 \
  --codec=h264 --crf=18

Contenido personalizado mediante --props:

npx remotion render src/index.ts GlassPhoneDemo out/custom.mp4 \
  --props='{"scenes":[{"type":"hero","durationInSeconds":3}],"brand":{"name":"TuMarca"}}'

Plantilla: GlassPhoneDemo

Esquema (Zod)

{
  scenes: Array<{
    type: 'hero' | 'voice' | 'typing' | 'cards' | 'detail' | 'dropdown' | 'endCard',
    title?: string,
    subtitle?: string,
    text?: string,           // escenas de escritura
    cards?: Array<{ name, category, detail?, emoji? }>,  // escena de tarjetas
    items?: Array<{ name, price? }>,                      // escena de detalle
    options?: Array<{ label, sublabel?, icon? }>,          // escena de menú desplegable
    durationInSeconds: number  // predeterminado 3
  }>,
  accentColor: string,       // predeterminado '#3B82F6'
  bgStyle: 'light' | 'warm' | 'cool',
  deviceAngle: number,       // predeterminado 8 (grados de rotación Y)
  brand?: { name: string, tagline?: string }
}

Tipos de Escena

Tipo	Visual	Props Clave
hero	Teléfono con "Toca para escribir" + botones de acción	—
voice	Icono de micrófono + anillos de onda continuos	—
typing	Texto carácter por carácter con cursor	text
cards	Lista escalonada de tarjetas (estilo restaurante)	cards[], title
detail	Filtros en píldoras + cuadrícula de artículos con precios	items[], title, subtitle
dropdown	Selector de opciones vidrioso	options[], text
endCard	El teléfono se desvanece, la marca aparece centrada	— (usa brand de nivel superior)

Flujo de Escenas Recomendado

Una demostración típica sigue: hero → voice → typing → results → detail → typing → dropdown → endCard

Guía de duración: hero 3s, voice 2s, typing 3s por comando, cards/detail 4s, dropdown 3s, endCard 2s.

Reglas de Estilo Visual

Lee references/apple-aesthetic.md para la guía de estilo completa.

Reglas clave:

• Fondo: Esferas 3D suaves con degradados radiales, reflejos especulares y sombras proyectadas
• Teléfono: Estilo iPhone con degradado de bisel metálico, Dynamic Island, botones laterales, indicador de inicio, superposición de reflejo de vidrio, sombra de apoyo
• Colores: Blancos/grises monocromáticos + un único color de acento configurable
• Movimiento: Todo mediante useCurrentFrame() + spring({damping: 200}). Sin animaciones CSS.

Patrones de Animación

Lee references/animation-patterns.md para configuraciones de resorte, fórmulas de temporización y patrones de easing.

Patrones clave:

• Entrada: spring({ frame: sceneFrame, fps, config: { damping: 200 } }) → opacidad + translateY
• Escalonamiento: retrasar cada elemento en i * 6 fotogramas
• Flotación: Math.sin(globalFrame / 45) * 12 para un desplazamiento suave
• Escritura: Math.floor((sceneFrame - delay) * 0.55) caracteres revelados
• Onda: Continua mediante módulo: (frame + ring * offset) % cycleDuration
• Fundido cruzado: Superponer escenas con -transitionFrames a 0 de aparición, dur - transitionFrames a dur de desaparición

Lista de Mejoras

Estado actual: bueno, no perfecto. Brechas conocidas:

1. Esferas de fondo Three.js — Las esferas con degradado radial CSS llegan a ~7/10. Un @remotion/three real con iluminación adecuada = 9/10
2. Imágenes reales — Bloques de marcador de posición de color → fotos de alimentos de Unsplash/Pexels mediante el componente <Img>
3. Velocidad de escritura variable — más rápida en palabras comunes, pausas sutiles en espacios
4. Resplandor de pantalla — luz ambiental sutil que se derrama desde los bordes de la pantalla del teléfono
5. Patrón de constantes primero — extraer todos los números mágicos a constantes con nombre al inicio del archivo (recomendación oficial de Remotion)

Creación de Nuevas Plantillas

Al construir una nueva plantilla de demostración de producto:

1. Analizar el video de referencia fotograma por fotograma (extraer a intervalos de 1s)
2. Identificar componentes visuales: fondo, dispositivo, contenido, transiciones
3. Definir el esquema Zod con tipos de escena y props configurables
4. Construir componentes de abajo arriba: fondo → marco del dispositivo → escenas → transiciones
5. Probar en cada paso — renderizar fotogramas individuales antes del video completo
6. QA con modelo de visión — extraer fotogramas, calificar calidad, iterar

Sigue las reglas de Remotion estrictamente: lee los archivos de reglas de skills/remotion-best-practices/.