Escenas 3D Cinematográficas para Web

¿Qué hace Escenas 3D Cinematográficas para Web?

Las personas que describen animaciones usan palabras de sensaciones ("épico", "suave", "se lo traga", "como una película"). El código necesita decisiones exactas: qué hay en pantalla, dónde está la cámara, qué se mueve, a qué velocidad, con qué easing, cómo está iluminado y qué hace el texto en cada punto del scroll. Cuando esas decisiones se dejan a la adivinanza, el resultado es técnicamente correcto pero no es lo que imaginaron — y cada ronda de corrección cuesta más que hacerlo bien desde el principio.

Este skill cierra esa brecha en dos movimientos: dirigir antes de construir (convertir la descripción en una especificación de escena precisa y confirmada) y construir sobre una base probada (una arquitectura y una biblioteca de técnicas que hacen que la especificación sea confiable de implementar y suave al hacer scroll).

Funciona para cualquier escena — las escenas del portafolio incluido (un portátil que se abre, un átomo de habilidades en órbita, logotipos que se encienden y queman, un túnel de agujero negro) son ejemplos prácticos del método, no un menú para elegir.

Archivos

references/scene-language.md   vocabulario de movimiento preciso + traducciones de palabras vagas a términos específicos
references/scene-spec.md       el formato de especificación de escena / storyboard, con ejemplos prácticos
references/techniques.md       cómo construir cada tipo de efecto (cámara, shaders, partículas, texto…)
references/architecture.md     el patrón de escena de scroll fijado, líneas de tiempo, rendimiento, problemas comunes
references/house-style.md      el estilo visual predeterminado y cómo adoptar un estilo a partir de referencias
references/effects.md          las escenas terminadas de la plantilla, diseccionadas — cópialas o aprende de ellas
references/portfolio.md        cómo construir un portafolio completo a partir de la plantilla
references/content-guide.md    los campos de contenido de la plantilla
references/portrait-rig.md     el héroe de retrato vivo de la plantilla
template/                      sitio de portafolio Next.js completo (el ejemplo práctico)
scripts/create-site.mjs        inicia un nuevo sitio de una sola página (Next.js, fondo de casa, listo para escenas)
scripts/new-scene.mjs          crea una nueva escena fijada (sección + línea de tiempo, + lienzo 3D a menos que se use --no-canvas)
scripts/video-frames.mjs       extrae fotogramas de un video de referencia para estudiar el movimiento
scripts/create-portfolio.mjs   copia la plantilla completa del portafolio en una nueva carpeta
scripts/retheme.mjs            cambia el color de la familia de acentos de la plantilla

El flujo de trabajo

1. Entender lo que imaginan

Lee la solicitud para: para qué es la página, qué debe mostrar cada escena, la sensación, las referencias (sitios, videos, imágenes, películas, juegos) y las restricciones estrictas (sitio existente, framework, colores de marca).

Si dieron una referencia, estúdiala antes que cualquier otra cosa — contiene más información que cualquier descripción. Imágenes: míralas. Video: ejecuta scripts/video-frames.mjs y mira los fotogramas en orden (consulta "Leer un video de referencia" más abajo). Sitio web: si puedes abrirlo, haz scroll y captura la pantalla en intervalos. Anota el estilo (color, luz, tipo, movimiento de fondo) por separado de la coreografía (qué se mueve y cuándo) — la gente suele querer uno u otro de una referencia, y debes preguntar cuál si no está claro.

2. Traducirlo a una especificación de escena

Lee references/scene-language.md, luego escribe la especificación en el formato de references/scene-spec.md. Para cada escena: la idea en una frase, los objetos, el estilo de la casa o el aspecto elegido, y una tabla de tiempos — qué hay en pantalla en cada tramo del scroll (0–15%, 15–40%, …), con el movimiento de cámara, el movimiento (verbo + easing + duración), el cambio de luz/color, los efectos (partículas, distorsión, brillo) y lo que hace el texto.

Las palabras vagas se resuelven aquí, no en el código. "Es succionado" se convierte en: las letras del título giran en espiral hacia el centro de la pantalla, cada una comienza cuando el borde del vórtice la alcanza, girando 150° mientras se reduce al 15% y se desenfoca a 6px durante un 10% del scroll; el fondo se deforma hacia el centro en la misma ventana. Si una palabra podría significar dos cosas muy diferentes, ofrece las dos lecturas concretas y elige la más probable como predeterminada.

3. Confirmar antes de construir

Muéstrale la especificación a la persona — le toma un minuto leerla y ahorra horas. Pídele que corrija cualquier cosa que no sea lo que imaginó, especialmente el ritmo (demasiado rápido / demasiado lento) y el momento clave de cada escena. Mantén el mensaje breve: la tabla de tiempos más 2 o 3 preguntas específicas con tus respuestas predeterminadas, para que "sí, adelante" sea una respuesta válida.

Si no puedes preguntar (una solicitud única o automatizada), continúa con tus valores predeterminados e incluye la especificación en tu mensaje final para que la persona pueda redirigir con precisión.

4. Construir en capas

