Геймифицированный сайт | Календарь ТЕХНОНИКОЛЬ 2026

Главное о кейсе

Корпорация ТЕХНОНИКОЛЬ – ведущий международный производитель строительных материалов – обратилась с задачей создать геймифицированный сайт как центральный элемент кампании «Календарь ТЕХНОНИКОЛЬ». Требовалось не просто интерактивное решение, а полноценное игровое приключение с высокой вовлечённостью, новой механикой и органичной интеграцией календаря как финальной награды. Мы разработали сайт в формате пустынного фэнтези «Страж песков»: продумали сценарий на 30 страниц, создали 10 атмосферных локаций (города, рынки, дюны, храмы), 13 персонажей, более 200 реплик диалогов. Внутри – 6 мини-игр, поддерживающих динамику и удержание. Атмосферу усиливают оригинальная музыка, видеопролог и эпилог. Получение календаря встроено в сюжет как логичное завершение пути. Результат: десятки тысяч пользователей вовлечены в прохождение, высокий уровень удержания и интереса к бренду.

Как проект изменил жизнь пользователей

Мы усилили вовлечение пользователей, предложив им не просто сайт, а полноценное игровое приключение. Пользователь погружается в интерактивный мир, проходит сюжет, исследует локации и с интересом движется к финалу, где получает реальную награду – физический календарь.

Бизнес-задача и ее решение

Цель:
• сформировать полноценное игровое приключение с высоким уровнем вовлечения;
• органично встроить механику получения календаря как финальную награду;
• вывести формат на новый уровень — предложить новую игровую механику и пользовательский опыт, отличающийся от предыдущих проектов.

Решение:
Мы разработали геймифицированный сайт с элементами интерактивного нарратива, где техническая реализация стала основой стабильного и быстрого пользовательского опыта, а визуальная часть — полноценной вселенной, в которую хочется погружаться.

Ключевое решение – новая механика перемещения: бесшовный горизонтальный скролл, в котором каждая локация представляет собой единое пространство, протяжённое на несколько экранов, а переходы между локациями происходят плавно и незаметно. Это создаёт ощущение непрерывного путешествия без разрывов между сценами.

С точки зрения архитектуры мы сознательно отказались от шаблонных решений и реализовали гибридный подход:
• статический фронтенд для скорости и стабильности;

• компонентная структура (в том числе на vue. js для мини-игр) для гибкости и управляемости логики;

• оптимизация под все устройства без потери качества визуала.

Что было реализовано:
• разработали оригинальную механику бесшовного перемещения;

• придумали сюжет и мифологию мира;

• спроектировали структуру и логику прохождения;

• написали сценарий и более 200 диалогов;

• создали 10 полноценных локаций с глубокой проработкой;

• разработали 13 персонажей на основе реальных прототипов;

• реализовали 6 мини-игр разных жанров (кликер, раннер, мемо, сортер, пазл);

• реализовали озвучку персонажей;

• разработали музыкальное сопровождение для локаций и мини-игр;

• создали главный саундтрек для использования в игре и промо;

• создали два кинематографичных тизера (пролог и эпилог), усиливающих погружение и завершающих историю.

Проект реализовывался в плотной связке с командой клиента: решения быстро обсуждались, тестировались и дорабатывались, что позволило довести продукт до высокого уровня качества.

Крафт (мастерство), реализация, технические детали

Ядро сценария — чистый стек:
• Vanilla JavaScript (ES6+), CSS3 и семантический HTML5 — основа игрового сценария. Это позволило минимизировать накладные расходы, исключить зависимости от тяжёлых фреймворков и обеспечить максимальную предсказуемость выполнения кода.
• Gulp 5 в качестве сборщика: кастомизированный пайплайн для оптимизации ассетов, минификации, инлайнинга критических стилей и управления версиями ресурсов.

Для мини-игр интерактивные модули – там, где это действительно нужно:
• Мини-игры между локациями реализованы на Vue.js в изолированном режиме. Такой точечный подход позволил использовать реактивность и компонентную модель только в зонах высокой интерактивности, не перегружая основное приложение.
• Бесшовная интеграция Vue-виджетов в статическое ядро через продуманный API-слой и управление состоянием на уровне событий.

Производительность как основной приоритет.
Учитывая насыщенность проекта графикой высокого разрешения, оптимизация стала не просто задачей, а философией разработки.

Стратегия работы с изображениями:
• Мультиформатная доставка: автоматическая генерация и сервинг изображений в форматах JPG / PNG / WebP / AVIF с фолбэком по поддержке браузером.
• Retina-поддержка: набор @2x-изображений для дисплеев с высокой плотностью пикселей без потери чёткости.
• Адаптивная загрузка: и srcset в сочетании с JS-детекцией возможностей устройства для выбора оптимального ресурса «на лету».

