Интерактивные 3D эффекты для любого сайта

Линейка01/06
3D QR

QR-код, который превращается в живую 3D-сцену и всегда сканируется

Волна
Распродажа
Витрина

3D Морфинг

ФОРМАВЫБОР
Примеры

Как это выглядит на настоящем сайте

Эффект встаёт обычным блоком между другими блоками страницы — на Тильде или любом другом сайте. Ниже — макеты трёх лендингов.

zerno-coffee.ru
Зерно О насКонтакты
Кофейня
Меню — в один скан

Наведите камеру на дерево у кассы и откройте меню с сезонными напитками.

Открыть меню
nord.studio
NORD О насКонтакты
Архитектурное бюро
Портфолио в кармане

QR на визитке собирается в город из наших проектов и ведёт в портфолио.

Смотреть проекты
fest-krepost.ru
Крепость О насКонтакты
Фестиваль
Билеты по QR

Замок собирается из кубиков, а сверху — QR на покупку билета.

Купить билет
Установка

Установка за 3 шага

Без программиста: настроили, получили код, вставили. Работает на Tilda, WordPress, Webflow, Wix и любом сайте с HTML.

  1. Купить ключ → ключ придёт на почту
    1

    Настройте и купите

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

  2. <!-- Gridika · ваш-сайт.ru --> <div id="gridika-qr"> …3D-сцена… </div>
    Скопировать Скачать файлом
    2

    Заберите готовый код

    Сразу после оплаты код уже собран с вашими настройками. Скопируйте его или скачайте файлом — как удобнее. Ссылка на код есть и в письме.

  3. HTML-блок ✓ Опубликовано
    3

    Вставьте на сайт

    Добавьте на страницу HTML-блок: в Тильде — T123 «HTML-код», в WordPress — «Произвольный HTML», в Webflow — Code Embed. Вставьте код и опубликуйте — работает на компьютере и телефоне.

Захотели что-то поменять?

Не правьте код вручную: ссылка, текст и QR в нём уже собраны из кубиков — правка сломает картинку или QR перестанет совпадать с текстом.

  1. 01
    Откройте студию
    «Получить код» → вставьте ключ из письма
  2. 02
    Поменяйте
    Ссылку, текст, цвет — и возьмите новый код
  3. 03
    Замените на сайте
    Старый код удалите, новый вставьте на его место
Ключ не сгорает: пересобирайте код для своего сайта сколько угодно раз — бесплатно.
Почему Gridika

Красиво — и при этом без сюрпризов

Сканирование

QR точно считывается

Сверху сцена — обычный QR-код с выровненным контрастом. Перед выдачей кода студия проверяет, что он читается в каждом режиме.

✓ gridika.ru
на экранеушёл с экрана

Не тормозит страницу

Когда блок уходит с экрана, анимация засыпает и не тратит батарею телефона.

Ваш сайт код в блоке

Не зависит от нас

Весь код лежит у вас в блоке. Библиотека three.js грузится с публичного CDN, есть запасное зеркало.

Адаптивность

Под любой экран

Сцена подстраивается под ширину блока и чёткость экрана: на телефоне так же аккуратно, как на большом мониторе.

Цены

Попробуйте в студии, платите один раз

Собрать и посмотреть эффект можно бесплатно. Код для сайта — после покупки ключа: разовая оплата, без подписки и регистрации.

3D QR-Морфинг

7 форм · по 3 режима у каждой

Скоро разово, за сайт
Любые ссылки и формы на вашем сайте
  • ✓ Код для блока T123
  • ✓ Навсегда для одного сайта
  • ✓ Обновления эффекта
  • ✓ Ключ на почту вместе с чеком
Попробовать в студии ↑

Визитка с QR

7 дизайнов · 8 цветов

Скоро разово, за сайт
1 ключ = 1 визитка (один человек)
  • ✓ Код для блока T123
  • ✓ Навсегда для одного сайта
  • ✓ Обновления эффекта
  • ✓ Ключ на почту вместе с чеком
Попробовать в студии ↑

Подарок с промокодом

Праздник · Крафт · Чёрная пятница

