Сайт бренда орехов HelloNutz: 3D-упаковка и своя админка
Промо-сайт для B2B-продаж жареных орехов: интерактивная 3D-упаковка вместо фотостока и редактирование текстов прямо на странице — без разработчика.
У производителя жареных орехов не было сайта, который можно показать сети или дистрибьютору: продукт продавали по прайсу в мессенджерах.
Нужна была витрина, которая объясняет вкусы и форматы упаковки, собирает заявки от партнёров и не выглядит как шаблон из конструктора.
Отдельное требование — менять тексты без разработчика: состав, описания и условия для партнёров правятся регулярно.
−82%
вес графики: 2,39 МБ → 0,44 МБ
8 → 1
начертаний шрифта в загрузке
3
вкуса в одной 3D-сцене
0 ₽
за CMS — редактор написан под проект
Первый экран: 3D-упаковка вместо фотографии
Главный экран — не картинка, а сцена: жестяная банка собрана в 3D и вращается по мере прокрутки, вокруг летят орехи, фон перекрашивается под текущий вкус.
Сцена закреплена, а текст скроллится поверх неё — первый экран работает не одним кадром, а всей верхней третью страницы. Хореография завязана на один цикл анимации, поэтому прокрутка остаётся плавной.
Три вкуса: смена этикетки прямо в сцене
Фисташка, арахис, кешью. Вместо трёх отдельных блоков — переключение внутри сцены: банка делает быстрый оборот, в середине которого подменяется текстура этикетки, а градиент фона перетекает в цвет нового вкуса.
Рядом показываем состав и КБЖУ — цифры, которые закупщики спрашивают первыми.
Один макет — три настроения
Форматы упаковки под разные каналы продаж
Банка 100 г, дойпак 150 и 50 г, флоу-пак 50 г — у каждого формата свой канал: полка, маркетплейс, HoReCa.
Каждая карточка несёт вес, габариты и роль формата в линейке — закупщику этого достаточно, чтобы прикинуть поставку.
Своя админка: тексты правятся прямо на сайте
Вместо готовой CMS написали редактор под проект. Владелец включает режим правки и меняет текст прямо на странице — кликом по заголовку или абзацу, как в Тильде.
Тексты остаются в коде значениями по умолчанию, а отдельно хранятся только правки. Контент отдаётся сразу в HTML — это важно для поиска, и всегда можно вернуть исходную версию.
Инлайн-правка любых текстов на странице
SEO-панель: title, description, OG, индексация, счётчики
Загрузка картинок упаковок и превью для соцсетей
История изменений с откатом к прежней версии
Мобильная версия: та же сцена в кармане
3D-сцена работает и на телефоне: банка так же вращается и меняет вкус, а плотность рендера снижена, чтобы не греть батарею.
Скорость: графика легче в шесть раз
3D и десятки летающих орехов — тяжёлая история для загрузки. Пересобрали графику: перевели изображения в WebP и уменьшили до разумного размера, оставили одно начертание декоративного шрифта вместо восьми, ограничили плотность рендера сцены.
2,39 МБ → 0,44 МБ
вес графики после пересборки
54
изображения переведены в WebP
1
начертание шрифта вместо восьми
Next.js
three.js / React Three Fiber
GSAP
Lenis
Node.js
nginx
Спрашивают чаще всего
Сколько времени занимает такой сайт?
Промо-сайт с 3D-сценой и админкой мы собираем за 4–8 недель в зависимости от готовности контента: фотографий упаковки, текстов и данных о продукте.
3D сильно замедляет сайт?
Замедляет, если делать бездумно. Мы ограничиваем плотность рендера, сжимаем графику в WebP и загружаем сцену отдельно от остального контента — на nutzz.ru графика весит 0,44 МБ вместо исходных 2,39 МБ.
Можно ли редактировать тексты самому?
Да. Мы пишем админку под проект: тексты правятся прямо на странице, SEO-мета и картинки — формами. Есть история изменений и откат к предыдущей версии.
Такая 3D-сцена работает на телефонах?
Да, сцена адаптирована под мобильные: та же банка и смена вкусов, но с пониженной плотностью рендера, чтобы не расходовать батарею и не терять плавность.
Живые сайты, а не картинки в презентации
Команда Reut Art
сегодня
Здравствуйте, я владелец компании
производим входные двери
хотел обратиться за редизайном
Здравствуйте, Евгений!
Конечно, наша команда займется этим
Начнем обсуждение вашего лучшего проекта?
Подписаться на рассылку
Согласен получать письма о новых работах и статьях и на обработку персональных данных
Reut Art
ReutArt © 2026
ИП Реут Артём Юрьевич · ИНН 910402081314 · ОГРНИП 320911200026247