Oktet

Oktet vende hardware de networking, switches gestionables, routers, access points, fibra y PoE, como se debe vender el equipamiento de precisión: como un datasheet, no como “tech”. Quince rutas cubren un catálogo de producto filtrable con páginas de detalle, segmentos de solución, documentación de soporte, un blog de insights con perfiles de autor, un comparador de hasta tres equipos, un configurador de presupuesto en cinco pasos, about, contacto, legal y un 404 en personaje con LINK DOWN. El reflejo dark + neón + trazas de circuito está prohibido a propósito; un único naranja signal carga todo el sistema sobre skins de hormigón frío, gunmetal y cianotipo. El hero dibuja su propia topología de red al cargar, los paquetes recorren las aristas activas con MotionPathPlugin, y un Spec Rail pinned desplaza en horizontal el despiece del OS-2400 con callouts de puertos numerados por octetos.

Qué incluye

• 15 rutas, Inicio, Productos, Detalle de producto, Soluciones, Detalle de solución, Soporte, Artículo de doc, Insights, Post, About, Comparador, Presupuesto, Contacto, Legal, 404
• Hero de topología autodibujada, 8 nodos y 10 aristas hairline se dibujan solas vía stroke-dashoffset y luego pasan a live una a una
• Paquetes de color recorren en bucle las aristas activas con GSAP MotionPathPlugin alineado a los paths SVG reales
• Readout mono que avanza LINK ··· → NEGOTIATING → LINK ESTABLISHED · 10GbE sincronizado con la timeline del hero
• Spec Rail OS-2400 pinned, un despiece se desplaza en horizontal con callouts de puertos numerados por octetos en desktop, y lista apilada en táctil
• Comparador, selecciona hasta 3 productos y léelos spec a spec, luego manda la selección al formulario de presupuesto como bill of materials

La firma

El hero arranca una red delante de ti. Ocho nodos entran con un overshoot back.out, diez aristas hairline se dibujan solas siguiendo su propia longitud de path vía stroke-dashoffset, y un readout mono avanza de LINK ··· a NEGOTIATING y a LINK ESTABLISHED · 10GbE mientras cada arista y nodo pasa al estado live en naranja signal. Después, los paquetes recorren en bucle tres de las aristas SVG reales con GSAP MotionPathPlugin. Más abajo, el Spec Rail se queda pinned y desplaza en horizontal el despiece del OS-2400, señalando cada grupo de puertos por octeto.

Verlo en vivo

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