Nodal — глобальная edge-сеть для разработчиков

Лендинг вымышленного инфраструктурного продукта: деплой кода в 312 точках присутствия одной командой.

Фишка: полноэкранный hero с констелляцией на сыром WebGL — узлы сети живут и связываются линиями, курсор расталкивает их и подсвечивает ближайшие связи. Без Three.js и любых других библиотек: свои шейдеры, gl.LINES + gl.POINTS, отрисовка на GPU.

Стек

• Чистый HTML + CSS (кастомные свойства, BEM)
• Vanilla JS + WebGL (GLSL-шейдеры инлайном)
• Без внешних библиотек и сборки

Особенности

• WebGL-констелляция: симуляция узлов на CPU, отрисовка на GPU; курсор становится узлом сети и тянет связи к соседям, по рёбрам бегут импульсы-пакеты
• Экран загрузки: полёт сквозь звёзды на Canvas 2D (раз за сессию, с жёстким таймаутом-предохранителем и пропуском при prefers-reduced-motion)
• Traceroute-навигация: вертикальная трасса слева со скролл-спай, отражает прогресс и активный раздел
• «Электрические» ссылки: градиентный разряд-подчёркивание, отдельное состояние фокуса с клавиатуры
• Производительность: DPR ограничен до 2, число узлов считается от площади экрана (~45 на мобильном, ~130 на десктопе), анимация останавливается за пределами экрана и на скрытой вкладке
• Деградация: нет WebGL — секция остаётся с CSS-градиентом; prefers-reduced-motion — статичный кадр без пакетов и варпа
• Технический контент для dev-аудитории: метрики со счётчиком, quickstart с вкладками кода и копированием в буфер, список узлов сети с задержками
• SEO/GEO: JSON-LD (WebSite + SoftwareApplication + FAQPage), OG/Twitter-превью, robots.txt, sitemap.xml, llms.txt, страница 404
• Доступность: контраст WCAG AA в обеих темах, skip-link, aria-label, ARIA-tablist со стрелками, видимый focus
• Тёмная тема по умолчанию + светлая (переключатель, сохраняется в localStorage)
• Адаптивность 320 / 375 / 768 / 1024+
• Акцент: mint #00e5c3

Запуск

Открыть index.html в браузере — сборка не нужна.

Структура

nodal-landing/
  index.html
  404.html
  robots.txt · sitemap.xml · llms.txt
  src/css/styles.css
  src/js/app.js
  assets/icons/favicon.svg
  assets/og/og-image.svg · og-image.jpg

Примечание

Компания вымышленная, метрики иллюстративные. Форма работает в демо-режиме (без бэкенда) — это портфолио-проект.