Oktet

Oktet sells networking hardware, managed switches, routers, access points, fiber and PoE, the way precision equipment should be sold: as a datasheet, not as “tech”. Fifteen routes cover a filterable product catalog with detail pages, solution segments, support docs, an insights blog with author profiles, a three-way compare tool, a five-step quote builder, about, contact, legal and an in-character LINK DOWN 404. The dark-neon-circuit reflex is deliberately banned; a single charged signal orange carries the whole system across cool concrete, gunmetal and cyanotype skins. The hero draws its own network topology on load, packets travel the live edges via MotionPathPlugin, and a pinned Spec Rail scrolls an exploded OS-2400 teardown sideways with octet-numbered port callouts.

What’s inside

• 15 routes, Home, Products, Product detail, Solutions, Solution detail, Support, Doc article, Insights, Insight post, About, Compare, Quote, Contact, Legal, 404
• Self-drawing topology hero, 8 nodes and 10 hairline edges draw themselves via stroke-dashoffset, then flip live one by one
• Accent packets loop along the live edges using GSAP MotionPathPlugin aligned to the real SVG paths
• Mono status readout ticks LINK ··· → NEGOTIATING → LINK ESTABLISHED · 10GbE in sync with the hero timeline
• Pinned OS-2400 Spec Rail, an exploded teardown scrolls sideways with octet-numbered port callouts on desktop, stacked list on touch
• Compare tool, select up to 3 products and read them spec by spec, then send the selection to the quote form as a bill of materials

The signature

The hero boots a network in front of you. Eight nodes pop in with a back.out overshoot, ten hairline edges draw themselves along their own path length via stroke-dashoffset, and a mono readout ticks from LINK ··· to NEGOTIATING to LINK ESTABLISHED · 10GbE as each edge and node flips to the signal-orange live state. Accent packets then loop endlessly along three of the real SVG edges using GSAP MotionPathPlugin. Further down, the Spec Rail pins and scrolls an exploded OS-2400 teardown sideways, calling out each port group by octet.

See it live

The demo is public: https://fpsjago.github.io/oktet/. 15 pages, built with Astro 6, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.