site-motion

¿Qué hace site-motion?

Las escenas marcadas como Pro, o nombradas en estas notas pero faltantes en scenes/, son escenas Pro de site-motion. Aprende de lo que dicen las notas sobre ellas; construye a partir de las escenas que están aquí (site-motion list).

Una escena es una función pura del tiempo. render(t) dibuja el mismo fotograma para el mismo t, independientemente de lo que haya ocurrido antes. Esa única regla es la razón por la que el mismo archivo puede reproducirse en vivo en un sitio web y renderizarse con fotogramas exactos a video: el exportador solo busca cada tiempo de fotograma y toma capturas de pantalla.

Raíz del repositorio: la carpeta que contiene este archivo (instálalo con git clone https://github.com/Shivraj97/site-motion ~/.claude/skills/site-motion, o enlaza un clon allí). Node 22+, Chrome, ffmpeg. Sin instalaciones npm. Desde cualquier proyecto, ejecuta la CLI por su ruta completa; las compilaciones y renderizados caen en out/ de ese proyecto, y --tokens / --content toman rutas relativas a él:

SM=~/.claude/skills/site-motion/bin/site-motion.mjs
node $SM init card-story --tokens ledger          # escribe ./brand.json (desde el preset) y ./card-story.json para editar
node $SM make card-story --tokens ./brand.json --content ./card-story.json --out public/motion/story.html

Para poner una escena en el código fuente del proyecto para que el equipo pueda editarla, usa add en lugar de make. Copia scene.js, scene.css, content.json y tokens.json a public/motion/<scene>/ (o motion/<scene>/ cuando no hay public/), el reproductor y las bibliotecas de proveedores a runtime/, y escribe <scene>.html, un archivo incrustable único. La carpeta copiada es una escena válida para build, render y make:

node $SM add ledger-stamp --tokens ./brand.json --content ./ledger.json          # → public/motion/ledger-stamp/ + ledger-stamp.html
node $SM make public/motion/ledger-stamp --tokens public/motion/ledger-stamp/tokens.json --formats png,sheet

Dentro del propio repositorio funciona la forma corta:

node bin/site-motion.mjs list                                   # escenas y presets de tokens
node bin/site-motion.mjs make iso-blocks --tokens mint          # compila + renderiza mp4, webp, poster
node bin/site-motion.mjs make card-story --tokens ./brand.json --content ./my-story.json --formats mp4,webm,webp,gif,png,sheet
node bin/site-motion.mjs build window-stack --tokens night --out public/hero.html   # solo incrustable en vivo
node bin/site-motion.mjs render out/hero.html --formats mp4 --scale 2 --range loop        # exporta una compilación existente

Las salidas caen en out/<content>-<tokens>/. --range loop exporta solo el bucle continuo (el predeterminado para GIF y WebP); full es la introducción más un bucle (el predeterminado para MP4 y WebM). sheet escribe una hoja de contactos 4×3: haz siempre una y léela.

Flujo de trabajo

Un sitio completo (varias secciones o páginas) comienza con un plan, no con una escena. Ejecuta node $SM plan en el proyecto:

• con --brief brief.md cuando conozcas las secciones. Esta es la mejor entrada. Escribe el resumen a partir del texto real del sitio:

  # Acme: qué hace el producto, en una línea
  ## inicio
  - heroe: el titular del héroe
  - caracteristica: el encabezado de cada sección de características y una línea debajo
  ## precios
  - heroe: …
  

• o con --url https://su-sitio.com[,https://su-sitio.com/precios] para leer los encabezados de las páginas en vivo;
• o con --pages inicio,caracteristicas,precios --about "…" cuando no hay nada más (selecciones genéricas; dímelo).

Asigna cada sección a una escena, cada una usada una vez, todas con el mismo aspecto. El aspecto es el del héroe de inicio, fijado en site-motion.json. Dibuja site-motion-plan.png: cada sección como el fotograma de su escena en la marca y el aspecto, con el veredicto de la puntuación en la parte superior. Muestra al usuario la hoja y obtén la aprobación antes de plan apply.

• Una selección marcada con ? no tuvo una coincidencia sólida. Lee su nota ("ledger-stamp encaja mejor pero está en inicio.heroe") y ya sea intercambia (plan swap <slot> <scene>), reutiliza la mejor escena, o dile al usuario que la biblioteca no tiene ninguna escena para esa historia todavía.
• Nunca apliques sobre una selección débil sin decirlo.

plan apply agrega cada escena e imprime el código incrustable de cada sección. Luego escribe el contenido de cada escena en su content.json, ejecuta sync, y termina con score --project.

Para una escena, sigue los pasos a continuación.

1. Obtén primero el sistema de diseño. Los tokens son la única fuente de color y tipografía. Encuéntralos en este orden: el archivo de tokens/tema del proyecto (variables CSS, configuración de Tailwind, tokens.json), luego el sitio en vivo (mide los estilos calculados), luego pregunta. Escríbelos como tokens/<marca>.json (forma a continuación). Nunca inventes un color una vez que exista la paleta; deriva tonos con h.mix(a, b, p) de los tokens.
2. Elige el arquetipo que cuente la historia del producto, o escribe una nueva escena:

   Escena	Historia que cuenta	Renderizador
   iso-blocks	infraestructura, plataformas, "muchas partes trabajando": bloques con datos en vivo en sus caras sobre un suelo de mosaicos	SVG
   card-story	un flujo de trabajo que elimina trabajo: una lista de características impulsa una tarjeta de producto a través de estados	DOM
   window-stack	"funciona donde trabajas": ventanas de aplicación sobre un fondo de Canvas pintado, un agente haciendo pasos	Canvas + DOM
   live-room Pro	multijugador: cursores con nombre sobre una ventana de aplicación, una propuesta, una votación que pasa, un cambio que se envía, un ticker de actividad	Canvas + DOM
   leaderboard	crédito y posición: las contribuciones caen en filas, los puntos cuentan hacia arriba, las filas se reordenan	DOM
   bloom-flow	automatización: un evento recorre un gráfico de flujo de trabajo y cada paso florece en flores generativas	Canvas + SVG
   signal-field	desordenado → estructurado: hebras ruidosas pasan una puerta y salen como carriles limpios	p5.js
   drop-pile	muchos → uno: los elementos de trabajo caen en una sola bandeja con física real, un contador los cuenta	Matter.js (horneado)
   galton-router	enrutamiento, aprobaciones, A/B: los pagos caen a través de un tablero de clavijas; una regla cambia un interruptor y el flujo se mueve a los mejores contenedores	SVG (camino aleatorio con semilla)
   receipt-printer	desordenado → estructurado: los documentos alimentan una ranura, un recibo imprime cada campo extraído con su confianza	DOM + SVG
   score-sheet	orquestación, multiagente: una ejecución escrita como una partitura musical, los pentagramas vibran mientras cada agente trabaja	SVG
   css3d-stack	arquitectura, capas: cajas HTML reales en CSS 3D se separan mientras una solicitud cae a través	CSS 3D
   loom	muchos → uno, integraciones: cada herramienta es una banda de hilos de urdimbre tejidos en una tela de sarga que se enrolla en la viga del producto	Canvas 2D
   domino-run	automatización, desencadenantes: una bola inclina una cadena de fichas de dominó agrupadas en pasos, cada paso se ilumina cuando la onda lo alcanza	Matter.js (horneado)
   weather-board	confiabilidad, conmutación por error: una tormenta (nubes de sombreador, lluvia, relámpagos) se acumula sobre una región de un mapa de estado, el tráfico se redirige, se despeja con 0 solicitudes fallidas	Sombreador WebGL + DOM
   ledger-stamp	aprobaciones, cumplimiento, confianza: los pagos viajan en una correa indexada más allá de un escáner de políticas, una prensa de sello APROBADO y una prensa de firma y sello en un rastro de auditoría; uno por encima del límite se sella como RETENIDO y espera un segundo aprobador	SVG + DOM
   grain-tally	métricas, escala: miles de granos (cada uno un lote fijo de eventos reales) respiran como un anillo de polvo, se vierten en los dígitos del total, luego se ordenan en una barra por fuente con su conteo exacto; el número se construye a partir de sus datos, no se cuenta hacia arriba	Canvas 2D (partículas, t pura)
   lens-of-order	desordenado → estructurado, clasificación, IA que ve: un campo de manchas a la deriva con tramado de 1 bit (aún no entendido); una lente de aumento llena cada mancha en su color de clase, la delinea y etiqueta con una confianza, dejando un rastro de color que se desvanece	Canvas 2D (campo por celda, tramado de Bayer)
   water-slide-funnel	embudo de conversión: los pasajeros se deslizan por una rampa por etapa; la piscina de cada labio atrapa las bajas de esa etapa	SVG
   gold-pan Pro	búsqueda mientras escribes: cada pulsación de tecla agita la bandeja hasta que quedan tres pepitas con precio	Canvas 2D
   museum-heatmap Pro	análisis de producto: las huellas de los visitantes calientan el suelo alrededor de las funciones donde la gente se detiene; la clasificación proviene del calor	Canvas 2D
   cell-division	bifurcación de base de datos: principal se divide en ramas, una se descarta, una se fusiona con su cambio	Canvas 2D (metaballs)
   scratch-off Pro	predicción: la lámina se raspa para revelar la hora de salida real antes de que el tablero de la aerolínea se ponga al día	Canvas 2D
   sieve-tray Pro	detección temprana: los marcadores caen a través de una malla fina; los pocos que se atrapan se levantan y se marcan	Matter.js (horneado)
   rube-goldberg Pro	antes / después: una canica de recibo se atasca en cinco artilugios viejos, luego cae por un conducto en un segundo	SVG
   language-balloons Pro	localización: burbujas de palabras en ocho escrituras flotan hacia arriba y ensamblan la oración de cada idioma, incluido RTL	Matter.js (horneado)
   balloon-deploy Pro	despliegues: cada paso de compilación infla el sobre; al 100%, el lanzamiento despega	SVG
   pufferfish Pro	escalado automático: un pez globo se hincha para igualar cada ola de tráfico mientras un pez de capacidad fija es arrojado	SVG
   gear-tiers Pro	precios: planes dibujados como equipo de campamento, de tienda a campamento base, con un interruptor mensual / anual	SVG
   permission-chessboard Pro	roles y permisos: cada pieza de rol aterriza en el tablero y solo ilumina las casillas que puede usar	SVG
   tree-rings	año en revisión: un anillo por año, tan ancho como el año fue ocupado, con muescas para los primeros	SVG
   parchment-changelog	registro de cambios: un pergamino se despliega un lanzamiento a la vez, cada uno entintado mientras se envía	SVG + DOM
   moving-boxes	migración: un carrito de mano lleva la caja de cada herramienta antigua al nuevo edificio, nada se pierde	SVG + DOM
   privacy-pebbles Pro	redacción de PII: una escobilla de goma convierte cada detalle personal en un guijarro idéntico; la oración aún se lee	SVG + DOM
   ant-trail Pro	categorización automática: las hormigas llevan el recibo, la nota y la aprobación de cada deslizamiento a la ranura correcta del libro mayor	Canvas 2D
   sunrise-payroll Pro	nómina global: un amanecer cruza ocho zonas horarias y paga a cada ciudad a sus propias 9 am	SVG
   whiteout Pro	calma: un tablero ocupado se disuelve en niebla, dejando el único número que importa	Sombreador WebGL + DOM
   ink-flood Pro	tematización, etiqueta blanca: una muestra de pintura inunda todo el producto en una nueva combinación de colores	SVG
   integration-deck Pro	integraciones: cada herramienta es una tecla en un teclado macro isométrico; un flujo de trabajo se reproduce como un acorde mientras un registro de ejecución escribe cada paso	Three.js
   margin-rails Pro	procedencia: una nota se escribe a sí misma mientras los pasajes arrastrados de archivos anteriores se deslizan en rieles nombrando su fuente	SVG + DOM
   pigeonhole-wall	memoria: los documentos se archivan en casilleros etiquetados, y una solicitud extrae las tres fuentes que necesita	SVG + DOM
   redline-front Pro	revisión de contrato: un frente de revisión barre el documento y lo devuelve como una línea roja terminada con autoridades verificadas	SVG + DOM
   step-rail	cómo funciona, incorporación: un token viaja por pasos numerados; cada tarjeta se abre en lo que produjo su paso y el último aterriza el resultado	SVG + DOM
   pipeline-board	flujos de trabajo, tubería: las tarjetas avanzan columna por columna en un tablero kanban mientras los conteos y totales las siguen	DOM
   account-health	retención, éxito del cliente: una tabla de salud reproduce el mes; una cuenta se desliza a en riesgo, un plan de acción se activa y se recupera	SVG
   split-wipe	antes / después, consolidación: un divisor barre el trabajo manual disperso y cada fragmento encaja en una superficie de producto	DOM
   roadmap-rail	hoja de ruta, hitos: un marcador de Hoy camina por el eje de tiempo; los hitos enviados se completan y el lanzamiento clave se abre en una tarjeta	SVG
   trust-rings	seguridad, cumplimiento: las solicitudes pasan anillos de control concéntricos alrededor de los datos; la no autorizada se detiene y registra	SVG
   balance-scale	precios, calidad vs coste: tres balanzas de platillos, cada inclinación calculada a partir de las puntuaciones; la nuestra se inclina hacia la calidad	SVG
   crate-discrepancy	conciliación: las bandejas se levantan de una caja y marcan la lista de empaque; la corta flota hacia arriba con su nota	SVG + DOM
   press-qa	pruebas, CI: las compilaciones salen de una prensa; un brazo empuja la que tiene una prueba fallida por un conducto y pasa en la reejecución	SVG
   radar-sweep	observabilidad: cada trabajo en ejecución es un punto en un alcance de radar; un cursor alcanza y pausa el que falla	Canvas 2D + DOM
   agent-checkout	demostración de UI de producto, pagos de agente: una solicitud de compra, una tarjeta virtual enmascarada se autocompleta, el medidor de límite se mueve por el monto, el recibo se une a la lista	DOM + kit de UI
   click-to-done	demostración de UI de producto, cualquier función de una sola acción (invitar, enviar, aprobar, publicar): una pantalla real en un marco de navegador, el cursor escribe, elige y hace clic, la cámara se acerca y se aleja del resultado	DOM + kit de UI
   dashboard-push	demostración de UI de producto, análisis e informes: la cifra principal se construye a partir del gráfico mientras se dibuja, el cursor desplaza una información sobre herramientas, la cámara se acerca al momento que importa, un interruptor de rango transforma cada serie	DOM + SVG + kit de UI
   phone-stack	demostración de UI de producto, móvil y notificaciones: las alertas caen en una pantalla de bloqueo con un anillo de señal cada una, un toque abre la más reciente en la pantalla de la aplicación, un deslizamiento hacia arriba la borra	DOM + kit de UI
   shot-demo	demostración de UI de producto a partir de una captura de pantalla: la propia captura de pantalla del cliente en un marco; el cursor escribe en sus campos reales y hace clic en su botón real, los valores cambian en la cara de la marca, un foco y una llamada caen en el resultado	DOM + captura de pantalla + kit de UI

integration-deck es el estándar 3D: un objeto táctil, una acción física, bandas planas de estilo caricatura, un contorno de tinta, una cámara isométrica real y etiquetas en el tipo de letra de la marca. Las otras escenas de objetos Three.js (un concentrador de órbita, una pared de clasificación, un logo extruido, una vitrina glTF) viven fuera del conjunto público hasta que se reelaboren; las herramientas 3D (vendor/three-full.min.js, ve

…

[truncado para traducción]