Immersive Landing Foundation
Base tecnica lista para construir la landing despues.
Esta fase deja el terreno listo para scroll suave, animacion avanzada, stage 3D, Theatre, carga futura de GLB y narrativa sticky sin fijar aun el diseno final ni las secciones definitivas.
App RouterTailwind TokensGSAP + ScrollTriggerLenis RootR3F + DreiTheatre ReadySoft Post FX
Current RouterSe mantiene App Router porque ya existe en el proyecto, es la opcion moderna de Next y encaja mejor con layouts, client boundaries y una arquitectura escalable.
Scroll RuntimeLenis controla el smooth scroll del root y ScrollTrigger queda registrado desde helpers dedicados para futuros timelines y pins.
3D RuntimeEl stage se carga de forma lazy en cliente, con DPR contenido, fallback visual y una escena minima preparada para crecer por modulos.
Section SystemLas futuras secciones ya tienen convencion de nombres, cues de escena y prefijos de assets sin crear aun la narrativa ni el contenido.
Sticky Storytelling Scaffold
El pinning narrativo y el parallax multicapa ya tienen estructura, no storytelling improvisado.
Esta pieza no define aun una seccion final. Solo valida el patron tecnico para futuras ventanas narrativas sticky, con layers, cues y timeline hooks listos para conectar escena y DOM.
Naming ConventionCada seccion futura usa el patron section-0N para ids, Section0NShell para componente y section0N para scene cue. Eso evita renombres caros cuando empecemos a construir.
Sticky ContractEl wrapper StickyStoryViewport deja resuelto el layout base para ventanas pinneadas y separa el shell narrativo del contenido que definiremos despues.
Asset RoutingLos modelos optimizados iran a public/models, las texturas a public/textures y las imagenes raster a public/images para mantener una ruta consistente y predecible.
section-01Section01Shell | cue `section01` | asset prefix `section-01`
section-02Section02Shell | cue `section02` | asset prefix `section-02`
section-03Section03Shell | cue `section03` | asset prefix `section-03`
section-04Section04Shell | cue `section04` | asset prefix `section-04`
section-05Section05Shell | cue `section05` | asset prefix `section-05`
section-06Section06Shell | cue `section06` | asset prefix `section-06`
Utilities Ready
Lo reusable ya quedo en su capa correcta.
ViewportBreakpoints y flags derivados en hooks y helpers.
Reduced MotionRespeta preferencias del usuario y reduce carga animada.
Lazy LoadingHook base listo para activar canvas, media y modulos pesados solo cuando convenga.
Scroll StateEstado global de progreso, direccion y seccion activa para sincronizar DOM y escena.
GSAP HelpersRegistro centralizado de ScrollTrigger y helpers para timelines futuros.
Performance Policy
La base ya piensa en GLB optimizados y carga progresiva.
Desktop FirstEl layout prioriza escritorio, pero conserva stacking, paddings y DPR contenidos para seguir siendo usable en mobile.
Scene BudgetCanvas lazy, postprocessing suave y sin escenas complejas aun. Solo la infraestructura necesaria para crecer con control.
Future GLBLa ruta de modelos ya esta separada y el slot 3D queda listo para recibir GLB optimizados sin rehacer la arquitectura.
Theatre TrackLa secuencia ya puede dirigir camara, luces y anchors. En la siguiente fase solo faltara authoring por seccion.