Визуальный бар
Интерактивные рецепты коктейлей: «готовишь» напиток скроллом
Выбираешь коктейль — и листаешь страницу: бутылки поднимаются, наклоняются и наливают ингредиенты в стакан, скролл назад отматывает всё обратно. Вся посуда процедурная (LatheGeometry), без внешних 3D-ассетов. Два стиля: реализм с преломлением стекла и Cycles-задником и мультяшный toon-шейдинг в духе Гибли.
Как это работает
Рецепт разложен на шаги, а шаги привязаны к прогрессу прокрутки: пролистал четверть страницы — налита четверть коктейля. Анимация написана как чистая функция от этого прогресса, поэтому пауза посреди шага, прокрутка назад и любая скорость листания работают сами собой, без отдельной обработки каждого случая.
Что под капотом
Сцена собрана на three.js. Бокалы, бутылки и шейкер — процедурная геометрия вращения (LatheGeometry), то есть форма задаётся профилем-кривой прямо в коде, а не импортируется готовой моделью. Внешних 3D-ассетов в проекте нет вообще. Доступны два визуальных режима: реалистичный — с преломлением стекла и фоном, отрендеренным в Blender Cycles, и мультяшный — с toon-шейдингом в духе студии Гибли.
Что дальше
Каталог рецептов устроен так, что новый коктейль добавляется обычным объектом с описанием ингредиентов и шагов — трогать код сцены не нужно. Собрано за три дня с Claude Code.
Анимация — чистая функция прогресса скролла, поэтому пауза, реверс и любая скорость работают сами собой. Фото-боке на заднике — кадр этой же сцены, отрендеренный Blender Cycles. Новый коктейль добавляется простым объектом в каталоге.
<a href="https://vibecoded.ru/products/cocktails"> <img src="https://vibecoded.ru/badge.svg" alt="запущено на vibecoded.ru" width="200" height="44"> </a>
Похожие запуски
- ClaudeLimitsЛимиты Claude в меню-баре macOS — три числа вместо похода в настройки
- Sorting VisualizerШесть сортировок, анимированных рядом с кодом на Go, который их выполняет
- Волнорезmp3 в вертикальное видео с волной, обложкой и субтитрами — одной командой