automatorsplus/immersive-3d-site

¿Qué hace immersive-3d-site?

Una página donde el 3D está vivo, no es un video de 3D. El desplazamiento del visitante es la línea de tiempo y su cursor es una segunda cámara. El texto real está encima, legible y seleccionable; el lienzo WebGL está detrás.

Lo que entregas: una carpeta de compilación con BRIEF.md, un index.html real, los archivos del motor a su lado, y una tira de capturas de pantalla de escritorio, teléfono y movimiento reducido, más un informe breve de lo que verificaste y lo que no pudiste.

Qué hace que estas páginas fallen

La mayoría de los "sitios web 3D" son un solo truco para toda la página: un modelo giratorio con texto que se desvanece sobre él. Para la tercera sección, el visitante ya lo ha visto todo y deja de desplazarse. Cuatro reglas evitan eso:

1. Cada acto hace algo diferente. Usa al menos cuatro dispositivos de escena diferentes de references/scene-kit.md, nunca el mismo dos veces seguidas.
2. Un pico. Un acto es el momento que alguien le describe a un amigo. Tiene el mayor espacio de desplazamiento, la mejor escena y un acto más tranquilo antes para que impacte.
3. El 3D sirve al mensaje. Cada escena muestra algo verdadero sobre el tema: de qué está hecho, cómo funciona, qué se siente. Una escena que solo es decoración se elimina.
4. El texto permanece legible en cada posición de desplazamiento. Si una línea es difícil de leer sobre la escena en algún fotograma, la escena se mueve, no el texto.

Paso 0: El brief

Reutiliza lo que el usuario ya te haya dado. Si te dieron un brief completo o dijeron "usa tu criterio", escribe BRIEF.md tú mismo, márcalo como Escrito bajo delegación creativa, responde tú mismo cada pregunta a continuación con la voz de la marca, y continúa. De lo contrario, haz las ocho preguntas en un solo mensaje, como preguntas reales, nunca un menú inventado:

1. ¿Qué es, para quién es y qué deberían hacer al final? Una acción, una etiqueta usada en todas partes.
2. La sensación en tres a cinco palabras, más hasta tres referencias de cualquier cosa menos sitios web: una película, un juego, una portada de álbum, una tienda. Nombrar sitios web es cómo una página termina copiando uno.
3. El viaje en sus palabras: qué ve el visitante primero, después, al final.
4. Dónde debería ser tranquilo y dónde intenso.
5. Cómo debería sentirse alguien en cada etapa, y el momento que debería recordar. Ver references/feel.md.
6. Una cosa que este sitio debería hacer que ningún sitio que hayan visto haga. La semilla del movimiento característico. Insiste por una respuesta real; "ser memorable" no es una.
7. Qué tan lejos de premium-minimal: ofrece el rango en references/structures.md.
8. Un mundo continuo, o escenas separadas? La bifurcación estructural más grande, y su decisión. Además: qué ya tienen (logo, colores, fuentes, fotos de producto, modelos 3D como .glb).

Escribe BRIEF.md en la carpeta de compilación con sus respuestas en sus palabras, luego agrega:

• El viaje: cuatro a siete ritmos, cada uno un cambio en lo que el visitante sabe o siente.
• La curva de sensaciones: una línea por ritmo, la sensación y qué en pantalla la causa. No dos vecinos iguales.
• El pico: la oración que un visitante diría al respecto, y en qué acto vive.
• Es el sitio donde ___: lleno con una experiencia, no una técnica.
• El movimiento característico: una interacción que existe solo en este sitio, codificada en la página. Un dispositivo del kit con nuevos números no cuenta.
• Cualquier silencio deliberado, marcado, para que las verificaciones puedan distinguirlo de un desplazamiento muerto.

Paso 1: Estructura, registro, luego puntuación

Tres cosas, en este orden. Las tres antes de cualquier código.

Elige una estructura de references/structures.md: un mundo, capítulos, escenario de producto, exposición, patio de juegos, editorial con inserciones, transmisión. La navegación, la apertura y el cierre se derivan de ella. Escribe en BRIEF.md por qué esta y no las otras.