Анимации и интерфейс — максимум CSS, минимум JS:
• Все переходы, трансформации и визуальные эффекты реализованы на аппаратно-ускоренных CSS-свойствах (transform, opacity, will-change).
• JavaScript подключается только для сложной бизнес-логики и управления состоянием игры, что снижает нагрузку на главный поток и предотвращает «подвисания» при прокрутке и анимации.
• Использование CSS Containment и content-visibility для изоляции тяжёлых секций и ускорения перерисовки.

Интеллектуальная загрузка ресурсов:
• Реализовали многоуровневую систему предзагрузки и ленивой инициализации, которая обеспечивает быстрый отклик интерфейса при минимальном весе страницы.
• Ключевые принципы — приоритетная загрузка первого экрана с отложенной инициализацией второстепенных скриптов, постепенное обогащение интерфейса с учётом устройства и сети, фоновая предзагрузка следующих сцен без задержек и кэширование с версионированием для мгновенной повторной загрузки.

Модульность и поддерживаемость кода:
• Проект спроектирован с расчётом на долгосрочное развитие и командную работу: код разделён на независимые модули, благодаря чему изменения в одном месте не затрагивают остальную систему и не приводят к побочным эффектам.

Универсальная совместимость и деплой:
Одно из ключевых требований – проект должен работать везде, где есть браузер.
• Проект спроектирован как полностью статичное решение без серверных зависимостей — он запускается в любом современном браузере и может быть размещён на любом хостинге, поддерживающем отдачу статических файлов. Это обеспечивает максимальную универсальность и простоту деплоя.
• Функциональность адаптируется под возможности устройства и браузера: от современных десктопов до мобильных устройств с ограниченной производительностью.
• Отсутствие серверной логики снижает потенциальные риски, а весь код проходит оптимизацию и статическую проверку перед деплоем.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

У клиента уже был опыт реализации подобных проектов, поэтому повторение существующих решений не рассматривалось, нужно было предложить принципиально новый формат взаимодействия пользователя с игровым миром.

1) ПРОВЕЛИ СЕРИЮ РАБОЧИХ СЕССИЙ

Проанализировали ограничения предыдущих механик: разрывность сцен, экраны с переходами, потерю вовлечения между этапами. Это позволило нам прийти к новому решению игровой механики — бесшовное горизонтальное перемещение в формате интерактивной визуальной новеллы, где:

Игровой мир представляет собой единое пространство без деления на отдельные экраны.
Пользователь перемещается по локациям через горизонтальный скролл.
Сцены, диалоги и игровые элементы интегрированы в поток и не требуют отдельных загрузок или переключений.
Переходы между локациями происходят незаметно для пользователя.
Такая реализация позволила устранить разрывы в восприятии, повысить вовлечение и создать эффект непрерывного путешествия внутри игрового мира. На момент разработки подобный подход не использовался в предыдущих проектах клиента и стал ключевым отличием решения.

2) ПРИДУМАЛИ СЮЖЕТНУЮ ЛИНИЮ

На этапе концепции мы проработали несколько вариантов сеттинга и историй. В результате совместно с заказчиком, вдохновленные фильмом «Дюна», выбрали направление пустынного фэнтези – мир песков, древних сил и скрытых артефактов. По сюжету игрок становится Избранным, которому предстоит пройти через локации этого мира, выполнить миссию и восстановить жизнь на планете, когда-то утратившей свой жизненный источник – Кристалл.

3) РАЗРАБОТАЛИ СЦЕНАРИЙ НА 30 ЛИСТОВ

В сценарии мы детально спроектировали:
• Путь игрока от начала до финала.
• Последовательность локаций и их роль в раскрытии сюжета.
• Персонажей и их функции в повествовании.
• Логику переходов между сценами.
• Точки интеграции игровых механик (мини-игр) в сценарий.
Отдельное внимание уделили тому, чтобы игровые задания не воспринимались как отдельные вставки, а органично продолжали историю и усиливали вовлечение.

4) ПРОРАБОТАЛИ 200 ДИАЛОГОВ

К написанию диалогов перешли только после полной проработки сценария и всей логики игры. Это позволило встроить реплики в уже выверенную логику повествования.

Ключевые требования к диалогам:
• Простота и быстрая считываемость.
• Понятная передача смысла и навигации по игре.
• Сохранение темпа прохождения без перегрузки текстом.
Работа над текстом была тщательной: мы многократно переписывали, сокращали и уточняли реплики, выверяя каждую формулировку. Важно было сохранить смысл и логику истории, а также подготовить текст к другому этапу — озвучке, где речь должна звучать естественно и живо.

