3D-презентации: семь колод, которые открываются по ссылке и ведут живую камеру

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

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

Семь колод и страница-витрина, 78 слайдов на русском: футбольный клуб «Аврора» (спонсорство, 11 слайдов), pitch-дек NEXORA для раунда A (12), запуск кольца NOVA Ring (11), жилая башня NORD 81 (11), космическая компания ORBITA (11), фестиваль PULSE 2027 (11) и геномная клиника HELIX (11). У каждой колоды своя сцена, палитра, шрифты и один из семи 3D-переходов, подобранный под бренд: спринт со скоростными штрихами, куб, пролёт сквозь слайд, книжная страница, орбита, глитч-флип и мягкий подъём.

Внутри сцен: ночной стадион примерно на 43 000 кресел и болельщиков, башня высотой 324 метра, которая на слайде о стройке вырастает этаж за этажом, кольцо, которое разбирается на шесть подписанных деталей, спутник, раскрывающий панели над Землёй из шейдеров, сцена и толпа в ритме 124 BPM и глянцевая спираль ДНК. При открытии слайда цифры считаются, графики растут, а 3D-подписи привязываются к частям сцены.

Все семь колод работают на одном движке. Каждый слайд — HTML-текст поверх canvas, поэтому он читается и выделяется, и у каждого слайда есть станция камеры в сцене: переход к следующему — это пролёт камеры. Управление следует привычкам презентаций: стрелки, пробел, колесо мыши и свайп; клавиша O открывает 3D-обзор всех слайдов, F — полный экран, A — автопоказ, и у каждого слайда своя ссылка. На телефоне текст уходит в прокручиваемую панель под сценой.

Сцены собраны целиком кодом, без 3D-моделей, фото и видео: инстансинг для повторяющихся объектов вроде кресел и окон, bloom как единственный постэффект и процедурные текстуры. Каждая колода — статичная папка с относительными адресами, поэтому работает по любому пути, а скрипт превращает каждую колоду в PDF 16:9 для рассылки. Демо закрыто от индексации (noindex, nofollow).

Набор работает по адресу tarasovvitalii.com/demos/presentations/: витрина, семь колод, 78 слайдов, семь PDF-версий и семь 3D-переходов, собран 28 сентября 2026 года. В тот же день мы считали кадры через requestAnimationFrame по три секунды на двух слайдах каждой колоды в headless Chrome с ANGLE Metal на MacBook с Apple M5 в окне 1600 × 1000 при Retina-масштабе: все 14 замеров — 60 fps (60,1–60,2). Каждая колода загружает 235–252 КБ JavaScript в gzip вместе с three.js и GSAP; вся сборка — 27 МБ, из них 14 МБ — PDF.

На живом адресе в тот же день Lighthouse дал витрине производительность 92 на телефоне и 99 на компьютере, а колоде NORD 81 — 86 и 98 (медианы трёх прогонов), лучшие практики — 100 на обеих страницах. В каждой колоде один H1, и каждая помещается в экран 390 px; витрина — единственная страница, которая на телефоне прокручивается вбок, и разбор ниже ставит это первым в списке исправлений.

3D-презентации — концепт, который VITON¹³ сделала, чтобы показать формат, а не заказной проект. Футбольный клуб, стартап, кольцо, башня, космическая компания, фестиваль и клиника вымышлены, как и их цифры, цены, люди и телефоны; колоды ничего не доказывают о привлечённых раундах, проданных спонсорствах или квартирах.

Внутри нет фото и видео — всё нарисовано кодом. Частота кадров измерена на одной машине со свежим чипом Apple в headless Chrome и ничего не говорит о старых телефонах и офисных ноутбуках; Lighthouse измеряет загрузку, а не плавность сцены. Колоды только на русском и специально закрыты от поиска.

Как проверить портфолио веб-студии →