🛍️ Video de producto

Los videos de producto siguen una estructura clásica de marketing: atención → interés → deseo → acción. En Remotion esto se traduce directamente en escenas: el ken-burns capta la atención, el lower-third despierta el interés, la comparación crea deseo y el end-card invita a la acción.

O ken-burns es la técnica de hacer zoom + pan suave en una imagen estática, creando movimiento cinematográfico sin cámara. En Remotion, simplemente se animan scale y translate con interpolate dentro de un contenedor con overflow: hidden.

const frame = useCurrentFrame();
const { durationInFrames } = useVideoConfig();

// zoom: 1.0 → 1.08 ao longo da cena
const scale = interpolate(
  frame, [0, durationInFrames],
  [1.0, 1.08],
  { extrapolateRight: "clamp" }
);
// pan: desloca 20px da esquerda para direita
const x = interpolate(
  frame, [0, durationInFrames],
  [0, -20],
  { extrapolateRight: "clamp" }
);

return <div style={{ overflow:"hidden", width:"100%", height:"100%" }}>
  <img src={src} style={{
    width: "100%", height: "100%", objectFit: "cover",
    transform: `scale(${scale}) translateX(${x}px)`
  }} />
</div>;

O lower-third es un overlay que aparece sobre el ken-burns; no es una escena separada en el Series, sino un Sequence dentro de la misma escena hero. Se desliza desde abajo, muestra el nombre y el precio, y opcionalmente sale antes de que termine la escena.

La escena de comparación usa split-screen.tsx para mostrar dos imágenes lado a lado, o image-comparison-slider.tsx para revelar progresivamente el «después» sobre el «antes». Ambas usan clip-path animado para controlar la división.

La escena de números usa stat-counter.tsx para animar contadores de 0 hasta el valor real del producto: reseñas, ventas, estrellas. El número «contando» capta la atención y hace que el dato sea más memorable que un texto estático.

const frame = useCurrentFrame();

const progress = interpolate(
  frame, [0, 60], [0, 1],
  { easing: Easing.out(Easing.cubic), extrapolateRight: "clamp" }
);

const value = Math.round(progress * targetValue);

// Exemplo: targetValue = 12847 (vendas)
// frame 0 → "0", frame 30 → "6.424", frame 60 → "12.847"

return <div>
  <span>{value.toLocaleString("pt-BR")}</span>
  <span className="text-sm"> vendas</span>
</div>;

O end-card es la última escena: presenta el logo, la URL, el precio final o el código QR. Todo lo que estaba repartido en las escenas anteriores converge aquí en un mensaje claro: "dónde comprar". El ritmo general del video debe acelerarse ligeramente hacia el end-card.