Ombra
- [01] Задача
- Сайт-портфолио для студии интерьеров с кинематографичной подачей: чтобы страница сама ощущалась как пространство.
- [02] Что сделали
- Тёмная эстетика и туман над фотографией, который расступается за курсором. WebGL-«дыхание» карточек проектов, плавный скролл, переходы между страницами, адаптив и режим без анимаций.
Как это устроено
Ombra — сайт-портфолио студии дизайна интерьеров. Задача была не «показать фотографии», а сделать так, чтобы страница сама ощущалась как пространство. Листайте — сайт в рамке покажет, как это устроено.
Открыть сайт ↗
- 01
Туман, который расступается за курсором
Фотография интерьера на первом экране затянута туманом. Посетитель ведёт курсором — и туман расходится, как будто он сам проходит в комнату.
Это первое, что видит человек, и сразу понятно: студия работает со светом и атмосферой, а не просто расставляет мебель.
Под капотом: Next.js + React + TypeScript + Tailwind CSS.
- 02
Крупная антиква и тёмная палитра
Заголовок набран крупной антиквой на тёмном фоне. Подача кинематографичная: сначала настроение, потом детали.
- 03
Проекты — индексом, а не плиткой
Работы студии собраны списком: название объекта и район Петербурга. Карточки проектов «дышат» на WebGL, между страницами — плавные переходы.
Под капотом: WebGL-анимация карточек, переходы между страницами, плавный скролл на Lenis.
- 04
Работает на телефоне и без анимаций
Сайт адаптирован под телефоны, а если в системе включено «уменьшить движение», анимации отключаются и страница остаётся спокойной и читаемой.