Скоро разово, за сайт
Любые промокоды и акции на вашем сайте
  • ✓ Код для блока T123
  • ✓ Навсегда для одного сайта
  • ✓ Обновления эффекта
  • ✓ Ключ на почту вместе с чеком
Попробовать в студии ↑

3D-логотип из вокселей

6 эффектов · Глянец · Металлик · Неон…

Скоро разово, за сайт
1 ключ = 1 логотип
  • ✓ Код для блока T123
  • ✓ Навсегда для одного сайта
  • ✓ Обновления эффекта
  • ✓ Ключ на почту вместе с чеком
Попробовать в студии ↑

Морф «до / после»

Волна · Взрыв · Пиксель

Скоро разово, за сайт
1 ключ = 1 пара фото · пакеты 5 и 15 пар
  • ✓ Код для блока T123
  • ✓ Навсегда для одного сайта
  • ✓ Обновления эффекта
  • ✓ Ключ на почту вместе с чеком
Попробовать в студии ↑

Таймер акции

Распродажа · Запуск · Новый год

Скоро разово, за сайт
Любые даты и акции на вашем сайте
  • ✓ Код для блока T123
  • ✓ Навсегда для одного сайта
  • ✓ Обновления эффекта
  • ✓ Ключ на почту вместе с чеком
Попробовать в студии ↑
Выгоднее

Все эффекты

Один ключ на все эффекты Gridika для сайта — и на те, что выйдут позже.

Скоро разово, за сайт
  • ✓ Все эффекты без ограничений: визитки, логотипы, пары фото — сколько нужно
  • ✓ Новые эффекты по мере выхода
  • ✓ Для студий — пакеты ключей на несколько сайтов
Оплата появится скоро
Линейка

Шесть эффектов в одном стиле

Готово 6 из 6. Остальные выходят по очереди — у каждого свой цвет, как волна в студии.

Вопросы

Частые вопросы

Работает ли на телефоне? +

Да. Сцена подстраивается под ширину блока и экран телефона, а вне экрана засыпает и не тратит батарею.

QR-код точно сканируется? +

Да. Сверху сцена — обычный QR с выровненным контрастом, детали в этот момент убираются. Перед выдачей кода студия проверяет, что он читается.

Можно поменять ссылку или текст после покупки? +

Да, но не в самом коде: QR и надписи в нём уже собраны из кубиков, ручная правка их сломает. Откройте студию, вставьте ключ из письма, поменяйте что нужно и замените старый код на сайте новым. Ключ не сгорает — пересобирать код для своего сайта можно сколько угодно раз.

Можно ли свои цвета? +

Сейчас у каждой формы три готовых режима — цвета в них подобраны так, чтобы QR гарантированно сканировался. Новые цвета добавляем по мере развития.

Не замедлит ли это сайт? +

Сам код небольшой, библиотека three.js загружается с публичного CDN (около 150 КБ в сжатом виде). Анимация работает, только пока блок на экране.

Работает только на Тильде? +

Нет. Код — обычный HTML и JavaScript: подходит WordPress, Webflow, Wix, Битрикс и любой сайт, куда можно вставить HTML-код. Для каждой платформы в окне с кодом есть короткая инструкция.

Какой нужен тариф Тильды? +

Нужен блок T123 «HTML-код» — он есть на платных тарифах Tilda (Personal и Business).

Как купить и получить код? +

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

Можно ли поставить один код на несколько сайтов? +

Код привязан к сайту, для которого куплен ключ. Скопированный на другой сайт, он покажет пометку Gridika. Для нескольких сайтов нужны отдельные ключи — студиям сделаем пакет.

Что входит в один ключ? +

Ключ работает навсегда на одном сайте. Визитка — на одного человека, 3D-логотип — на один знак, морф «до / после» — на одну пару фото: всё остальное (цвета, тексты, режимы) меняется бесплатно, а для коллеги, другого логотипа или новой пары нужен свой ключ — командам и студиям сделаем пакеты со скидкой. 3D QR, подарок и таймер — без ограничений на сайте: любые ссылки, промокоды и даты. Ключ «Все эффекты» — всё без ограничений для одного сайта.

Соберите свой эффект за минуту

Собрать и посмотреть — бесплатно. Код для Тильды — по ключу, разово и без регистрации.