MotionCraft Builder

¿Qué hace MotionCraft Builder?

Esta habilidad enseña a un agente a construir sitios web de animación de la misma forma que los estudios pequeños lanzan trabajos galardonados: una idea, un plan escrito, un mecanismo funcional en cajas grises, luego el vestido, y finalmente una revisión exhaustiva y una ronda de correcciones. El oficio reside en las referencias. Este archivo es el flujo de trabajo.

Pila por defecto: HTML semántico, CSS, módulos JavaScript vanilla, three.js 0.170 mediante un mapa de importación, sin paso de build. Añade GSAP o Lenis solo cuando una receta los necesite. Cada página debe funcionar, leerse y convertir con WebGL desactivado.

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
  }
}
</script>

El flujo de trabajo

Ejecuta estos pasos en orden. No te adelantes a los efectos. Cada paso tiene un resultado que puedes mostrar a la persona antes de continuar.

Paso 1. Encuentra la idea única

Lee el briefing y enumera el mundo real del cliente: los objetos que manejan, los documentos que imprimen, los sonidos del lugar, los verbos que usa su personal a diario. Luego escribe una frase:

[Marca] es un sitio donde [verbo] [el objeto de su mundo], y te muestra [el valor que venden].

Ejemplos con marcas ficticias:

• Cinderford Coffee Roasters: desplazas un solo grano a través del tostado, de verde a primer crack a ciudad completa, y las notas de sabor se imprimen en el registro de tostado a medida que cambia el color.
• Lakemont Bike Fitters: arrastras la altura del sillín de un ciclista y el arco del ángulo de la rodilla se redibuja en la vista lateral en vivo.
• Halvorsen Tide Charters: avanzas o retrocedes el reloj de la marea y el barco sube y baja contra el muelle real.

Reglas para la idea (ver reglas de oficio 1 a 3):

• Un objeto, un verbo, un mundo. Si necesitas "y" dos veces, son dos ideas. Elige una.
• La metáfora proviene del mundo del cliente, nunca de una tendencia. Un garaje habla en órdenes de reparación, un tendero en circulares semanales, una agencia de tránsito en diagramas de líneas.
• Dale al color de acento un solo trabajo. Si rojo significa "se encontró una falla", no significa nada más en ninguna parte de la página.
• El cargador, el cursor, la navegación, los estados hover, las transiciones y el 404 hablan todos el mismo idioma.

Resultado: la frase, el verbo, el color de acento y su significado, y tres ideas rechazadas con una línea sobre por qué perdió cada una.

Paso 2. Elige una arquitectura de página

Abre page-architecture.md. Elige un arquetipo de navegación, una composición de héroe y una secuencia de secciones que provengan del mismo mundo que la idea. Nunca reutilices el esqueleto del proyecto anterior. Registra la elección en el README del proyecto para que la próxima compilación pueda evitarla.

Resultado: una ficha de arquitectura corta (nav, héroe, lista de secciones, pie de página, 404) con los patrones nombrados que utilizaste.

Paso 3. Escribe el guion gráfico (beat sheet)

Escribe el guion antes de cualquier código. Usa la plantilla en beat-sheet.md. Cada beat (latido) indica su rango de scroll, lo que ve el visitante, qué se mueve, el texto, la cámara, el encuadre móvil, la versión con movimiento reducido y el costo. El ejemplo trabajado muestra el nivel de detalle esperado.

Resultado: el guion gráfico completo. Cada decisión posterior se verifica contra él. Si una sección no sirve a la frase del Paso 1, córtala aquí, donde es barato.

Paso 4. Crea el prototipo en cajas grises (grey-box)

Construye el movimiento con geometría provisional y texto provisional. Este paso prueba el tiempo, la cámara y la interacción antes de que exista cualquier activo.

1. Escribe el DOM primero: encabezados reales, bloques de texto reales, botones y formularios reales, una <section class="shot"> por beat. La página debe leerse de arriba a abajo con los scripts desactivados.
2. Añade un canvas fijo detrás del DOM y un bucle de renderizado. El scroll, el puntero, el audio y el renderizado comparten ese bucle (regla 8).
3. Mapea el scroll a un único flotante t que cuenta los beats, y mueve la cámara a través de una lista de tomas con pausas suaves (scroll y recetas de cámara).
4. Usa cajas grises, esferas y planos para cada objeto. Si la historia no funciona en gris, el vestido no la salvará.
5. Añade el control de pausa y la rama de movimiento reducido ahora, no al final (recetas de interacción).

