Módulo 4.1 · Apertura de canal

🎯 El proyecto y su estructura de escenas

Una apertura de canal es un video de identidad: presenta la marca antes del contenido. En Remotion modelamos esto como una secuencia de escenas en Series — cada escena es un componente independiente con su propio timing; Series las apila sin aritmética manual de offsets.

🎬 Las 4 escenas de la apertura

1.Fondo — starfield o gradient-shift desde el frame 0 hasta el final, siempre en la capa inferior.
2.Logo — entra con spring en el centro, permanece durante ~2 s y luego retrocede ligeramente.
3.Título — el nombre del canal y el tagline aparecen en stagger justo después de que el logo se estabiliza.
4.Salida — iris o fade-through-black cierra la apertura antes del contenido principal.

Esqueleto del componente raíz ChannelOpening.tsx

import { Series, AbsoluteFill } from "remotion";
import { Starfield }       from "./templates/starfield";
import { LogoSpinReveal }  from "./templates/logo-spin-reveal";
import { CinematicTitle }  from "./templates/cinematic-title-intro";
import { IrisTransition }  from "./templates/iris-transition";

export const ChannelOpening = () => (
  <AbsoluteFill>
    <Starfield />          {/* sempre ativo — z=0 */}
    <Series>
      <Series.Sequence durationInFrames={60}>
        <LogoSpinReveal logo="./logo.svg" />
      </Series.Sequence>
      <Series.Sequence durationInFrames={75}>
        <CinematicTitle title="Meu Canal" tagline="Design em Movimento" />
      </Series.Sequence>
      <Series.Sequence durationInFrames={30}>
        <IrisTransition />
      </Series.Sequence>
    </Series>
  </AbsoluteFill>
);

Total

~165 fotogramas = 5,5 s

Fondo

Paralelo al Series

Series

Sin offset manual

Props

logo, title, tagline

✨ Escena de fondo — starfield y gradient-shift

El fondo no entra en Series: vive en un AbsoluteFill separado que existe durante todo el video. El starfield genera estrellas con random() sembrado y las desplaza levemente por frame, creando profundidad sin costo de cámara.

🌌 Cómo funciona el starfield

random("star-x-N") — genera la posición X determinista para la estrella N
random("star-y-N") — posición Y también con semilla: siempre igual por frame
translateY mediante interpolate — la estrella desciende 20px a lo largo de todo el video
opacity pulsante — Math.sin(frame * 0.05 + seed) crea un parpadeo suave

✓ Qué HACER

✓Usar random() de Remotion con seed: nunca Math.random().
✓Dejar el fondo en AbsoluteFill independiente de Series.
✓Mantén la opacity de las estrellas entre 0.3–0.9 para que no compitan con el logo.

✗ Qué NO hacer

✗Usar Math.random() — las estrellas "parpadean" entre frames en el render.
✗Poner el fondo dentro de Series — desaparecerá cuando termine la escena.
✗Usar un color de estrella igual al del logo: se pierde el contraste en el frame crítico.

random()

Con seed, determinístico

AbsoluteFill

z=0, siempre activo

Paralaje

translateY lento

Destello

Math.sin + seed

🔵 Escena del logo — spin-reveal y stroke-draw

El logo es la escena más impactante: aparece con un spring calibrado para lograr ese «pop» sin exagerar. Puedes usar logo-spin-reveal.tsx (gira y escala) o logo-stroke-draw.tsx (traza progresivamente el contorno SVG).

Logo con spring calibrado logo-spin-reveal.tsx

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

// spring: pop rápido, sem bounce excessivo
const progress = spring({ frame, fps,
  config: { damping: 14, stiffness: 180, mass: 1 }
});

const scale   = interpolate(progress, [0,1], [0.3,1]);
const rotate  = interpolate(progress, [0,1], [-180,0]);
const opacity = interpolate(progress, [0,0.3], [0,1],
  { extrapolateRight: "clamp" });

return <AbsoluteFill style={{ display:"flex", alignItems:"center", justifyContent:"center" }}>
  <img src={logo} style={{ transform: `scale(${scale}) rotate(${rotate}deg)`, opacity }} />
</AbsoluteFill>;

💡 Spring vs. interpolate para el logo

Usa spring para la escala y la rotación — el overshoot natural del spring le da personalidad. Usa interpolate con clamp para la opacidad — necesitas controlar exactamente cuándo aparece el logo. La combinación de ambos es lo que hace que la animación parezca viva.

