Vladyslav Didyk

DepoDart — Subsurface Intelligence

3D-сайт, который прокручиваешь как историю, и чувствуешь, как ИИ-модель для горной добычи работает под курсором.

DepoDart — Subsurface Intelligence

DepoDart — ИИ-компания, которая помогает горнодобывающим командам решать, где бурить. Это её сайт depodart.com, который я сделал в 2026 году: 3D-сайт с прокруткой на английском, французском и испанском, на Next.js 15, React 19 и three.js с собственными шейдерами GLSL.

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

Роль
Фронтенд- и 3D-разработчик
Сроки
2026
Стек
Next.js 15 (static export) · React 19 + TypeScript · three.js + R3F · Custom GLSL shaders · GSAP + ScrollTrigger · Lenis smooth scroll · Zustand · next-intl (EN / FR / ES) · Cloudflare Pages
Карты сокровищ — цветные слои поверх реального рельефа, показывающие, где минералы наиболее вероятны, с детализацией 10–25 метров по данным DepoDart.
Карты сокровищ — цветные слои поверх реального рельефа, показывающие, где минералы наиболее вероятны, с детализацией 10–25 метров по данным DepoDart.
Одна модель — каждый элемент: интерактивная периодическая таблица всего, что может предсказать одна модель.
Одна модель — каждый элемент: интерактивная периодическая таблица всего, что может предсказать одна модель.
Охват — светящийся глобус, который загорается регион за регионом данными съёмок, на которых училась ИИ.
Охват — светящийся глобус, который загорается регион за регионом данными съёмок, на которых училась ИИ.

Задача

Сделать невидимую модель ощутимой.

Что такое DepoDart.

DepoDart — ИИ-платформа для горнодобывающей отрасли. Она изучает многолетние данные геологоразведки — измерения, карты, старые записи бурения — и подсказывает команде, где бурить дальше. Задача: сделать сайт, на котором эту абстрактную идею можно по-настоящему почувствовать. Поэтому главная страница стала длинной историей с прокруткой, где каждая глава — своя живая 3D-сцена, а не скриншот в рамке.

Почему история.

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

Открывающая сцена — ландшафт, который показывает светящуюся тепловую сигнатуру везде, куда движется курсор.
Открывающая сцена — ландшафт, который показывает светящуюся тепловую сигнатуру везде, куда движется курсор.

История, которую она рассказывает

Добыча работает с неполной информацией.

Настоящая проблема, рассказанная прокруткой.

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

Аргумент DepoDart в четыре шага.

  • Не чёрный ящик — Каждый прогноз показывает данные, которые к нему привели, — видно, почему модель указывает именно туда.
  • Сырые данные на входе, ранжированные цели на выходе — Любой формат, любая система координат — приведены к одной общей сетке за часы, а не за месяцы.
  • Чёткая локальная детализация — Карты вероятности от широкого регионального обзора до детализации 10–25 метров на собственных данных компании.
  • 37,8 млн км² — Модели учились на открытых данных съёмок по Канаде, США, Бразилии, Австралии, Новой Зеландии и Северной Европе — около четверти суши Земли.
«Разведка работает с неполной информацией». Глава о проблеме на фоне медленно вращающегося глобуса.
«Разведка работает с неполной информацией». Глава о проблеме на фоне медленно вращающегося глобуса.

Охват

Обучено на четверти суши Земли.

37,8 миллиона квадратных километров.

DepoDart заявляет, что его модели учились на многолетних открытых данных съёмок по Канаде, США, Бразилии, Австралии, Новой Зеландии и Северной Европе — 37,8 млн км², около четверти суши Земли, больше чем две площади России. На сайте это светящийся каркасный глобус, который загорается регион за регионом по мере прокрутки.

Как это устроено

Каждая глава — отдельная 3D-сцена.

Независимые сцены, тщательная очистка.

Вместо одного большого 3D-движка на всю страницу каждая глава запускает свой и полностью выключает его, когда вы прокручиваете дальше. Эта очистка важна: 3D-графика быстро съедает память, и без неё такая длинная страница еле ползла бы. Здесь каждая сцена возвращает память сразу, как только уходит с экрана.

Нагрузка на видеокарту, а не на сеть.

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

Глава о данных — «Сырые данные на входе. Ранжированные цели на выходе». Четыре вида данных съёмок питают одну модель.
Глава о данных — «Сырые данные на входе. Ранжированные цели на выходе». Четыре вида данных съёмок питают одну модель.

Движение

Всё движется в одном ритме.

Одни часы для всего движения.

Плавная прокрутка, закреплённые главы и анимации идут по одним общим часам. Без этого разные системы понемногу расходятся, и страница ощущается слегка не так. С ними каждая сцена встаёт ровно туда, куда говорит прокрутка, в каждом кадре.

Уменьшение движения — всерьёз.

Для посетителей, у которых в системе включена настройка «уменьшить движение», сайт по-настоящему успокаивается: прокрутка становится мгновенной, каждая сцена сразу переходит в конечное состояние, собственный курсор уходит, а самая тяжёлая 3D-сцена просто не запускается. История по-прежнему читается сверху вниз — только без фейерверков.

«Расширяем возможности прогноза на ваших данных». Спокойные текстовые главы разбивают 3D-сцены.
«Расширяем возможности прогноза на ваших данных». Спокойные текстовые главы разбивают 3D-сцены.

Языки

Английский, французский и испанский — всегда синхронно.

Три языка без расхождений.

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

Следующий проект: KeyShortcut — каталог сочетаний клавиш