Inicio del prototipo en cajas grises. La página necesita el mapa de importación anterior, un canvas fijo y una sección .shot por entrada en SHOTS:

<style>
  #gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
  .shot { min-height: 100svh; display: grid; align-items: center; padding: 16px 6vw; }
  .no-gl #gl { display: none; }
</style>
<canvas id="gl" aria-hidden="true"></canvas>
<main>
  <section class="shot" id="top"><h1>Titular del beat 0</h1></section>
  <section class="shot" id="detail"><h2>Beat 1</h2></section>
  <section class="shot" id="side"><h2>Beat 2</h2></section>
</main>
<script type="module" src="main.js"></script>

main.js:

import * as THREE from "three";

const canvas = document.getElementById("gl");
let renderer = null;
try { renderer = new THREE.WebGLRenderer({ canvas, antialias: true, powerPreference: "high-performance" }); }
catch { document.body.classList.add("no-gl"); } // la página DOM se sostiene por sí sola

if (renderer) {
  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0x111114);
  scene.add(new THREE.HemisphereLight(0xffffff, 0x222233, 1.4));
  const camera = new THREE.PerspectiveCamera(35, 1, 0.1, 100);
  // sustituto gris para el objeto héroe hasta que se apruebe el guion gráfico
  scene.add(new THREE.Mesh(new THREE.BoxGeometry(2, 1, 1.2), new THREE.MeshStandardMaterial({ color: 0x8a8a8a, roughness: 0.6 })));

  const V = (x, y, z) => new THREE.Vector3(x, y, z);
  const SHOTS = [
    { pos: V(4, 3, 8), at: V(-1.5, 0, 0) },  // héroe: objeto a la derecha del titular
    { pos: V(0, 9, 0.1), at: V(0, 0, 0) },   // detalle de arriba hacia abajo
    { pos: V(-6, 1.2, 3), at: V(1.5, 0, 0) }, // lado bajo, texto a la derecha
  ];
  const sections = [...document.querySelectorAll(".shot")];
  let centers = [];
  const measure = () => { centers = sections.map((s) => s.offsetTop + s.offsetHeight / 2); };
  const smooth = (a, b, x) => { const k = Math.min(1, Math.max(0, (x - a) / (b - a))); return k * k * (3 - 2 * k); };
  function scrollT() {
    const c = scrollY + innerHeight / 2;
    if (!centers.length || c <= centers[0]) return 0;
    for (let i = 0; i < centers.length - 1; i++) if (c < centers[i + 1]) return i + (c - centers[i]) / (centers[i + 1] - centers[i]);
    return centers.length - 1;
  }
  function resize() {
    renderer.setPixelRatio(Math.min(devicePixelRatio, innerWidth < 760 ? 1.5 : 1.75));
    renderer.setSize(innerWidth, innerHeight, false);
    camera.aspect = innerWidth / innerHeight;
    camera.updateProjectionMatrix();
    measure();
  }
  addEventListener("resize", resize);
  document.fonts?.ready.then(measure);
  resize();

  const pos = new THREE.Vector3(), at = new THREE.Vector3();
  let raf = 0;
  function frame() {
    raf = requestAnimationFrame(frame);
    const t = scrollT(), i0 = Math.floor(t), i1 = Math.min(SHOTS.length - 1, i0 + 1);
    const f = smooth(0.15, 0.85, t - i0); // pausa en cada toma, viaja en el medio
    pos.lerpVectors(SHOTS[i0].pos, SHOTS[i1].pos, f);
    at.lerpVectors(SHOTS[i0].at, SHOTS[i1].at, f);
    camera.position.copy(pos);
    camera.lookAt(at);
    renderer.render(scene, camera);
  }
  raf = requestAnimationFrame(frame);
  document.addEventListener("visibilitychange", () => {
    cancelAnimationFrame(raf); // nunca ejecutar dos bucles
    if (!document.hidden) raf = requestAnimationFrame(frame);
  });
}

Criterios de salida para el Paso 4: desplázate hacia adelante y hacia atrás por cada beat y la cámara aterriza de la misma manera en ambas direcciones; cada toma deja espacio para su texto; el encuadre móvil funciona a 390 x 844; el control de pausa detiene todo el movimiento continuo; la página se lee con WebGL deshabilitado.

Paso 5. Vístelo (Dress it)

Ahora reemplaza el gris con el mundo. Toma recetas del índice de técnicas. Viste en este orden, verificando el guion gráfico después de cada capa:

