Continuity

Continuity es una plantilla B2B para proveedores de infraestructura de red y hardware de seguridad, cableado estructurado, fibra, conectores, racks, switching gestionado, CCTV y control de acceso. Catorce plantillas de página cubren un catálogo de 20 productos con filtros por categoría y fichas técnicas completas, cuatro verticales de soluciones, casos de éxito, insights, nosotros, contacto y un formulario de solicitud de ficha técnica. La firma es el Live Signal Pulse: una cabeza de brasa recorre un cable SVG vertical por el borde izquierdo mientras haces scroll, energizando cada nodo de sección que atraviesa y funcionando a la vez como índice de secciones. Una secuencia fijada con ScrollTrigger despieza un cable Cat6A en sus cuatro capas constructivas etiquetadas, un campo de señal en canvas enlaza nodos a la deriva hacia el cursor, y un carrito de cotización en localStorage permite acumular SKUs y enviar un mensaje de WhatsApp prellenado, sin checkout ni pasarela de pago. Papel blueprint cálido por defecto, con un contra-registro oscuro Equipment Room para la sección de campo.

Qué incluye

• 14 plantillas de página, Inicio, Catálogo, Ficha técnica (PDP), Soluciones, Detalle de Solución, Casos, Caso, Insights, Post, Nosotros, Contacto, Solicitud, Style Guide, 404
• Rail Live Signal Pulse, una cabeza de brasa recorre un cable SVG vertical según tu posición de scroll y enciende cada nodo en rojo al pasar; el mismo rail funciona como nav de secciones con Lenis scrollTo
• Sección transversal de cable fijada, un timeline de ScrollTrigger con scrub separa un cable Cat6A en 4 capas etiquetadas (cubierta LSZH, foil aluminio-mylar, cobre sólido 23 AWG, núcleo conductor) con callouts escalonados
• Carrito de cotización por WhatsApp, drawer con localStorage y control de cantidades que arma un mensaje de WhatsApp prellenado; sin checkout ni pasarela que configurar
• Catálogo de 20 productos con filtros de categoría client-side, Cabling, Connectors, Fiber, Switching, Surveillance, Access, Networking
• Fichas técnicas de producto con tabla de especificaciones tabulada y un cajetín de plano (SKU / CATEGORY / STANDARD / SHEET / SCALE / REV)

La firma

Un único pulso de brasa recorre un cable SVG vertical por el borde izquierdo de la página, impulsado directamente por la posición de scroll en un loop de requestAnimationFrame. Cada nodo de sección que alcanza pasa de piedra a rojo de señal con un glow de drop-shadow, y el índice etiquetado a su lado se pone en bold al mismo ritmo, así el rail es a la vez la animación firma y navegación de secciones real. Se oculta en punteros coarse y con reduced motion, aterrizando en un estado estático totalmente energizado.

Verlo en vivo

La demo es pública: https://fpsjago.github.io/continuity/. 14 páginas, hecha con Astro 6, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.