HyperFrames
Video determinista desde HTML
CULTIVA IA · Composición 15s · 1920×1080 · 30fps
Vista previa de la composición
🌱
CULTIVA IA
Agencia de inteligencia artificial
IA para negocios reales
Automatiza tareas repetitivas con agentes de IA personalizados
Contenido y marketing generado a escala en minutos
Integración sin fricción con tu stack actual
Nuestros servicios
📣
Marketing
🌐
Web
Automatización
✍️
Contenido
📊
Datos
🤖
Agentes
Empieza ahora →
Consulta gratuita
cultivaia.com
Timeline · 15s
0:00 / 0:15
Metadatos de composición
composition-id cultiva-launch
Dimensiones 1920 × 1080 px
Duración 15.0 s
FPS 30
Total frames 450
Scenes 4
Licencia Apache-2.0
index.html — Composición HyperFrames
index.html
<!-- Stage: canvas raíz --> <div id="stage" data-composition-id="cultiva-launch" data-start="0" data-width="1920" data-height="1080"> <!-- Escena 1: Intro 0–3s --> <div class="scene-intro" data-start="0" data-duration="3"> <h1>CULTIVA <span>IA</span></h1> </div> <!-- Escena 2: Propuesta 3–7s --> <div data-start="3" data-duration="4"> <h2>IA para negocios reales</h2> <ul data-start="4" data-duration="3">... </ul> </div> <!-- Escena 3: Servicios 7–11s --> <div data-start="7" data-duration="4"> <!-- Grid 3x2 servicios --> </div> <!-- Escena 4: CTA 11–15s --> <div data-start="11" data-duration="4"> <p>cultivaia.com</p> </div> </div>
CLI Pipeline
$ npx hyperframes init cultiva-launch
$ npx hyperframes lint # validar timing
$ npx hyperframes inspect # 15s, 1920×1080
$ npx hyperframes render --fps 30
cultiva-launch.mp4 · 450 frames
Flujo automatizado (CI/CD)
1
Generar/templatear index.html
2
hyperframes lint (validación)
3
hyperframes render (Chrome headless)
4
FFmpeg encode → MP4 determinista
5
Upload MP4 → CDN / redes sociales