damping 14

Ligero overshoot

stiffness 180

Animación rápida

-180° → 0°

Media vuelta de entrada

Timing

~0–30 frames

🔤 Escena de título — cinematic-title y title-split

El título aparece justo después de que el logo se estabiliza. cinematic-title-intro.tsx usa letter-spacing animado (expansión de las letras) mientras title-split.tsx divide el texto en dos mitades que convergen desde el centro. El stagger por letra/palabra es lo que hace que el título sea visualmente atractivo.

Frame 0–10: fade-in del contenedor

El fondo detrás del título (un cuadro oscuro semitransparente) hace opacity 0→1. Esto prepara el contraste antes de que aparezcan las letras.

Frame 5–35: stagger de las letras

Cada letra tiene un Sequence from={i * 2} — la letra 0 empieza en el frame 5, la letra 1 en el frame 7, y así sucesivamente. El efecto cascada es automático.

Frame 35–75: título estático

El título permanece completamente visible durante ~1,3 s — tiempo suficiente para que el espectador lea y asimile el nombre del canal.

Frame 75–90: salida suave

Opacidad de 1→0 en los últimos 15 frames de la escena. La transición de salida (iris) comienza mientras el título todavía está saliendo — se superponen con fluidez.

Stagger

from={i * 2}

Meseta

~1,3 s visible

Salida

15 fotogramas de fade-out

Overlap

Con transición de iris

🌀 Escena de salida — iris-transition y fade-through-black

La transición de salida es el elemento que hace que la apertura profesional. iris-transition.tsx usa un clip-path circular que se abre o se cierra — desde el centro o desde una esquina. fade-through-black.tsx es más simple: fundido a negro antes de llegar al contenido.

Iris mediante clip-path animado iris-transition.tsx

const frame = useCurrentFrame();
const { width, height } = useVideoConfig();

// raio máximo = diagonal da tela
const maxR = Math.sqrt(width**2 + height**2) / 2;
const radius = interpolate(frame, [0,30], [maxR, 0],
  { extrapolateRight: "clamp" });

return <AbsoluteFill style={{
  clipPath: `circle(${radius}px at center)`,
  background: "black"
}} />;

💡 Elige la transición según el tono del canal

Iris que se cierra = estilo clásico/cinematográfico. Fade-through-black = limpio y moderno. Para canales de tecnología, prefiere el fade. Para canales de estilo de vida o cultura, el iris aporta más personalidad.

clip-path

circle(r px at cx cy)

Diagonal

Radio máximo del frame

30 frames

Duración de la transición

Origen

centro o posición del logo.

🎛️ Montaje final — timing y ritmo

Con todas las escenas listas, el trabajo final es calibrar el ritmo. Una apertura de canal debe parecer rápida, pero no ansiosa: lo bastante para reconocer el logo y leer el título. La regla práctica: nunca menos de 5 s ni más de 15 s.

✓ Timing recomendado (30fps)

✓Logo: 60 frames (2 s) — tiempo para reconocer la marca.
✓Título: 75 frames (2,5 s) — tiempo para leer el nombre + tagline.
✓Transición: 30 frames (1 s) — lo bastante rápida para no cansar.

✗ Errores comunes de ritmo

✗El logo permanece más de 3 s antes de que aparezca el título — parece que se trabó.
✗El título sale antes de estar completamente legible — corte brusco.
✗Transición demasiado larga: la apertura compite con el propio contenido.

Total ideal

5–10 s

Logo

2 s = 60 fotogramas

Título

2,5 s = 75 fotogramas

Salida

1 s = 30 fotogramas

🏁 Resumen del módulo

✓

Series orquesta las escenas — sin calcular offsets, cada escena declara su duración.

✓

Fondo en AbsoluteFill paralelo — starfield/gradient-shift no entran en el Series.

✓

Spring para el logo — damping 14, stiffness 180 dan el pop perfecto.

✓

Stagger de letras — Sequence from={i*2} dentro del componente del título.

✓

Iris mediante clip-path — circle(r px at center) con r interpolado de maxR hasta 0.

✓

Timing: 5–10 s en total — logo 2 s + título 2,5 s + transición 1 s.

Próximo módulo:

4.2 — Video de producto: ken-burns + lower-third + stat-counter + end-card.

← Volver a la ruta 4 Próximo módulo →