Спец-эффект в Webflow
🚀 Нужен фронтендер на спец-эффект в Webflow + внешний three.js блок!
Ищем того, кто повторит интерактивную 3D-галерею (аналог gabrielveres.com) — рендер на three.js/WebGL на отдельном сервере, встраивание в Webflow (через Embed/iframe).
💡 Остальные блоки уже сверстаны в Webflow, нужно только этот.
📌 Важно: контент галереи редактируется на нашем сервере (админка/JSON), Webflow лишь встраивает готовый блок.
💡 Остальные блоки уже сверстаны в Webflow, нужно только этот.
📌 Важно: контент галереи редактируется на нашем сервере (админка/JSON), Webflow лишь встраивает готовый блок.
Техническое задание: 3D-галерея для Webflow
Описание блока
Необходимо реализовать интерактивную 3D-галерею (аналог примера с сайта gabrielveres.com). Карточки проектов расположены в пространстве с перспективой, реагируют на движения курсора/свайпы, имеют эффект параллакса и кликабельны. Есть кнопка переключения режимов отображения («Overview/Index»).
Функциональные требования
• Карточки проектов (обложка, заголовок, ссылка).
• Перспективное расположение карточек с 3D-анимацией.
• Параллакс при движении курсора и на мобильных — при свайпе/гироскопе.
• Drag/scroll с инерцией.
• Hover-эффект (увеличение, подъём).
• Клик по карточке — переход по ссылке.
• Кнопка «Overview/Index» для переключения раскладки.
• Адаптивная версия для мобильных устройств.
• Fallback: статичная сетка/изображение при отсутствии WebGL.
Технологии
• Three.js для WebGL-графики (рендеринг на отдельном сервере).
• GSAP (опционально) для анимаций.
• Встраивание в Webflow через Embed/iframe.
• Данные для галереи подгружаются с внешнего сервера (JSON API).
• Для клиента — админка на сервере: загрузка/замена обложек, заголовков, ссылок, изменение порядка карточек.
Пошаговый план работ
1. Настроить сервер с three.js-приложением (рендер галереи).
2. Подготовить JSON-структуру для хранения данных (обложка, заголовок, ссылка, порядок).
3. Сделать админ-панель на сервере для редактирования галереи (добавление/удаление/перестановка карточек).
4. Реализовать сцену на three.js: камера, рендерер, группа карточек.
5. Реализовать интерактив (параллакс, drag/scroll с инерцией, hover, клик).
6. Добавить кнопку «Overview/Index» для переключения раскладки.
7. Подготовить встраивание в Webflow через iframe/Embed (адаптив 16:9 и 1:1).
8. Оптимизация: лёгкие текстуры, lazy-loading, 60 FPS на десктопе, ≥30 FPS на мобилках.
9. Сделать fallback (статичное изображение/грид) при отсутствии WebGL.
10. Провести тесты во всех основных браузерах и на мобильных устройствах.
Описание блока
Необходимо реализовать интерактивную 3D-галерею (аналог примера с сайта gabrielveres.com). Карточки проектов расположены в пространстве с перспективой, реагируют на движения курсора/свайпы, имеют эффект параллакса и кликабельны. Есть кнопка переключения режимов отображения («Overview/Index»).
Функциональные требования
• Карточки проектов (обложка, заголовок, ссылка).
• Перспективное расположение карточек с 3D-анимацией.
• Параллакс при движении курсора и на мобильных — при свайпе/гироскопе.
• Drag/scroll с инерцией.
• Hover-эффект (увеличение, подъём).
• Клик по карточке — переход по ссылке.
• Кнопка «Overview/Index» для переключения раскладки.
• Адаптивная версия для мобильных устройств.
• Fallback: статичная сетка/изображение при отсутствии WebGL.
Технологии
• Three.js для WebGL-графики (рендеринг на отдельном сервере).
• GSAP (опционально) для анимаций.
• Встраивание в Webflow через Embed/iframe.
• Данные для галереи подгружаются с внешнего сервера (JSON API).
• Для клиента — админка на сервере: загрузка/замена обложек, заголовков, ссылок, изменение порядка карточек.
Пошаговый план работ
1. Настроить сервер с three.js-приложением (рендер галереи).
2. Подготовить JSON-структуру для хранения данных (обложка, заголовок, ссылка, порядок).
3. Сделать админ-панель на сервере для редактирования галереи (добавление/удаление/перестановка карточек).
4. Реализовать сцену на three.js: камера, рендерер, группа карточек.
5. Реализовать интерактив (параллакс, drag/scroll с инерцией, hover, клик).
6. Добавить кнопку «Overview/Index» для переключения раскладки.
7. Подготовить встраивание в Webflow через iframe/Embed (адаптив 16:9 и 1:1).
8. Оптимизация: лёгкие текстуры, lazy-loading, 60 FPS на десктопе, ≥30 FPS на мобилках.
9. Сделать fallback (статичное изображение/грид) при отсутствии WebGL.
10. Провести тесты во всех основных браузерах и на мобильных устройствах.
Cвяжитесь, если вам интересно:
1 C примером похожей работы
2 Сроками выполнения за блок
3 Стоимостью