mukulmunda41-create/cinematic-3d-scroll

Desplazamiento cinematográfico y 3D

Una rutina breve para añadir una técnica cinematográfica a un sitio que ya existe. Es el paso cinematográfico del skill futuristic-web-design, empaquetado para que pueda ejecutarse solo.

Si ../futuristic-web-design/ se encuentra junto a este skill, lea references/cinematic-moves.md allí antes de escribir código de desplazamiento o 3D. Allí está el código de cada receta a continuación, el comando de recodificación y el proceso para una historia completa de desplazamiento 3D en vivo.

El presupuesto

Hay cinco técnicas: un héroe de vídeo de fondo, movimiento ligado al desplazamiento, una sección fijada, profundidad de paralaje y un objeto 3D en vivo. Utilice el héroe de vídeo de fondo y no más de dos de las otras cuatro. Una página que las use todas parece un reel de demostración, cansa al visitante y debilita cada efecto.

Antes de escribir código, recorra la página y pregunte en cada ubicación: ¿el movimiento aquí haría algo más claro, o haría sentir al visitante algo específico? Indique qué va a añadir, dónde, qué aporta y qué cuesta. Si el usuario pide más una vez que ya hay dos, sea claro sobre la compensación: peso añadido y menos impacto para los que ya están.

Barreras de seguridad para cada técnica

Nunca se permite que la decoración derribe la página.

• Movimiento reducido. Bajo prefers-reduced-motion: reduce no hay fijación, ni control por desplazamiento, ni descarga 3D. Muestre un diseño apilado normal o una imagen fija. Esto cubre también el desplazamiento suave y las transiciones, y el movimiento controlado por scripts necesita su propia comprobación matchMedia porque no obedece al CSS.
• Táctil. Verifique con el dedo al desplazarse: sin saltos, sin desbordamiento horizontal, sin trampas de desplazamiento.
• Pantallas pequeñas. Por debajo de 768px, sustituya el 3D por una imagen fija.
• Carga diferida. Cargue el código del efecto a medida que su sección se acerca al viewport, nunca durante la carga inicial.
• Fallo. Si el efecto falla o WebGL no está disponible, la imagen fija permanece y el resto de la página funciona.
• Cifras veraces. Un contador animado nunca debe detenerse en un valor falso. Anime la presentación, no los datos.
• Versiones. Consulte la documentación actual para GSAP, Three.js, React Three Fiber y Lenis y sus versiones compatibles. Pregunte antes de instalar cada paquete.

Recetas

Héroe de vídeo de fondo

• Un elemento video con autoplay, muted, loop, playsinline y un poster. Los teléfonos solo reproducen automáticamente vídeo que esté silenciado y en línea.
• El póster (hero-poster.webp) se pinta primero, para que no haya un fotograma vacío mientras se descarga hero.mp4.
• Para la legibilidad, coloque un degradado (scrim) solo debajo del bloque de texto. Oscurecer todo el clip anula el propósito de tenerlo. El titular debe ser legible en un par de segundos.
• Mantenga el texto alejado del sujeto focal del clip. Decida esto por separado para escritorio y teléfono.
• Con movimiento reducido, muestre el póster y omita la reproducción automática.

Historia de desplazamiento fijada (pinned)

• La sección se fija cuando su parte superior llega a la parte superior del viewport, avanza por unos tres tiempos (beats) a medida que el desplazamiento continúa, luego se suelta. Desplazarse hacia arriba lo reproduce hacia atrás.
• Cada tiempo es un número grande, un encabezado corto y una oración de contenido real.
• Constrúyalo con GSAP ScrollTrigger (pin y scrub) dentro de gsap.matchMedia() para que exista solo cuando el movimiento esté permitido y se limpie solo.
• Escriba el marcado como tiempos apilados simples. Sin script ejecutándose, ese marcado ya es la alternativa de reserva.
• La fijación es la técnica que más probablemente se comporte mal en teléfonos. Pida una prueba con el dedo en un dispositivo real, y dígalo si no se realizó ninguna.

Un acento 3D procedimental

• Un solo objeto pequeño, colocado una vez, junto al contenido de la sección. Construya la geometría en código a partir de primitivas, partiendo de una descripción verbal de la forma. Sin archivos de modelo descargados a menos que el usuario lo pida.
• Una rotación inactiva lenta más una ligera inclinación impulsada por el desplazamiento. Los materiales y la iluminación provienen del sistema de diseño, iluminados como una foto de estudio de producto.
• El contenedor comienza con una imagen fija del objeto. El lienzo lo reemplaza solo después de que el código 3D se haya cargado y montado.
• Cargue solo a 768px y más ancho, cuando el movimiento esté permitido y cuando la sección esté cerca del viewport. Pausar el renderizado mientras está fuera de pantalla y limite la relación de píxeles del dispositivo a 2.

Vídeo controlado por desplazamiento

• Un clip corto cuyo cabezal de reproducción sigue la posición del desplazamiento en ambas direcciones. Proporciona un efecto de "producto que se desmonta" por muchos menos bytes que el 3D en vivo.
• Recodifique primero para que cada fotograma sea un fotograma clave, con el audio eliminado y el clip recortado a los segundos que se mueven. Apunte a aproximadamente 1 MB o menos.
• Fije la sección y asigne el progreso del desplazamiento a video.currentTime. Marque el elemento como muted y playsinline, y nunca llame a play() en él.
• Revele llamadas de texto en secuencia desde el mismo valor de progreso. Suelte la fijación rápidamente.
• Con movimiento reducido, muestre el fotograma fijo más informativo.

Mida lo que costó

Después de añadir una técnica, compare el tamaño de transferencia antes y después e informe una tabla corta con los archivos tocados y los paquetes añadidos. Si algo es pesado, redúzcalo. Si sigue siendo pesado, retírelo.