5) РАЗРАБОТАЛИ 10 УНИКАЛЬНЫХ ЛОКАЦИЙ

Основная сложность заключалась в формате игры: локации должны были быть протяжёнными на несколько экранов и логично продолжаться за пределами видимой области монитора. Это требовало точной подгонки всех элементов и продуманной композиции без «разрывов» и визуальных несостыковок.

Каждая локация создавалась как сложная многослойная сцена.

Элементы генерировались и отбирались по частям – архитектура, окружение, детали.
Далее вручную собирались в единую композицию.
Выстраивалась перспектива и глубина сцены.
Производилась точная стыковка элементов для бесшовного перехода.
Сцена приводилась к единому свету, цвету и стилю.
Основная работа над локациями сводилась к ручной проработке. Нейросети использовались как инструмент для генерации базовых элементов, но финальный результат формировался за счёт детальной сборки и доработки в графических редакторах – Иллюстраторе, Фотошопе, Фигме.

Сгенерировали для локаций более 6 000 изображений.

Параллельно была проведена масштабная работа по настройке нейросетевых инструментов:
• Обучили и откалибровали модели под нужный стиль.
• Добились стабильной генерации без артефактов и «шума».
• Контролировали детализацию архитектуры и повторяемость визуального языка между сценами.
В результате были созданы локации с выраженной глубиной и перспективой, они вовлекают, побуждают рассматривать детали и создают пространство, в которое хочется «зайти».

6) РАЗРАБОТАЛИ 13 ПЕРСОНАЖЕЙ ПО ПРОТОТИПУ РЕАЛЬНЫХ ЛЮДЕЙ

В готовые локации интегрировали персонажей – наставника и девушек-хранительниц, которые сопровождают игрока, дают подсказки и ведут его по сюжету. Образы создавались на основе реальных прототипов, поэтому одной из задач было добиться максимального сходства при сохранении художественной выразительности.

Для каждого персонажа проработали:
• Внешность.
• Пластику и позирование.
• Одежду и стилистику костюмов.
• Аксессуары.

Дополнительно адаптировали под окружение:
• Выравнивали по цвету и свету сцены.
• Учитывали фактуры и материалы локаций.
• Интегрировали в перспективу и глубину кадра.
Это позволило сделать персонажей частью среды, а не отдельными визуальными элементами.

С генерациями образов для девушек было не всё так просто. По задумке наряды должны были быть выразительными и местами достаточно откровенными, чтобы подчеркнуть красоту девушек и атмосферу мира. Но ограничения нейросетей по генерации контента не всегда позволяли получать нужный результат целиком, поэтому:

Нейросети использовались для генерации отдельных фрагментов.
Далее элементы собирались по частям.
Финальный образ дорабатывался вручную в Фотошопе, Фигме для достижения точности и качества.

За время работы над персонажами с помощью нейросетевых инструментов было сгенерировано более 5 000 изображений.

7) РАЗРАБОТАЛИ 6 МИНИ-ИГР С РАЗНЫМИ ИГРОВЫМИ МЕХАНИКАМИ

Ключевая задача была в том, чтобы удержать баланс: с одной стороны — вовлечь игрока и разнообразить прохождение, с другой — не перегрузить его сложными механиками и не «сломать» темп истории. Поэтому мы сознательно выбрали простые и интуитивно понятные форматы: кликер, раннер, мемо, сортер и пазл — такие, в которые можно включиться за несколько секунд без обучения.

Мини-игры проектировались как часть нарратива:
• Каждая механика привязана к конкретной локации.
• Игровые действия логически продолжают сюжет.
• Вход в мини-игру и выход из неё происходят без разрывов в восприятии.
• Для сохранения целостности мира каждая мини-игра:

• Наследует визуальный стиль локации.
• Использует элементы окружения (объекты, цвета, атмосфера).
• Адаптируется под общий свет, глубину и композицию сцены.
• Мини-игры встроены в систему прогресса:

За прохождение игрок получает осколки Кристалла.
Каждый этап открывает новые локации.
Механики поддерживают движение по сюжету и усиливают мотивацию к прохождению.

8) ОЗВУЧИЛИ 200 ДИАЛОГОВ И НАПИСАЛИ ГЛАВНЫЙ САУНДТРЕК К ИГРЕ

Процесс озвучки персонажей требовал высокой точности:
• Необходимо было сохранить естественность речи (акценты, паузы, ударения).
• Избежать «синтетического» звучания.
• Адаптировать реплики под темп сцен и взаимодействие игрока.

