Cinematic Web — sitios personales y SaaS animados de alto nivel

Web Cinematográfica

Trata la animación web de alta gama como un sistema de desarrollo creativo, no como un montón de fragmentos de animación.

Convierte solicitudes vagas como "hazlo cinematográfico" en:

1. Dirección artística
2. Estrategia de assets
3. Lenguaje de movimiento
4. Coreografía de desplazamiento
5. Plan de renderizado y post-procesamiento
6. Presupuesto de rendimiento y accesibilidad
7. Implementación
8. Bucle de revisión

Flujo de trabajo

1. Inspecciona el stack existente de la aplicación, el modelo de enrutamiento, los límites de renderizado y el sistema de estilos.
2. Identifica si el proyecto es solo DOM, basado en Motion, basado en GSAP, basado en R3F/WebGL, basado en Spline, basado en Rive/Lottie o mixto.
3. Crea o actualiza los tokens de movimiento compartidos antes de agregar nuevo comportamiento de animación.
4. Redacta un breve de dirección artística a menos que el usuario solicite explícitamente una implementación rápida.
5. Elige la tubería más pequeña que pueda lograr el concepto con los assets disponibles.
6. Usa coreografía exacta: distancia de desplazamiento, longitud de pin, valor de scrub, etiquetas, valores de escalonamiento, posiciones de cámara, valores de materiales, easing y constantes de resorte.
7. Instrumenta antes de pulir con marcadores, superposiciones de rendimiento, constantes ajustables, capturas de pantalla o comprobaciones de presupuesto.
8. Proporciona alternativas de movimiento reducido y bajo consumo para cada animación insignia.
9. Verifica el comportamiento en escritorio, móvil y movimiento reducido antes de dar por terminado el trabajo.

Matriz de decisión

• Usa CSS para efectos pequeños de hover, foco y transformación/opacidad.
• Usa Motion para React para UI basada en estado, transiciones de layout, elementos compartidos, gestos y microinteracciones.
• Usa GSAP ScrollTrigger para historias fijas, líneas de tiempo largas y coreografía de desplazamiento precisa.
• Usa Lenis cuando la sensación de desplazamiento y la sincronización WebGL/DOM sean parte de la experiencia.
• Usa R3F/drei cuando el héroe sea una escena 3D real o una composición de shaders.
• Usa Spline cuando una escena 3D interactiva propiedad de un diseñador sea la fuente de verdad.
• Usa Rive para animación vectorial interactiva y máquinas de estado.
• Usa video, secuencias de imágenes o medios estáticos cuando WebGL en tiempo real supere el presupuesto de rendimiento.

Estándar de calidad

Un resultado no es aceptable si:

• Usa easing predeterminado en todas partes.
• Aplica bloom global a toda la escena sin selección.
• Anima propiedades de layout cuando transform/opacidad funcionarían.
• Envía un GLB pesado sin inspección ni guía de compresión.
• No tiene una ruta de movimiento reducido.
• Depende de un componente cliente gigante sin carga diferida.
• Se ve impresionante solo en la máquina del desarrollador.

Tokens de movimiento

Antes de la implementación, crea un sistema de movimiento compartido con:

• Eases
• Springs
• Duraciones
• Escalonamientos
• Valores de scrub de desplazamiento
• Ratios de paralaje
• Sustituciones de movimiento reducido

Usa examples/recipes/motion-tokens.ts como punto de partida.

Referencias para cargar según sea necesario

• Dirección artística y recopilación: references/creative-direction.md
• Análisis de referencias sin copiar sitios famosos: references/reference-analysis.md
• Easing, springs, masa y coreografía: references/motion-language.md
• Sistemas de desplazamiento GSAP + Lenis: references/scroll-choreography.md
• Arquitectura de escenas R3F: references/r3f-webgl-scenes.md
• Bloom, DoF, aberración cromática, viñeta, shaders y mapeo de tonos: references/postprocessing-shaders.md
• Transferencia de Blender, Spline, Rive y glTF: references/asset-pipeline.md
• Selección de stack: references/stack-decision-matrix.md
• Presupuestos de rendimiento y alternativas móviles: references/performance-budgets.md
• Movimiento reducido y accesibilidad: references/accessibility-reduced-motion.md
• Revisión final: references/qa-rubric.md

Requisitos de salida

Al implementar, informa:

1. Archivos cambiados
2. Tokens de movimiento agregados o reutilizados
3. Resumen de coreografía con números
4. Suposiciones de assets
5. Riesgos de rendimiento y mitigaciones
6. Comportamiento de movimiento reducido
7. Cómo ejecutar y verificar