Кейс
Сайт бренда орехов HelloNutz: 3D-упаковка и своя админка
Промо-сайт для B2B-продаж жареных орехов: интерактивная 3D-упаковка вместо фотостока и редактирование текстов прямо на странице — без разработчика.
Клиент
ООО «МэлРус-Инвест», бренд HelloNutz
Год
2026
Роль
Дизайн и арт-дирекция, Фронтенд-разработка, 3D и анимация, Админ-панель
Сайт
Задача
−82%
вес графики: 2,39 МБ → 0,44 МБ
8 → 1
начертаний шрифта в загрузке
3
вкуса в одной 3D-сцене
0 ₽
за CMS — редактор написан под проект
Технологии
Next.js
three.js / React Three Fiber
GSAP
Lenis
Node.js
nginx
01
Первый экран: 3D-упаковка вместо фотографии
Главный экран — не картинка, а сцена: жестяная банка собрана в 3D и вращается по мере прокрутки, вокруг летят орехи, фон перекрашивается под текущий вкус.
Сцена закреплена, а текст скроллится поверх неё — первый экран работает не одним кадром, а всей верхней третью страницы. Хореография завязана на один цикл анимации, поэтому прокрутка остаётся плавной.
Банка вращается и приближается по мере прокрутки
02
Три вкуса: смена этикетки прямо в сцене
Фисташка, арахис, кешью. Вместо трёх отдельных блоков — переключение внутри сцены: банка делает быстрый оборот, в середине которого подменяется текстура этикетки, а градиент фона перетекает в цвет нового вкуса.
Рядом показываем состав и КБЖУ — цифры, которые закупщики спрашивают первыми.
Смена вкуса: этикетка и цвет сцены меняются на лету
03
Один макет — три настроения
Каждый вкус получил свою палитру: салатовую, песочную и золотую. Вёрстка при этом одна — меняются только переменные цвета, поэтому добавить четвёртый вкус можно без переделки страницы.
04
Форматы упаковки под разные каналы продаж
Банка 100 г, дойпак 150 и 50 г, флоу-пак 50 г — у каждого формата свой канал: полка, маркетплейс, HoReCa.
Каждая карточка несёт вес, габариты и роль формата в линейке — закупщику этого достаточно, чтобы прикинуть поставку.
05
Своя админка: тексты правятся прямо на сайте
Вместо готовой CMS написали редактор под проект. Владелец включает режим правки и меняет текст прямо на странице — кликом по заголовку или абзацу, как в Тильде.
Тексты остаются в коде значениями по умолчанию, а отдельно хранятся только правки. Контент отдаётся сразу в HTML — это важно для поиска, и всегда можно вернуть исходную версию.
Инлайн-правка любых текстов на странице
SEO-панель: title, description, OG, индексация, счётчики
Загрузка картинок упаковок и превью для соцсетей
История изменений с откатом к прежней версии
06
Мобильная версия: та же сцена в кармане
3D-сцена работает и на телефоне: банка так же вращается и меняет вкус, а плотность рендера снижена, чтобы не греть батарею.
07
Скорость: графика легче в шесть раз
3D и десятки летающих орехов — тяжёлая история для загрузки. Пересобрали графику: перевели изображения в WebP и уменьшили до разумного размера, оставили одно начертание декоративного шрифта вместо восьми, ограничили плотность рендера сцены.
2,39 МБ → 0,44 МБ
вес графики после пересборки
54
изображения переведены в WebP
1
начертание шрифта вместо восьми
Вопросы
Что обычно спрашивают о таких проектах
Нужен такой же сайт для вашего бренда?
Расскажите о продукте — предложим решение, сроки и стоимость.
Подписаться на рассылку
Reut Art
Cookies
Мы используем файлы cookie для улучшения работы сайта, анализа трафика и персонализации контента. Нажимая «Принять», вы соглашаетесь с Cookie-политикой и обработкой данных согласно Политике конфиденциальности.