Для этого:
• Короткие фразы разбивались на отдельные смысловые части.
• Каждая часть озвучивалась отдельно.
• Финальные реплики собирались вручную в цельные аудиодорожки.
Такой подход позволил добиться контролируемого качества и сохранить живую подачу речи.

Для персонажа-наставника реализовали отдельный подход
• Обучили голосовую модель на основе интервью реального человека.
• Добились уникального тембра и характерной интонации.
• Усилили узнаваемость и «живость» персонажа.

В рамках проекта:
• Записано и интегрировано более 200 реплик.
• Выстроена система подачи диалогов с учётом темпа игры и сценария.
• Обеспечена синхронизация речи с визуалом и интерфейсом.
• Разработали музыкальное сопровождение и написали главный саундтрек к игре.

Сначала определили общее музыкальное направление, которое поддерживает атмосферу мира и не перетягивает внимание на себя. Фоновую музыку для локаций создавали с помощью нейросетевых инструментов: добивались баланса между динамикой и ненавязчивостью, чтобы треки усиливали эмоции, но не мешали восприятию сюжета и игрового процесса.

В процессе работы над музыкой родилась идея сделать полноценный главный саундтрек к игре — отдельную композицию, которую заказчик сможет использовать в промо. Мы разработали его и в итоге даже встроили в саму игру: он звучит в начале и в финале.

Для мини-игр также разработано 6 разных музыкальных композиций:
• Динамичные треки – для активных механик.
• Более спокойные – для размеренных сценариев.
• Вся музыка органично вписывается в игру – поддерживает атмосферу и ритм, не нарушает целостность восприятия.

9) РАЗРАБОТАЛИ 2 КОРОТКОМЕТРАЖНЫХ ВИДЕО — ПРОЛОГ И ЭПИЛОГ.

Отдельной фишкой проекта стали видео-тизеры. Такого формата не было в предыдущих играх Технониколь, и задача стояла амбициозная: усилить погружение за счет роликов и добавить ощущение кинематографичности, не выбиваясь из общего стиля игры.

Мы подошли к этому как к полноценной продакшн-задаче.
Для каждого видео разработали сценарий, прописали текст и покадрово разложили историю — с учётом ритма, смены планов, реплик и драматургии:

Сначала сгенерировали базовые визуальные кадры с помощью нейросетевых инструментов.
• Вручную доработали цвет, свет, детали, композицию.
• Привели кадры к единому стилю и атмосфере.
• «Оживили» сцены с помощью нейросетевых инструментов.
Ключевая сложность — интеграция всех элементов в единый видеоряд. Необходимо было:
• Синхронизировать визуал, закадровый голос, субтитры и музыку.
• Выравнять темп и ритм сцен.
• Соблюсти читабельность субтитров и таймингов реплик.
• Поддержать согласованно эмоциональной динамики (музыка + визуал + голос).
В результате пролог и эпилог работают как полноценные короткометражные видео, которые задают тон в начале, погружают в мир и логично завершают весь игровой опыт, оставляя ощущение завершённой истории.

Прочая информация о кейсе

У нас получилась не просто игра в браузере. Этот проект — демонстрация того, как глубокая проработка архитектуры, фанатичная оптимизация и уважение к пользователю позволяют создать продукт, который:

• Работает плавно даже на слабых устройствах.
• Загружается мгновенно благодаря умной стратегии ресурсов.
• Легко поддерживается и масштабируется благодаря чистой структуре кода.
• Запускается где угодно — от локального сервера до простого хостинга.
• Сохраняет визуальное качество на любых экранах, включая 4K и Retina.

Скриншоты

Комментарий заказчика

Каждый год мы тщательно ищем команду, которая сможет разработать такой проект под ключ, и в этот раз вы не просто выполнили задачу — вы создали настоящий шедевр. Ребята придумали крутую историю и концепт с нуля, полностью отрисовали всё в потрясающем стиле с использованием нейросетей. Игра получилась иммерсивной и захватывающей: озвучка и музыка, которые вы тоже создали, добавляют атмосферы и заставляют проходить игру снова и снова!

Особо хочу отметить вашу оперативность — на каждый наш запрос реагировали молниеносно, дорабатывали без лишних вопросов и всегда на шаг впереди. В этом году проект превзошёл все наши ожидания: от визуала до интерактива всё на высоте, плюс обратная связь от пользователей, которые написали множество сообщений о том, насколько классная игра вышла в этом году.

Спасибо всей команде за профессионализм, креатив и партнёрский подход! Мы 100% готовы сотрудничать дальше и рекомендуем OnePage всем, кто хочет топовый результат. Вы — настоящие мастера своего дела!