Ejecuta el registro de huellas. Lee FINGERPRINTS.md en la carpeta que contiene tus compilaciones (críalo si falta; comienza vacío). El plan debe diferir de cada fila existente en al menos cuatro de: estructura, navegación, dispositivo de héroe, secuencia de actos, cierre, movimiento característico. Si falla, cambia el plan, no el registro.

Puntúalo. Primero la curva de sensaciones, luego un dispositivo por ritmo, como tabla en BRIEF.md:

Ritmo	Acto	Sensación	Dispositivo	Extensión	Por qué este dispositivo
Reconocimiento	héroe	curiosidad	objeto de vidrio + dolly	2	El producto, vivo, antes de que se lea una palabra
Giro	morph	anticipación	morph de partículas	3	El ruido se convierte en una forma, se convierte en el nombre
Pico	raíl	asombro	cámara en raíl	3.5	Viajar a través de él dice que hay mucho aquí adentro
Prueba	explotar	confianza	vista explotada	2.5	Muestra las partes, que es la afirmación
Compromiso	cerrar	calma	espera tranquila	1.5	La página se detiene y espera el clic

Verificaciones antes de construir:

• Las prohibiciones de la estructura se cumplen.
• Cuatro o más familias de dispositivos de references/scene-kit.md, ninguna dos veces seguidas.
• No dos actos vecinos comparten una sensación.
• El pico tiene la mayor extensión por un margen claro, y el acto anterior es más tranquilo.
• El cierre resuelve y se mantiene en lugar de desvanecerse en un pie de página.
• Las extensiones están en alturas de pantalla. Una página cinematográfica tiene alrededor de 8 a 14; las páginas editoriales y de patio de juegos pueden ser más cortas. Nunca rellenes para alcanzar un número.

Paso 2: Construir

mkdir -p <build> && cp <skill>/engine/stage.js <skill>/engine/stage.css <build>/

Comienza desde templates/starter/index.html para la estructura (mapa de importación, lienzo, secciones, un script de módulo), y toma prestados los patrones de acto que puntuaste. Nunca envíes el starter ni su copia de Orbis. Cada página se escribe desde su propio brief.

Cómo funciona el motor (engine/stage.js, lee el comentario del encabezado):

• La página es una pila de <section data-act="nombre" data-span="2">. Cada una contiene un .frame que se queda pegado durante la duración de la sección.
• stage.act(name, { scene, camera, update(p, s), render(renderer, s), resize(w, h) }) registra una escena. p va de 0 a 1 a través del acto. s lleva time, dt, pointer (suavizado, -1 a 1), velocity (velocidad de desplazamiento), width, height, reduced, coarse.
• Se renderiza el acto que tiene el centro de la pantalla. Los actos que comparten un objeto scene se actualizan juntos, por lo que un solo mundo continuo es solo varios actos apuntando a la misma escena.
• Un acto necesita una extensión superior a 1 para que p se mueva. p se mide sobre la distancia que el marco permanece pegado, por lo que una extensión de exactamente 1 no tiene ninguna: p salta de 0 a 1 y cualquier cosa ligada a él nunca se muestra. Usa 1.25 o más.
• Cada sección obtiene --p como variable CSS, por lo que los encabezados pueden moverse en la misma línea de tiempo que el 3D.
• data-reveal en cualquier elemento lo desvanece al entrar; escalona con style="--i:2".
• Usa seg(p, a, b) para dividir un acto en ritmos y ease.inOut y amigos para darles forma.
• Sin WebGL: html.no-webgl muestra el .poster de cada acto. Dale a cada acto un póster (una imagen o un degradado).

Tema con los tokens en la parte superior de stage.css (lienzo, superficie, tinta, tinta-suave, acento, acento-tinta, dos fuentes). Nunca edites el motor para un proyecto; el comportamiento a medida va en el script de la página.

