Cómo está hecho
La tanda 1 eran animaciones CSS en bucle: se veían, pero no se podían rebobinar con
precisión ni exportar. Esta tanda invierte el planteamiento — el estado de cada escena es
una función pura de t, sin nada acumulado entre fotogramas. De ahí salen las
tres cosas a la vez: preview, barra de arrastre y un MP4 reproducible. Comprobado
con un test que llega a cada instante por dos caminos —en línea recta y dando tumbos por
el timeline— y compara el estado resultante: 63 de 63.
- Una técnica por pieza — tipografía cinética, coreografía de rejilla, trazo SVG, partículas en canvas, tamiz determinista, barrido rotacional y corte con clip-path. Ninguna repite el recurso de la anterior.
- Marca copiada, no inventada — paleta, tipografía y componentes salen de
wisd-website. El teal#5C9099, el vivo#14B8A6y el papel claro son los mismos que la web. - Cámara en todas — un push-in del 3-4% a lo largo de la pieza. Es lo que separa un vídeo de una diapositiva animada.
- Disciplina de
film-studio-skills— bible visual, breakdown y shot cards antes de escribir una línea de animación. Están endocs/yprompts/.
Para regenerar los vídeos: npm run render (todas) o
node scripts/render.mjs 03-el-puente (una). El detalle está en el README.
¿Y la tanda 1? Sigue ahí, sin tocar, para comparar de dónde salía la sensación de “genérico”: fondo oscuro, neón cian y violeta, cero relación con la marca.
Ver la tanda 1