Ironforge

Sobre Este Template

Ironforge es una plantilla industrial oscura para constructoras, ingeniería civil y contratistas de infraestructura. Seis páginas cubren inicio, catálogo de proyectos, casos de estudio individuales con panel de specs (cliente, ubicación, año, valor), servicios, una página de nosotros con el equipo y un formulario estructurado de consulta de proyecto. La pieza central es un showcase horizontal fijado: la página se fija y seis paneles se desplazan lateralmente mientras un cable SVG de blueprint se dibuja solo por el track vía strokeDashoffset sobre una guía punteada, un contador 01/06 avanza en la esquina y el contenido de cada panel se anima por separado con containerAnimation de ScrollTrigger. El hero apila IRONFORGE en vertical letra por letra con una entrada escalonada, junto a una foto de grúa que se descubre con un wipe de clip-path mientras la imagen contraescala. Incluye tres skins de color, contadores animados, marquee de clientes que reacciona a la velocidad del scroll y 25 fotografías.

Firma

La sección de proyectos destacados pinea el viewport y lanza seis paneles a pantalla completa desplazándose lateralmente. Debajo, un cable SVG de blueprint se dibuja solo a lo largo de todo el track sobre una guía punteada — el strokeDashoffset está mapeado directamente al progreso del scroll — mientras un contador 01/06 se actualiza en la esquina y un nodo pulsante viaja con cada panel. El copy y la imagen de cada panel se animan con su propio ScrollTrigger usando containerAnimation, así que el reel se siente como un recorrido de obra y no como un carrusel.

Características

• 6 páginas — Inicio, Proyectos, Detalle de proyecto, Servicios, Nosotros, Contacto
• Showcase horizontal fijado — 6 paneles de proyecto se desplazan lateralmente con anticipatePin e invalidateOnRefresh
• Cable SVG de blueprint que se dibuja solo — strokeDashoffset recorre el track sobre una guía punteada que hace glow al completar el reel
• Contador de paneles 01/06 en vivo, con reveal de copy y parallax de imagen por panel vía containerAnimation de ScrollTrigger
• Hero de letras apiladas — IRONFORGE sube letra por letra con stagger de 0.08s junto a una foto de grúa descubierta con wipe clip-path inset y contraescala
• Salida face-off del hero — la foto se recorta a inset(40%) y se disuelve en un timeline con scrub 1.5 al hacer scroll
• Contadores animados — 47 años, 312 proyectos, 18 países, $14.2B, con fallback estático para reduced-motion
• 3 skins de color vía data-skin — Steel Night (default), Blueprint navy y Concrete Day claro
• Marquee de clientes reactivo a la velocidad — 12 contratistas, el timeScale acelera hasta 4x según el scroll
• 4 colecciones de contenido — 6 proyectos en Markdown más servicios, equipo y testimonios con loaders JSON tipados
• Páginas de detalle con cover a 70vh, tarjeta de specs superpuesta (cliente, ubicación, año, valor) y cuerpo en Markdown
• Grilla bento de servicios con reveals escalonados de blur a nítido, más 6 testimonios en columnas CSS masonry que entran escalonados al hacer scroll
• Nav que se autooculta — desaparece al bajar, vuelve al subir, con glass blur pasados los 50px
• Capa de atmósfera industrial — grano SVG fractalNoise, grilla blueprint, edge fades y tipografía gigante en outline
• 25 fotografías incluidas — proyectos, servicios, retratos del equipo y texturas de hormigón y acero — más @astrojs/sitemap, Open Graph, Twitter cards y URLs canónicas
• Smooth scroll con Lenis + Astro View Transitions con teardown completo de ScrollTrigger al navegar

Despliegue