4 визуальных эффекта с GitHub

1. Дай Claude ссылку на репозиторий. Попроси сначала прочитать README. Так он разберется, как устанавливается библиотека и что ей нужно, прежде чем менять твой проект.
2. Опиши эффект обычными словами. Скажи, где он нужен: фон первого экрана, меню или логотип. Добавь цвета бренда в HEX и желаемую выразительность. «Медленно, мягко, от кремового к теплому оранжевому» понятнее, чем «сделай круто».
3. Пусть установит и подключит, затем настройте на месте. Claude добавляет зависимости и компонент в нужный раздел, запускает сайт локально. Дальше уточняй словами: «медленнее», «меньше зерна», «только за первым экраном».
4. Сразу укажи, на чем сделан сайт. Два инструмента рассчитаны на React, один работает в обычном HTML, а один можно попробовать в готовой веб-версии. Напиши «мой сайт на обычном HTML» или «мой сайт на Next.js», чтобы способ подключения подошел проекту.

Самый масштабный из четырех инструментов. Это способ работать с Three.js через React: добавлять на страницу настоящее интерактивное 3D обычными React-компонентами. Например, парящие объекты, объемный логотип, частицы и модели.

Здесь работает все, что умеет Three.js, а вокруг есть большая экосистема. Например, @react-three/drei с готовыми вспомогательными инструментами. Нужен React-проект. Освоить этот вариант сложнее остальных, зато возможностей очень много. Библиотека бесплатная и с открытым кодом.

Стартовый промпт:

Прочитай документацию и репозиторий React Three Fiber: https://github.com/pmndrs/react-three-fiber.

Мой сайт сделан на React. Хочу один спокойный 3D-эффект на первом экране: мягкую, медленно вращающуюся округлую фигуру или мой логотип, вытянутый в 3D, с небольшой реакцией на движение мыши.

1. Установи @react-three/fiber, three и @react-three/drei.
2. Создай небольшой компонент с Canvas, мягким освещением и одним парящим объектом в моем фирменном оранжевом цвете #D97757.
3. Сделай его легким и останавливай анимацию, когда вкладка не видна.

Затем запусти сайт локально, чтобы я мог посмотреть результат, и помоги уменьшить скорость.

Матовое «жидкое стекло» в стиле Apple Vision Pro и iOS 26: панели с преломлением, размытием и искажением по краям. Все, что находится за ними, искажается сквозь стекло.

Это обычный JavaScript без отдельного этапа сборки. Его можно добавить на простую HTML-страницу. В библиотеке есть классы Container и Button, которые можно применить к меню, карточкам и модальным окнам.

Самый простой для начала вариант из четырех: не нужно настраивать React и инструменты сборки. Библиотека бесплатная и с открытым кодом. Можно посмотреть работающий пример.

Стартовый промпт:

Прочитай репозиторий Liquid Glass JS: https://github.com/dashersw/liquid-glass-js.
Это обычный JavaScript без отдельного этапа сборки.

Мой сайт это простая HTML-страница. Сделай следующее:
1. Добавь библиотеку на страницу.
2. Преврати верхнее меню и карточки тарифов в матовые панели «жидкого стекла» с помощью класса Container, чтобы фон был виден через настоящее преломление.
3. Убедись, что текст поверх стекла остается читаемым и контраста достаточно.

Покажи точный HTML и JavaScript, которые нужно вставить. Затем открой предпросмотр, чтобы мы могли настроить размытие.

Анимированные 3D-градиенты на WebGL-шейдерах. Это мягкие, медленно перетекающие цвета, которые часто используют на фоне первых экранов. Можно настраивать цвета, форму, зерно и освещение.

Это React-библиотека, которая устанавливается вместе с three и @react-three/fiber. Есть и официальные плагины для Framer и Figma, если не хочется работать с кодом. Инструмент бесплатный и с открытым кодом.

Стартовый промпт:

Прочитай репозиторий ShaderGradient и его README: https://github.com/ruucm/shadergradient.

Мой сайт сделан на [React / Next.js / обычном HTML, укажи свой вариант]. Хочу медленный, ненавязчивый движущийся градиент на фоне первого экрана, без яркого навязчивого эффекта.

1. Установи @shadergradient/react и его зависимости: @react-three/fiber и three.
2. Добавь ShaderGradientCanvas на всю ширину только позади первого экрана.
3. Используй мои фирменные цвета: кремовый #FAF7F2 и теплый оранжевый #D97757.
4. Сделай движение медленным и добавь легкое зерно, чтобы эффект выглядел мягко.

Затем запусти сайт локально, чтобы я мог посмотреть результат, и помоги настроить скорость.

Загружаешь свой логотип в PNG с прозрачным фоном, и он превращается в анимированный жидкий металл, похожий на хром или ртуть. Инструмент работает на шейдерах Paper, @paper-design/shaders-react.

На liquid.paper.design есть готовая веб-версия: можно загрузить логотип и настроить эффект без установки. Репозиторий пригодится для более глубокой настройки. Инструмент бесплатный и с открытым кодом.

Стартовый промпт:

Хочу превратить свой логотип в анимированный жидкий металл с помощью https://github.com/paper-design/liquid-logo, который работает на @paper-design/shaders-react.

Вот мой логотип в PNG с прозрачным фоном: [добавь файл].

1. Клонируй репозиторий и запусти его локально, чтобы я мог загрузить логотип.
2. Помоги настроить цвет металла, преломление и скорость под теплый хром, который подойдет к кремово-оранжевому бренду.
3. Экспортируй результат как короткую зацикленную анимацию для сайта и социальных сетей.

Если запускать все приложение избыточно, покажи, как использовать готовую версию на liquid.paper.design и перенести нужные настройки оттуда.

Эти эффекты используют WebGL и создают нагрузку на устройство посетителя. Не ставь все четыре сразу. Несколько таких анимаций замедлят страницу и будут быстрее разряжать телефон. Выбери один выразительный эффект на первом экране, проверь на настоящем телефоне и добавь вариант для prefers-reduced-motion. Можно просто попросить Claude сделать это, чтобы анимации становилось меньше для тех, кто выбрал такую настройку.

Репозитории бесплатные, твоя задача выбрать со вкусом. Дорогой вид сайту дает сдержанность: один красивый движущийся элемент на спокойной странице лучше пяти спорящих эффектов. Проси Claude делать эффект деликатнее.

• React Three Fiber: интерактивное 3D
• Liquid Glass JS: стеклянные панели
• ShaderGradient: движущиеся градиенты
• Liquid Logo: жидкий металл