Three.js viene de una versión CDN fija en el mapa de importación ([email protected] en jsdelivr). Mantén la fijación. Si necesitas una versión más nueva, elige una que tenga al menos dos semanas y vuelve a ejecutar las verificaciones.

Lee references/design.md antes de escribir el marcado y references/performance.md antes de agregar la segunda escena.

Paso 3: Probar

cd <build> && npm i playwright-core          # una vez por carpeta de compilación; necesita Google Chrome instalado
node <skill>/scripts/serve.mjs --root . --port 4600 &
node <skill>/scripts/shoot.mjs --url http://localhost:4600 --out shots/desktop
node <skill>/scripts/shoot.mjs --url http://localhost:4600 --out shots/phone --width 390 --height 844 --touch
node <skill>/scripts/shoot.mjs --url http://localhost:4600 --out shots/reduced --reduced-motion --positions 0,1

El script desplaza cada acto a cinco posiciones, espera a que se estabilice el suavizado, captura cada una y escribe sheet.png. Falla en: errores de página, solicitudes fallidas, sin WebGL, un acto que no dibuja nada y desplazamiento lateral. Una aprobación significa que se ejecuta, no que sea bueno.

Luego abre cada sheet.png y mira. Para cada acto en cada posición: ¿se puede leer cada línea? ¿La escena muestra lo que dice el ritmo? En el teléfono, ¿algo está recortado, cubierto o es demasiado pequeño? ¿El pico parece el pico? ¿El cierre resuelve? Arregla, vuelve a capturar, vuelve a mirar.

Luego la verificación de sensaciones (references/feel.md): desplázala en frío, una palabra por acto para lo que sentiste, luego compara con la curva en BRIEF.md. Donde difieran, arregla la página.

Di claramente qué no se cubrió: Chrome sin cabeza dibuja WebGL en software, por lo que la frecuencia de fotogramas que informa no es la de un dispositivo real, y no puede decirte cómo se siente el desplazamiento en un teléfono real. Pide al usuario que lo abra en su teléfono antes de darlo por terminado.

Reglas duras

Nunca	En su lugar
Un dispositivo de escena para toda la página	Cuatro o más familias, ninguna dos veces seguidas
Texto horneado en una textura o imagen	HTML real encima del lienzo
Una flecha de desplazamiento, icono de ratón o "desplázate para explorar"	Nada. El héroe es suficiente
Contadores de sección como 01 / 05	Elimínalos
Copia centrada en cada acto	Varíala: izquierda, derecha, centro, dividida, superior, inferior
Una superposición oscura de pantalla completa para contraste	.scrim solo detrás del bloque de texto
Texto degradado, resplandor neón en el tipo	El peso y el tamaño hacen el énfasis
Números o estadísticas inventados	Solo cifras reales del usuario
Guiones largos en copia visible	Punto, coma, dos puntos
Cosas giratorias que nunca se detienen	El movimiento sigue al desplazamiento o puntero; el movimiento inactivo es lento y pequeño
Un renderizador WebGL nuevo por sección	Un lienzo, un renderizador, muchas escenas (el motor hace esto)
Enviar la página starter	Escribe la página desde su propio brief
Construir antes de que existan estructura, registro y puntuación	Paso 1, los tres
Dos picos, o ninguno	Uno, con más espacio y un acto tranquilo antes
Un plan que coincida con una compilación anterior en tres o más columnas del registro	Cambia el plan, nunca el registro
Llamarlo terminado sin el Paso 3	Ejecuta el Paso 3, mira las hojas, haz la verificación de sensaciones

Salida

La carpeta de compilación, luego un informe breve: la estructura y por qué, el resultado de la huella contra cada fila, el viaje, la curva de sensaciones y el pico, la tabla de puntuación, el movimiento característico, lo que shoot.mjs informó en las tres ejecuciones, lo que viste en las hojas y arreglaste, la verificación de sensaciones (intencionado frente a sentido), y lo que no pudiste verificar. Da la URL local. Luego agrega la fila de la compilación a FINGERPRINTS.md.