Тендеры и лиды
Информация
Информационные технологии и интернет
Корпоративный сайт
Август 2026
«гИИк» проверяет, умеет ли человек работать с нейросетями. Кандидат три часа решает задачи в пяти областях: текст, данные, код, изображения, поиск. Модель выбирает сам из шести доступных, на выходе получает сертификат с разбором по заданиям. Проект идёт при поддержке Президентского фонда культурных инициатив, МИСИС, Фонда содействия инновациям и Yandex Cloud.
Продукт вырос из запроса на рынке: вакансий с требованием навыков нейросетей за год стало больше на 170%, а подтвердить такой навык нечем - в резюме можно написать что угодно.
Дальше начинается наша часть. Экзамен по промпт-инжинирингу понятен айтишникам и больше никому, поэтому «гИИк» сделал выставку «Культурный CODE» в ЦСИ М’АРС. Лендинг выставки должен остановить человека без интереса к нейросетям и довести его до конкурса и до самой выставки.
Клиент пришёл с методикой, презентацией и статичными макетами. Технического задания на лендинг не было, движения в макетах тоже. Наша зона: придумать и собрать весь моушн, нарисовать для него графику и вывести страницу на Lighthouse выше 80 при анимации в каждой секции.
Последнее условие и есть главный конфликт проекта. Движение на весь экран и быстрая загрузка тянут в разные стороны.
Спроектировали моушн для восьми секций лендинга и страницы конкурса.
Нарисовали в Photoshop графику для сцен: кадры затухания точки, зацикленный видеоградиент, постеры-заглушки.
Написали четыре сцены на Canvas 2D без библиотек анимации: граф, планета, радар, коллаж «История ИИ».
Собрали фронтенд без потери скорости: Performance 97–99 на десктопе.
Сделали движение отключаемым и вынесли содержимое из вёрстки.
Макет отвечает на вопрос, что где лежит. На вопрос, в каком порядке человек это узнаёт, он ответа не даёт.
Для выставки порядок и есть задача. Человек пришёл по ссылке из соцсетей, про промпт-инжиниринг не знает ничего и за несколько секунд решает, остаться или закрыть вкладку. Статичный экран он оценивает целиком и сразу, разворачивающийся на глазах — досматривает.
Поэтому для каждой секции мы решали отдельно, что она говорит первым и сколько времени у неё на это есть. Из этих решений выросли четыре сцены. Подсказок к ним в макете не было.
Часть движения кодом не получить, её нужно нарисовать.
Точки на радаре и планете гаснут сменой кадров: 44 кадра от яркой точки до пустоты, нарисованные в Photoshop и собранные в атлас по 16 пикселей на кадр. Сглаживание выключено, поэтому точка остаётся пиксельной. Один атлас на две сцены — это одна картинка в загрузке вместо тысяч отрисовок круга.
Фон первого экрана — видеоградиент, собранный «туда и обратно»: за прямым проходом идёт обратный, поэтому цикл повторяется без рывка. К ролику отдельно подготовлены постеры-заглушки.
За градиентом стоит граф из пяти колец и шести линий. Образ читается без подписи: узлы и связи между ними.
Граф не выкладывается на экран готовым. Он растёт: из корневого кольца выходит линия, на её конце распускается следующее кольцо, от него идут следующие. Каждый шаг стартует чуть раньше конца предыдущего, поэтому волна идёт без пауз. Рёбра, замыкающие граф в кольцо, дорисовываются последними.
Дальше граф живёт. Кольца дрейфуют по своим траекториям, расталкивают друг друга на сближении и отодвигаются от курсора — мягко, с инерцией, без прилипания к мыши. Страница отвечает на движение руки, и человек задерживается поводить курсором ещё.
На айфоне в экономии заряда Safari запрещает автопроигрывание даже беззвучному видео: фон замирает, первый экран выглядит сломанным. Запрет снимается только жестом человека, поэтому после отказа страница ждёт касание, клик или прокрутку и запускает ролик тогда. До этого показывает кадр из середины ролика: застывшая середина читается как задуманная композиция, застывший старт — как поломка.
Вторая крупная сцена — история искусственного интеллекта: слева медленно крутится планета, вокруг разложены группы архивных снимков, от каждой к планете тянется линия.
Планета собрана из 5200 точек с одинаковой плотностью на экваторе и у полюсов. Остаются попавшие на материки, границы материков рваные. Оборот занимает 42 секунды: движение читается фоном и не мешает тексту.
Сфера набирает точки, две группы снимков уже на местах.
Снимки появляются стопкой и через мгновение разъезжаются треугольником: передний крупнее и ниже, остальные уходят вверх по бокам. При наведении увеличивается вся группа целиком, поэтому она читается как один объект.
Линия от группы к планете не прибита к сфере намертво. Она цепляется за проплывающую мимо точку поверхности, держится за неё, а после её ухода перецепляется на следующую. Со стороны это живая связь между архивным снимком и планетой.
Сцена целиком: от двух правых групп линии дотянуты до точек на поверхности сферы.
Одна группа вблизи, после разъезда.
Вся сцена идёт с параллаксом: планета и группы снимков сдвигаются при прокрутке каждая на свою глубину.
Блок «Выставка в цифрах» стоит на поле радара. Луч обходит круг за 2,7 секунды и зажигает пройденные точки. Гаснут они неодновременно: каждая двенадцатая тускнеет вдвое быстрее соседей, и поле остаётся зернистым, как послед на настоящем радаре.
Луч работает с загрузки страницы, поэтому к секции человек прокручивается уже к развернувшейся картине.
Цифры рядом прокручиваются от нуля и мягко упираются в конечное значение. Формат чисел взят из макета без изменений.
В зависимостях лендинга только React, React DOM и линтер. Всё движение написано на штатных средствах браузера: Canvas 2D, requestAnimationFrame, CSS-переходы.
Это расчёт. Библиотеки анимации хорошо делают одну вещь: плавно переводят элемент из состояния А в состояние Б. Такой задачи здесь почти нет. Граф прорастает по своему расписанию, радар гасит точки с разбросом, планета ищет, за какую точку зацепить линию. Перехода между состояниями нет, есть система с пересчётом на каждом кадре. Библиотеку пришлось бы обходить, и она всё равно осталась бы в весе страницы.
Побочная выгода для клиента: у страницы нет внешних зависимостей. Значит, нечему устареть и нечего обновлять вслед за чужими релизами.
Планка была Lighthouse выше 80, и четыре холста с постоянным пересчётом обычно съедают её целиком. Что мы сделали.
Не считаем невидимое. У каждой сцены один цикл отрисовки, и он останавливается на выходе сцены из кадра. Планета, вернувшись, продолжает с того же места.
Ограничили плотность пикселей двойкой: иначе на плотных экранах холст раздувается вчетверо по площади, и кадр обходится настолько же дороже.
Ограничили шаг времени сверху. Браузер отдаёт паузу неактивной вкладки одним шагом, и без ограничения пружины колец разлетаются.
Отложили тяжёлое. Видеофон грузится после отрисовки текста, иначе он тянет на себя канал и задерживает первый экран. До запуска на его месте стоит постер.
Не трогаем раскладку. В лентах команды, кураторов и жюри активная карточка увеличивается, соседи разъезжаются через трансформацию. Раскладка не пересчитывается, поэтому лента не дёргается под курсором.
Анимация на весь экран легко превращается в проблему: на слабом телефоне страница греется, а часть людей от движения укачивает.
Поэтому каждая сцена умеет показать себя одним кадром. При системной настройке «меньше движения» граф рисуется собранным, радар - полем в середине оборота, планета - неподвижной сферой. Страница остаётся цельной и перестаёт двигаться.
Всё содержимое обеих страниц - цифры выставки, описания залов, состав команды, кураторов и жюри, условия конкурса - вынесено из вёрстки в два файла. Программа и состав участников менялись до последнего дня, и теперь каждая правка обходится без разработчика.
Замер Lighthouse 13.4.1, сентябрь 2026, гиик.рф.
Performance 97–99 на десктопе при четырёх сценах с постоянной отрисовкой.
Performance 88–97 на мобильных.
Best Practices — 100 из 100. SEO — 100 из 100.
Accessibility — 96 из 100.
Крупнейшая отрисовка контента 0,6–1,0 секунды на десктопе, время блокировки основного потока 0–10 миллисекунд, сдвиг вёрстки 0.
Нулевой сдвиг вёрстки при движении в каждой секции и почти нулевая блокировка потока при четырёх холстах - это и есть результат фронтенд-части.
У проекта появилась точка входа для людей без интереса к нейросетям. Страница объясняет тему не текстом, а движением на экране: граф прорастает связями, архивные снимки тянутся к планете, под цифрами крутится радар.
Движение отключается там, где мешает: по системной настройке «меньше движения» и на слабых устройствах. Содержимое клиент правит без разработчика. Внешних библиотек анимации в проекте нет, поэтому чинить страницу из-за чужих обновлений не придётся.