1. Forma: el objeto héroe, construido a partir de primitivas, un glTF, una película o una foto de profundidad.
2. Luz: luz principal, contraluz y una luz de acento motivada. Sombras de contacto debajo de cualquier cosa que se asiente sobre una superficie.
3. Material y textura: etiquetas dibujadas en canvas y placas frontales antes que las texturas fotográficas. Son nítidas, pequeñas y editables.
4. Tipografía: como máximo dos tipografías. Movimiento del titular ligado al ritmo de la página, nunca un desvanecimiento genérico.
5. Sonido: opcional, opt-in, sintetizado con Web Audio para que no cueste bytes.
6. Pequeñas recompensas: un gesto oculto, un estado inactivo, un 404 en el idioma de la marca.

Gasta tiempo de fotograma en la interacción, no en física que nadie nota. Finge lo que es caro (regla 17).

Paso 6. Revisa y corrige (Look and fix)

No has terminado hasta que hayas mirado. Pasa la página a la habilidad motion-review (../motion-review/SKILL.md) para la rúbrica, la lista de verificación de QA y las capturas de pantalla de las secciones en tamaños de escritorio y teléfono, y a la habilidad motion-analytics (../motion-analytics/SKILL.md) para la calificación de tiempo de fotograma, peso y comparación con referencias. Luego corrige el peor hallazgo primero y vuelve a mirar. Dos pases completos de mirar y corregir es el mínimo para cualquier cosa que llames terminada.

Autoverificaciones rápidas antes de una revisión formal:

• Desplázate hacia abajo, luego todo el camino de regreso hacia arriba. Cada revelación debe invertirse limpiamente.
• Presiona el control de pausa a medio movimiento. Todo lo continuo debe detenerse, y la página debe seguir viéndose compuesta.
• Activa el movimiento reducido en el sistema operativo. La página debe contar la misma historia con imágenes fijas.
• Abre la consola. Cero errores, cero advertencias que hayas causado.
• Ancho de teléfono 390 px: sin texto por debajo de 11 px, sin objetivo táctil por debajo de 44 px, sin desplazamiento horizontal.

Paso 7. Entrega

Entrega la carpeta de la página (index.html, style.css, main.js más módulos, assets/), un README con la frase de una idea, la ficha de arquitectura, el guion gráfico, la lista de activos con licencias y los valores de ajuste que vale la pena cambiar. Mantén toda la página por debajo de 10 MB.

No negociables

• HTML real debajo. El contenido, la navegación y los formularios viven en el DOM. WebGL es una mejora con una alternativa no-gl.
• Un solo reloj. Nunca pongas valores por fotograma en el estado del framework. Usa variables simples, uniforms y propiedades personalizadas de CSS.
• Un control de pausa visible para cualquier movimiento que dure más de 5 segundos, más una rama completa de prefers-reduced-motion.
• El scroll nunca es secuestrado. La barra de desplazamiento nativa funciona, el desplazamiento del teclado funciona y los enlaces de anclaje saltan.
• Marcas ficticias y personas inventadas en demos. Nunca copies código, texto, activos o un concepto héroe de un sitio de referencia. Estudia la idea, escribe la tuya.
• Cada número en la página (precios, horarios, estadísticas) es plausible, consistente y en la localidad del cliente.

Mapa de referencias

Archivo	Úsalo cuando
references/craft-rules.md	Tome cualquier decisión de gusto. 30 reglas numeradas con valores concretos.
references/beat-sheet.md	Planifique la historia. Plantilla más un ejemplo trabajado.
references/page-architecture.md	Elija nav, héroe y secciones sin monotonía de plantilla.
references/techniques/INDEX.md	Busque una receta por necesidad, costo o impacto.
techniques/scroll-and-camera.md	Mapeo de scroll, tomas de cámara, encuadre móvil, valores de modo.
techniques/scene-craft.md	Vestido three.js: llamadas, morphs, ciudades, cielos, etiquetas, sombras.
techniques/film-and-photo.md	Héroes de video, bucles, texto con tiempo de película, hotspots rastreados, fotos de profundidad.
techniques/sound-and-rhythm.md	Voces de Web Audio, programación, visuales sincronizadas al beat.
techniques/interaction-and-access.md	Control de pausa, anclas, compuertas de retención, vistas de arrastre, niveles de calidad.

---

Parte de RegesCore AI MotionCraft Skills por LIKE A KING INC. Plantillas de movimiento gratuitas y el catálogo completo en animatedwebs.com.