Карточка, которая светится под любым углом: как устроен Holo Card Studio

Есть жанр детского восторга, который взрослые обычно списывают на ностальгию: голографические вкладыши из девяностых, те самые карточки, которые крутишь в руках, а на них вспыхивает радужная плёнка. Проект Holo Card Studio возвращает этот эффект, но убирает из уравнения типографию, фольгу и склад — вместо них человек, который просто произносит фразу вслух Codex-агенту.

По сути это не отдельное приложение, а skill — навык, который подключается в директорию ~/.codex/skills/ и после этого понимает естественный запрос вроде «сделай киберпанк-карточку с механическим котом, неоновый дождь, номер 007». Дальше начинается конвейер: агент рисует четыре слоя изображения — фон, основной объект, контурную графику и текстовый слой, — собирает из них сцену в Blender с параллаксом, лазерными полосами и звёздным шумом, а затем пересобирает ту же композицию в браузере на Three.js. Автор README настаивает на важной детали: страница в браузере использует ту же формулу UV-развёртки, что и сцена в Blender, поэтому то, что видно в 3D-редакторе, один в один повторяется на веб-странице — никакого расхождения между «превью для разработчика» и «версией для показа».

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

Отдельно стоит сказать про инфраструктуру: Blender не нужно ставить руками. Конвейер сам скачивает официальную портативную версию, кладёт её в tools/ внутри проекта и проверяет через SHA-256, не трогая остальную систему. Это снимает с пользователя привычную боль любого 3D-инструмента — версии, зависимости, конфликт с уже установленным софтом.

Что можно сделать этим инструментом

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

Другой явно продуманный кейс — карточки персонажей для инди-игр. Одна фраза на персонажа, и можно партиями получить воина, мага, разбойника, босса — каждая карточка со своим card-config.json, где редкость, номер и характеристики хранятся отдельно от картинки. Изменил конфиг — прогнал конвейер заново — карточка обновилась без пересборки с нуля. Авторы прямо описывают, как это использовать перед релизом: тизер с «предпоказом дропа» карт, на который игроки реагируют острее, чем на скриншоты.

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

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

Но READМЕ прямо указывает и на более техническую аудиторию — дизайнеров, которым интересна не готовая карточка, а то, как устроена анимация. card.blend — не демо-файл, а полноценный редактируемый Blender-проект с именованными на китайском группами узлов («масштаб», «глубина», «эффект параллакса»), где лазерные полосы, звёздный шум и свечение контура — отдельные материальные ноды, которые можно разбирать и настраивать вручную. Для тех, кто хочет понять механику голографического эффекта изнутри, это готовый учебный материал, а не чёрный ящик.

В итоге на выходе пользователь получает не одну картинку, а связку из пяти вещей: ссылку на локальную страницу с перетаскиванием и переворотом карточки, файл card.blend для дальнейшей доводки в Blender, папку assets с четырьмя слоями изображения по отдельности, конфигурационный JSON с текстовыми параметрами и готовый рендер для публикации. Это тот редкий случай, когда генеративный инструмент не заканчивается картинкой, а оставляет после себя рабочий, редактируемый проект — ровно так, как и заявлено в README: результат принадлежит проекту пользователя, а сам скилл — только код и текстовая логика конвейера.