Documentación Oficial · HyperCodeMotion

01 · Empieza aquí

Tres maneras de crear en HyperCodeMotion

HyperCodeMotion está diseñado para que nunca tengas que empezar desde una pantalla en blanco ni quedar atrapado en la regeneración de video:

1. Prompt → JSON

El estudio prepara un prompt estructurado con tu brief, formato y escenas. Lo pegas en Claude, ChatGPT o Gemini y traes el JSON resultante al editor.

2. PDF de Canva

Exporta tu diseño de Canva en PDF vectorial. HyperCodeMotion separa automáticamente cada capa, texto y posición lista para animar.

3. Desde cero a mano

Usa la línea de tiempo nativa: añade capas de texto, formas, más de 1.800 iconos Lucide, transiciones y pistas de audio.

02 · Cómo funciona

Arquitectura del sistema: Zero-Server Processing

A diferencia de los editores tradicionales que renderizan en servidores remotos o colas lentas de GPU:

Procesamiento en cliente: El 100% de la maquetación, audio y composición se ejecuta en el navegador mediante la API de WebCodecs y AudioContext.
El movimiento es dato: Cada animación es una función determinista del tiempo seek(t). Modificar un texto o un color cuesta 0 tokens porque no requiere regenerar video.
Exportación fotograma a fotograma: El archivo MP4 se compila directamente en local sin compresión de red ni marcas de agua.

03 · Efectos

Catálogo de efectos y curvas de movimiento

HyperCodeMotion incluye más de 20 efectos nativos de entrada, permanencia y salida para capas de texto y formas:

rise (subida suave) pop (rebote elástico) wipe (barrido direccional) slide (deslizamiento) blur (desenfoque progresivo) rotate (giro 2D/3D) scale (zoom in/out) clipPath (máscara geométrica) muelle UI (spring physics)

04 · Prompts increíbles

Recetas de prompts optimizados

Copia y pega estas estructuras en tu modelo de lenguaje favorito (Claude 3.7 Sonnet, GPT-4o, Gemini 2.5 Flash):

Genera una animación motion graphics en JSON para HyperCodeMotion:
- Formato: 1080x1920 (9:16 vertical)
- Duración: 8 segundos
- Paleta: #0c0c10 (fondo), #e8f27a (acento), #ffffff (texto)
- Escena 1 (0s a 3s): Título con entrada 'rise', número que cuenta de 0 a 100k con muelle elástico.
- Escena 2 (3s a 8s): 3 tarjetas de beneficios que entran escalonadas (stagger 0.2s) con iconos Lucide.

05 · Escribir prompts

Anatomía de un prompt efectivo

Para obtener resultados visuales impecables de la IA, divide siempre tu indicación en 4 partes clave:

Brief de marca: Tono, promesa, formato (16:9, 9:16 o 1:1) y BPM musical si aplica.
Sistema visual: Tipografías recomendadas (Inter Tight, JetBrains Mono, Bricolage) y colores primarios/secundarios.
Estructura de escenas: Qué elementos aparecen, tiempos de entrada y salida, y jerarquía visual.
Instrucción de salida: Especificar que devuelva exclusivamente el objeto JSON compatible con el editor.

06 · Prompts de Remotion

Compatibilidad y migración de conceptos de Remotion

Si vienes de Remotion, HyperCodeMotion simplifica el flujo de trabajo reemplazando código imperativo en React por datos declarativos:

interpolate(frame, ...) se convierte en keyframes visuales en la línea de tiempo.
spring({ frame, fps }) se traduce al preset de movimiento Muelle UI con amortiguación y rigidez configurables.
Sin necesidad de configurar bundlers de Node.js, compilar proyectos npm o esperar renders en la nube.

07 · Iconos y SVG

1.869 iconos Lucide y soporte para SVG personalizado

El editor incluye la biblioteca completa de iconos vectoriales Lucide disponibles como capas nativas:

Puedes invocar cualquier icono directamente por su nombre (ej: zap, arrow-up-right, check, sparkles).
Soporte de color de trazo, grosor, relleno y animación de trazado.
Importa tus propios archivos .svg con preservación de grupos, degradados y coordenadas vectoriales.

08 · UI motion

Física de interfaz y simulación de cursor

Especialmente diseñado para recrear demos de producto y prototipos SaaS:

Capas de Cursor: Simula el puntero del ratón con clics, arrastres y trayectorias bezier suavizadas.
Componentes reactivos: Botones con estados de carga, toggles animados, islas dinámicas e inputs con escritura simulada letra a letra.
Cámara dinámica: Encuadre automático sobre la capa activa con zoom y rotación tridimensional.

09 · Escenas HTML

Maquetación con HTML, CSS y Flexbox

La IA diseña mejor cuando utiliza HTML/CSS que cuando calcula coordenadas X/Y aisladas. HyperCodeMotion utiliza un sistema de rasterización dual:

Cada escena se renderiza en un contexto aislado con fuentes y estilos embebidos.
Los elementos marcados con data-hcm se miden y convierten en capas independientes para ser animadas de forma fluida.

10 · Referencia

Especificación del JSON Schema

Estructura general de un proyecto HyperCodeMotion:

{
  "width": 1920,
  "height": 1080,
  "fps": 30,
  "duration": 10.0,
  "background": "#0c0c10",
  "params": {
    "accent": "#e8f27a"
  },
  "layers": [
    {
      "id": "hero_title",
      "type": "text",
      "content": "La IA genera. Tú tienes el control.",
      "start": 0.5,
      "duration": 4.0,
      "style": {
        "fontSize": 64,
        "color": "#ffffff",
        "fontFamily": "Bricolage Grotesque"
      },
      "motion": {
        "in": "rise",
        "ease": "expo.out"
      }
    }
  ]
}

11 · Límites

Límites técnicos y recomendaciones

Para asegurar un rendimiento óptimo de 60 fps en la vista previa y una exportación veloz:

Duración recomendada: De 5 a 60 segundos por composición (ideal para clips de redes sociales, anuncios y demos).
Resoluciones recomendadas: 1080×1920 (Vertical 9:16), 1920×1080 (Horizontal 16:9) y 1080×1080 (Cuadrado 1:1).
Navegadores soportados: Google Chrome, Microsoft Edge, Brave y cualquier navegador moderno basado en Chromium con aceleración por hardware.

Documentación Técnica