Lumbre NorteSello regional
- Scroll animado
- Escenas 3D
Nuevo
Qué hace especial
- Scroll animado
- Escenas 3D
- Scroll suave con Locomotive Scroll 5 (Lenis) sincronizado con GSAP ScrollTrigger
- Sousafón GLB con three.js: giro ligado al scroll, lanzamiento y escala 0,5 → 1 → 0,4, desplazamiento hacia cada arco
- Titulares con SplitText: palabras y letras con máscara (1,6 s, 75 ms / 35 ms de escalonado)
- Relato recolocado palabra a palabra para abrir el hueco del modelo
- Arcos con revelado en cortina (0,9 s) y parallax de capas
- Cierre fijado de 380 vh: paneles, manos, titular en dos capas y pies de foto
- prefers-reduced-motion: sin transiciones de texto ni cortinas; cierre de 120 vh
Qué incluye
- Prompt para recrear y personalizar el diseño con IA.
- Código y archivos del sitio: imágenes, fuentes y licencias.
- Demo interactiva e instrucciones.
- Uso en sitios propios y proyectos finales de clientes.
Secciones y pantallas de la demo (6)
- Hero con tres planos ilustrados, «Aún resuena.» y sousafón 3D que gira con el scroll
- Titular de presentación «Marcado por el tiempo. Hecho para sonar.»
- Relato que se abre alrededor del modelo, con frases en caligrafía
- Capítulo «El origen»: arco con taller en tres capas
- Capítulo «El regreso»: arco con plaza en tres capas
- Cierre «Volvió a sonar.» con paneles que se abren y manos que se separan
Qué puedes personalizar
- Textos del hero, titular, relato, capítulos y cierre (index.html)
- Enlaces de navegación (hoy sin destino)
- Ilustraciones de los planos y arcos, conservando proporción y transparencias
Cómo empezar
- Copia el prompt y descarga los archivos.
- Llévalos a tu herramienta de IA y pide los cambios: marca, textos e imágenes.
- Revisa el resultado y publícalo en tu dominio.
Descarga el proyecto y copia el prompt: tu herramienta de IA trabaja sobre sitio/ con REPRODUCCION.md, recreacion-spec.json y las capturas como referencia. Sirve sitio/ con un servidor estático y ejecútalo sin cambios antes de personalizar textos.
El resultado depende de tu herramienta de IA y de los cambios que hagas. La demo muestra la dirección visual.
Detalles técnicos y requisitos
Requisitos
- Servidor estático (por ejemplo npx serve o python3 -m http.server); no funciona abriendo el archivo directamente.
- Navegador con WebGL para el modelo 3D.
- Relato y personajes ficticios; Esencia, Historia, Relatos y Contacto no tienen destino; sin formularios, sonido ni servicios conectados.
- No incluido: herramienta de IA (y sus créditos), dominio y hosting.
Tecnologías
- HTML, CSS y JavaScript
- Three.js
- GSAP
- Lenis
- WebGL
- 3D
Implementadas en el paquete que descargas.
HTML, CSS y JavaScript sin build · GSAP 3.13 (ScrollTrigger, SplitText) · Locomotive Scroll 5 (Lenis) · three.js 0.170 (WebGL)
Herramientas de IA sugeridas
ClaudeCodexCursor
Compatibles con las instrucciones del diseño; no es una prueba registrada.
Compatibilidad probada: Sin prueba registrada todavía.
Paleta y tipografía
#000000#ffffff
- Newsreader variable 300 (titulares y relato, incluida)
- Inter Tight 400/500 (navegación y pies, incluida)
- Pinyon Script 400 (frases caligráficas, incluida)
Composición: Probado a 1440, 768 y 390 px; composición de una columna por debajo de 768 px
Licencia y versiones
Úsalo en sitios propios y en proyectos finales de clientes, incluido uso comercial. No revendas ni redistribuyas el prompt, los archivos ni el sitio como plantilla. Leer la licencia
Procedencia: Paquete v1.0.0: código final del Piloto 13 con 13 ilustraciones, modelo GLB del sousafón, fuentes y librerías en local. Avisos en LICENCIAS-Y-AVISOS.md.
- Versión
- v1.0.0 · Publicado 10 nov 2026