Lee references/architecture.md antes de escribir código — comienza con su tabla "¿Esto necesita WebGL en absoluto?" — y references/techniques.md para cada efecto de la especificación.

Dónde va el código:

• Un sitio nuevo (página de aterrizaje, página de producto, cualquier página individual): node <skill-dir>/scripts/create-site.mjs <carpeta> crea un proyecto Next.js listo con el fondo de la casa, las fuentes y la configuración de lint; agrega escenas a él.
• Un sitio existente: trabaja en su proyecto y lee "Trabajar dentro de un sitio existente" en architecture.md primero.
• Un portafolio completo: comienza desde la plantilla (references/portfolio.md).

Luego construye cada escena en este orden, verificando después de cada capa:

1. Bloqueo — la sección fijada, la línea de tiempo de scroll con una ranura por tiempo, formas de marcador de posición y la trayectoria de cámara. scripts/new-scene.mjs <proyecto> <Nombre> --beats N genera este esqueleto, ya cableado (progreso del scroll → línea de tiempo compartida → cámara 3D y subtítulos DOM, fallback de movimiento reducido, pausa cuando está fuera de pantalla); agrega --no-canvas para efectos solo DOM. Desplázate por él: ¿los tiempos están en el orden y ritmo correctos?
2. Movimiento — los movimientos y transiciones reales, con sus easings y duraciones de la especificación. El tiempo es a lo que la gente reacciona más; hazlo bien antes de hacerlo bonito.
3. Aspecto — materiales, luz, color, brillo, partículas, fondo, tipografía.
4. Pulido — inclinación del puntero, deriva inactiva, pequeño movimiento secundario, encuadre móvil, movimiento reducido.

Ejecuta npm run lint junto con la compilación: las reglas de React detectan errores de mutación por cuadro antes de que se conviertan en errores sutiles.

5. Verificar contra la especificación

Compila (npm run build), ejecútalo y captura la pantalla de cada tiempo en su posición de scroll. Compara cada captura con la tabla de tiempos línea por línea: ¿ese objeto está ahí?, ¿la cámara está encuadrada como se describe?, ¿el texto está visible?, ¿el color es correcto? Corrige lo que no coincida antes de mostrarlo. Espera un segundo después de hacer scroll antes de cada captura de pantalla: las escenas se ajustan gradualmente. También verifica una ventana de tamaño de teléfono (375×812) y movimiento reducido. Si no tienes herramienta de navegador, di claramente que las escenas se construyeron pero no se inspeccionaron, y enumera qué verificar.

6. Refinar con lenguaje preciso

Cuando la persona reaccione ("se ve barato", "demasiado", "no es lo suficientemente dramático"), traduce los comentarios con scene-language.md de la misma manera que la solicitud original, propón el cambio específico ("ralentiza la inmersión del 8% al 14% del scroll y agrega una pausa de 0.3s antes de ella"), luego hazlo. Cambia una cosa a la vez cuando no estén seguros, para que puedan identificar qué ayudó.

Leer un video de referencia

node <skill-dir>/scripts/video-frames.mjs <video> --every 0.25 --out frames/

Necesita ffmpeg (el script explica cómo instalarlo si falta). Mira los fotogramas en orden y anota, por tramo de tiempo: qué hay en pantalla, qué se movió y cómo (dirección, velocidad, easing — ¿acelera, sobrepasa, se estabiliza?), la cámara (estática, push, órbita, movimiento), los cortes frente a movimientos continuos, y el color/luz. Esa lista es el primer borrador de la tabla de tiempos. Para momentos rápidos, vuelve a ejecutar con --every 0.04 solo en ese tramo (--from, --to).

No negociables

Estos provienen de fallos reales; cada uno tiene una razón en architecture.md.

• Cada escena tiene una versión de movimiento reducido (un diseño estático que aún muestra todo el contenido).
• WebGL se carga solo en el cliente y se pausa cuando su sección está fuera de pantalla o la pestaña está oculta.
• El texto 3D y DOM leen las mismas funciones de línea de tiempo, por lo que no pueden desincronizarse.
• Los valores vinculados al scroll dentro de secciones fijadas usan transformaciones de funciones, no matrices de rango.
• Brillo falso (halos aditivos), no bloom de postprocesamiento, a menos que la persona acepte el costo.
• Todo el contenido de la página es texto real y legible en el DOM, no solo horneado en lienzos.
• Nunca inventes hechos sobre una persona o producto en el texto; el texto de diseño está bien, las afirmaciones no. Los precios, especificaciones, fechas, estadísticas y premios que no te dieron van como [marcadores de posición] visibles.
• Cualquier cosa que se reproduzca por sí sola (una introducción al cargar) tiene un control de salto visible, y cada escena tiene un fallback sin WebGL (imagen de póster o diseño estático).
• En el sitio existente de alguien, cambia solo lo que el efecto necesita y di qué se movió.

Créditos a mantener

La plantilla acredita a su autor original y a las piezas de código abierto en las que se basa (React Bits para ColorBends y Magnet, la combinación tipográfica de dungyov.com). Mantén esos créditos al reutilizar esas partes.