- Hero con video
- Scroll animado
Qué hace especial
- Hero con video
- Scroll animado
- Carrusel
- Selector vertical de módulos en el hero
- Marquesinas y flujo de 7 etapas sobre WebGL
- Carrusel de beneficios, contadores y carrusel ovalado
- Secuencia fijada con GSAP
- Respeta prefers-reduced-motion
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 (5)
- Portada con selector vertical de módulos, marquesinas y flujo de 7 etapas sobre WebGL
- Carrusel de beneficios, contadores y carrusel ovalado
- Película de 1:04 con 5 capítulos y subtítulos en español
- Biblioteca de escenarios
- Tres fichas de escenario ilustrativo (fabricación metálica, ingeniería de precisión y fundición) con PDF
Qué puedes personalizar
- Textos de cada página con herramientas/editar-pagina.py (extraer y empaquetar)
- Imágenes de images/ conservando nombre y proporción
- Película: cortes y subtítulos; vídeos sin rótulos en fuentes-de-medios/
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 el paquete con README, REPRODUCCION, recreacion-spec.json y MANIFIESTO.json como referencia. Arranca el sitio con node herramientas/servidor.mjs y revísalo sin cambios antes de personalizar textos e imágenes.
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 con URLs limpias (incluye herramientas/servidor.mjs y vercel.json); no funciona abriendo el archivo directamente.
- Demostración de presentación: no es un ERP operativo, no tiene formularios ni backend y no integra datos reales.
- Empresas, personas y cifras ficticias o de ejemplo; «NODAL ERP» es un nombre de muestra.
- Empresa, blog, soporte, contacto, legales y redes muestran un aviso de demostración: añade tus páginas.
- El vídeo de fondo del hero no es un bucle perfecto: al reiniciar hace un fundido breve al primer fotograma.
- La voz de la entrevista no tiene revisión humana de pronunciación: algunas palabras pueden sonar imprecisas.
- No incluido: herramienta de IA (y sus créditos), dominio y hosting.
Tecnologías
- React
- HTML, CSS y JavaScript
- GSAP
- WebGL
Implementadas en el paquete que descargas.
HTML, CSS y JavaScript (páginas autocontenidas) · React 18.3.1 dentro de las páginas · GSAP 3.13 · 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
- Manrope (Google Fonts, SIL OFL 1.1, incluida)
Composición: Probado a 1440, 768 y 390 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 v0.5.6 (contenido del sitio 255f183f…): 5 páginas, vídeo de fondo en el hero con póster, fotografías con srcset, 4 retratos, película, teaser, PDF, logotipos y herramientas. Avisos en LICENCIAS-Y-AVISOS.md.
- Versión
- v0.5.6 · Publicado 11 nov 2026
- Versiones
- v0.5.6 · 2026-11-11 — NODAL 0.5.6: títulos y descripciones de página corregidos en la portada y en Escenarios (la pestaña ya no queda sin título). Diseño, medios y animaciones de 0.5.5 sin cambios (hero con vídeo de fondo; no es un bucle perfecto). Versión anterior 0.5.5 conservada.
- v0.5.5 · 2026-11-11 — NODAL 0.5.5: el hero pasa a vídeo de fondo (no es un bucle perfecto: fundido breve al reiniciar), tarjetas recortadas dentro del borde al pasar el cursor y botón de vídeo sin aro animado. Resto del diseño y animaciones sin cambios. Versión anterior 0.5.4 conservada.
- v0.5.4 · 2026-11-11 — NODAL 0.5.4: portada con nueva imagen de inspección en el hero y banner de planta con srcset, tarjetas sin banda. Resto del diseño y animaciones sin cambios. Versión anterior 0.5.3 conservada.
- v0.5.3 · 2026-11-11 — Primera versión en Arrmma: NODAL 0.5.3 con medios propios, película con capítulos y subtítulos, escenarios ilustrativos, nombres accesibles y espaciado de titulares corregidos. Diseño y animaciones sin cambios.