0 / 192 (0%)

Especificaciones Técnicas

Rendimiento

  • • Scroll FPS: 60fps
  • • First Paint: <2s
  • • Frame Load: <200ms
  • • Total Size: <100MB

Características

  • • Preload inteligente de frames
  • • Canvas rendering optimizado
  • • Sincronización de overlays
  • • Responsivo en mobile

Cómo Usar

import { ScrollDrivenVideoWow } from '@/components/ScrollDrivenVideoWow';

<ScrollDrivenVideoWow
  frames={frameUrls}
  metadata={videoMetadata}
  syncMap={syncPoints}
  containerHeight={3000}
  quality="webp"
/>

Workflow Completo

  1. 1. Generar frames:
    node video-optimizer.js hero.mp4 ./optimized
  2. 2. Mapear sync points:
    Editar metadata.json y video_sync_map.json
  3. 3. Integrar componente:
    Usar ScrollDrivenVideoWow en tu landing