Motion
Lee primero el skill /hyperframes (contrato de renderizado) y luego brand/DESIGN.md. La carpeta de producción es una copia de templates/base/.
Base
templates/base/index.htmlya incluye: variables de color, fuentes, el plano de interfaces 3D (#world), el estilo de las tarjetas de vidrio, los caches y los indicadores. Mantén estas clases, no reinventes el estilo.- Una escena por sub-composición en
compositions/cuando la película supere los 10 s (el root solo conserva los hosts de escenas, el audio y el mundo de fondo). - GSAP local (
assets/js/gsap.min.js). Nunca CDN: el renderizado se realiza sin conexión. - Fuentes:
@font-facehaciaassets/fonts/.
Movimiento (valores del estudio)
| Acción | Valor |
|---|---|
| Texto que aparece | desde un cache: yPercent 110 → 0, 0,7 a 0,85 s, expo.out, líneas con 80 ms de separación |
| Texto que desaparece | yPercent 0 → -110, 0,36 a 0,4 s, power3.in |
| Tarjeta de vidrio que aparece | y +1250 → 0, 1,1 s, expo.out |
| Indicadores | y 26 → 0 + opacidad, 0,6 s, expo.out, 70 ms de separación |
| Línea | scaleX 0 → 1 desde la izquierda, 0,7 a 0,8 s, expo.out |
| Plano de interfaces | desplazamiento lineal continuo, rotationX 56, rotationZ -20 |
| Reflejo en el vidrio | una vez por película, 1,3 s, power2.inOut |
| Número que cuenta | 0,9 a 1,4 s, power3.out, valor final redondeado y sostenido |
Prohibiciones técnicas: animar letter-spacing, width, top, left; un transform CSS sobre un elemento que GSAP anime; filter: blur en títulos; cualquier halo o degradado de fondo (ver DESIGN.md).
Interfaces reales
Para mostrar una aplicación, usa una captura real (npx hyperframes capture <url> --json para un sitio público como mescentimes.cloud) o reconstruye la pantalla en HTML con datos reales plausibles en FCFA. Nunca uses un logotipo falso de cliente.
Verificar y renderizar
npx hyperframes check --json # cero errores
npx hyperframes snapshot --at <instantes clave> # revisa cada fotograma
npx hyperframes render --output renders/<slug>.mp4
Después del renderizado: extrae 6 imágenes en el teléfono (ffmpeg -ss T -i … -vf scale=540:-2) y revísalas antes de entregar.