VideoHero

Hero a viewport completo con vídeo de fondo

stable v1.0.1

Preview, desktop

Render real a 100svh dentro del iframe. La franja inferior es el destino del scroll cue. Composición de dos columnas 55% / 40%.

A ≤767px: columna única, anclada arriba, scroll cue en flujo bajo el texto.

Estado	Comportamiento
Default	Vídeo en autoplay, muted, loop, playsinline
prefers-reduced-motion	Pausa el vídeo, muestra poster
Scroll cue (con Lenis)	Smooth-scroll al siguiente hermano vía window.__lenis
Scroll cue (sin Lenis)	Fallback nativo scrollIntoView({ behavior: 'smooth' })
Sin JS	Atributos nativos autoplay muted loop siguen aplicando

Token	Default	Rol
--text-display	80px / 40px móvil	Tamaño del título; paso Tercera Mayor sobre --text-h1 (64 × 1.25)
--hero-text	#FFFFFF	Color de texto sobre el medio
--hero-overlay	rgba(0,0,0,0.2)	Scrim sobre el medio para contraste

Vídeo siempre muted (precondición del autoplay en móvil) y decorativo: sin controles, sin PiP.
Poster con alt="": fallback visual, no contenido.
El grid 55% / 40% es default del sistema, no un prop.
Sin colores ni tamaños hardcodeados: título por --text-display, texto por --hero-text, scrim por --hero-overlay.

Decisión	Por qué
Título con --text-display (80px = 64 × 1.25)	El hero ya renderizaba 80px, exactamente el siguiente paso Tercera Mayor sobre --text-h1, sin nombrar. Se tokeniza un paso on-ratio ya en uso; no es una excepción fuera de escala. Bajar a 64px se descartó (distorsiona una composición verificada); dejarlo hardcodeado también (valor sin token en el componente más visible).
--hero-text tokenizado, default blanco, overridable	El original incrustaba #FFFFFF en el componente: decisión de sitio dentro de una primitiva del sistema. Como token mantiene el blanco por defecto y deja re-tematizar sin forkear.
--hero-overlay tokenizado, default rgba(0,0,0,0.2)	La opacidad del scrim es una decisión de contraste que depende del metraje. Tokenizarla deja ajustar legibilidad sin tocar el componente.
Grid 55% / 40% como default del sistema, no prop	El reparto asimétrico es el componente: columna de título dominante, columna de highlight secundaria. Variarlo no tematiza, cambia qué es el hero. Un prop invitaría layouts que no está diseñado para sostener.
scrollLabel como prop, default español	El aria-label del cue estaba hardcodeado en español, assumption de sitio. Un prop con default español deja intactos los consumidores y permite a otro locale pasar su etiqueta.
Lenis opcional, fallback nativo	El sistema no declara librería de scroll. El cue mejora con Lenis si está y degrada a smooth scroll nativo; el componente no carga dependencia oculta.