Constellation — интерактивное звёздное поле на WebGL
Живое звёздное поле без зависимостей и сборки: точки-звёзды медленно дрейфуют, близкие пары соединяются светящимися нитями, а курсор ведёт себя как тёплая рука — связи рядом с ним разгораются, звёзды мягко расступаются.
- Период
- 2026
Ключевые показатели проекта
- вес виджета, 12 КБ в gzip
- 39 КБ
- зависимостей и шагов сборки
- 0
- звёзд на квадрат 100×100 px — плотность постоянна на любом экране
- 8
Состав работ по проекту
Услуги
- WebGL без зависимостей
- Поле звёзд с нитями-связями
- Реакция на курсор
- Оптимизация под мобильные
О проекте
Интерактивный фон для сайта обычно значит «движок + модель + мегабайты». Здесь хотелось обратного: эффект, который выглядит дорого, но весит как картинка, вставляется одной строкой и не требует ни сборки, ни библиотек.
Подробнее о проекте
Ход работы
- поле собрано парой шейдеров на WebGL — без three.js, без файлов моделей;
- звёзды дрейфуют по собственным траекториям и мерцают с разными фазами — движение не выглядит механическим;
- связи считаются на CPU по порогу дистанции: пар на кадр немного, и это дёшево даже на телефоне;
- курсор — «тёплая рука»: нити рядом с ним разгораются, ближние звёзды плавно отступают;
- защита производительности: потолок devicePixelRatio и площади буфера, пауза рендера вне экрана, уважение системного «уменьшить движение».
Результат
Один файл на 37 КБ (12 КБ в gzip), ноль зависимостей и ноль шагов сборки. Живое поле в шапке этой страницы — это он и есть: тот же код, который можно положить в любой сайт.
Есть продукция, которую нужно визуализировать?
Средний бюджет проекта — от 30 000 ₽.
Небольшие отдельные задачи оцениваются индивидуально.