Кейс
MATTER
Интерактивная лаборатория трёх экспериментальных материалов. Физика, свет и звук раскрывают их свойства через движение, прикосновение и прокрутку.
- Тип
- Интерактивный сайт · 3D и WebGL
- Год
- 2026
- Слои
- Интерфейс и дизайн, Приложения и платформы
- Технологии
- React, TypeScript, Vite, Three.js, WebGL 2, GLSL, Lenis, Web Audio API
Проблема
Создать самостоятельный проект Fieldmoth, в котором свойства вымышленных материалов можно почувствовать через экран. Каждый образец должен иметь узнаваемый характер: стекло возвращается к исходной форме, металлическая ткань реагирует на поле, гель сохраняет свет. Соединить выразительную графику с понятным взаимодействием и цельной историей.
Подход
- Разработали концепцию лаборатории и визуальный язык: тёмная студийная сцена, крупная типографика и точные подписи образцов.
- Создали три материала с разным поведением — упругое стекло, металлическую ткань и гель, сохраняющий свет.
- Написали собственную физику деформаций и GLSL-шейдеры для преломления, направленных бликов и свечения.
- Связали прокрутку с движением объектов, камеры и переходами; добавили синтезированный звук и генеративную музыку.
- Адаптировали сцены под сенсорное управление, добавили уровни качества и поддержку уменьшенного движения.
Слои продукта в этой работе
- Интерфейс и дизайн
- Приложения и платформы
Что это показывает
Создали и запустили сайт, в котором посетитель может растягивать стекло, собирать ткань в складки и рисовать светом внутри геля. Три материала объединены в непрерывную историю с живым архивом образцов. Проект показывает возможности Fieldmoth в арт-дирекшене, интерактивном дизайне и разработке 3D для веба.
