Web design selected
12 subscribers
44 photos
6 videos
79 links
Web / UI

Для связи: @janclopvandal
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Infinite GSAP Scroll Gallery

Surya Aditya на Codrops гоняет бесконечную ленту не нативным скроллом, а таймлайном GSAP на паузе: секунда шкалы равна 100px движения, поэтому скорость слайдов не зависит от высоты страницы. Клик по превью запускает GSAP Flip — миниатюра морфит в полноэкранный кадр по общему data-flip-id, а четыре состояния (closed/opening/open/closing) не дают кликам конфликтовать друг с другом.

https://tympanus.net/codrops/2026/07/30/building-an-infinite-gsap-scroll-gallery-with-parallax-and-flip-transitions/
🔥1
Depo Luxe

Depo Luxe продаёт «стратегический и кинематографичный подход к люксу» клиентам вроде Alexander McQueen и Kenzo, а превью проектов на хиро пронумерованы римскими цифрами и раскиданы по холсту без выравнивания в сетку — архив читается как стол с разложенными карточками. Вопрос на подумать: такая раскладка облегчает выбор клиенту или просто оттягивает момент, когда придётся сравнивать проекты напрямую?

https://depoluxe.xyz
This media is not supported in your browser
VIEW IN TELEGRAM
Gravity Fall Trail

Gravity Fall Trail от Vsevolod Gajkin — Dribbble-концепт с физическим откликом на драг: карточки подчиняются гравитации и инерции вместо жёсткой сетки-привязки. Формат остаётся демонстрацией одного жеста — Dribbble показывает поведение трейла только в подготовленной записи, без реального ввода за кадром.

https://dribbble.com/shots/27606818-Gravity-Fall-Trail
Grainient v2

Смотрю на витрину Grainient — 375+ зернистых градиентов, 90 анимированных, 538 AI-фонов — и вижу тот же язык, что у маркетплейсов стоков: бейджи Hot Pick и Most Popular висят прямо над превью. При годовой подписке за $59 и пожизненном доступе за $299 такая подача читается как осознанный выбор позиционирования каталога ассетов, не случайность вёрстки.

https://grainient.supply
This media is not supported in your browser
VIEW IN TELEGRAM
Eladio Dieste

++hellohello вместе с Pablo Picart и Ismael Martínez сделали сайт-посвящение уругвайскому инженеру Элвадио Дьесте, который проектировал самонесущие кирпичные своды. Хиро на Three.js и GSAP не иллюстрирует эти своды фотографией, а превращает камеру в участника: она безостановочно летит вглубь одной и той же кирпичной оболочки, кладка расступается слоями, и сама навигация по сайту воспроизводит логику вложенного, повторяющегося свода. Awwwards отметил проект Honorable Mention в августе 2026 с оценкой 8.4 из 10.

https://www.awwwards.com/sites/eladio-dieste/
Kultiveret

Копенгагенское бюро культурных путешествий Kultiveret, основанное в 2022 году Александрой Шандер, раскладывает туры не по направлениям поездок, а по девяти категориям — от архитектуры и моды до кухни и кино, — и каждая получает одну фотографию вместо текстового описания. Заголовок «cultivating relationships through» вклинен прямо в сетку карточек, а на входе можно включить фоновый звук Копенгагена — единственный неочевидный интерактивный элемент на иначе статичной чёрно-белой странице.

https://www.kultiveret.com/
THE LÄND

Открываешь сайт региона Баден-Вюртемберг и вместо баннера с горами попадаешь в игрушечный 3D-макет: дирижабль с именем «THE LÄND» плывёт над рекой, а по ландшафту разбросаны белые таблички-пилюли — «High quality of life», «Strong economy», «Great jobs» — будто это не сайт, а витрина настольной игры про регион. Под макетом находятся вполне рабочие вещи: доска вакансий Wall of Opportunities, гид по переезду, версия с жестовым языком. Сама земля здесь показана раньше любого текста о ней.

https://www.thelaend.de/en/
This media is not supported in your browser
VIEW IN TELEGRAM
Cadillac Formula 1 Team

Официальный сайт Cadillac F1 Team открывается не статичным рендером, а видео с плеером поверх кадра: болид снят сзади, в ангаре с полосным верхним светом, на заднем антикрыле — трёхцветная нашивка «USA». Меню вызывается отдельным полноэкранным оверлеем (Home, Calendar, News, Partners, Careers, Store), а сразу под хиро идёт раздел под заголовком Colors of Home. Awwwards отметил сайт как Nominee в августе 2026.

https://www.cadillacf1team.com/
This media is not supported in your browser
VIEW IN TELEGRAM
Vita Travels

Vita Travels продаёт не ретрит, а сборку: экран Combine Retreat разворачивает бронирование в четыре шага — Choose, Match Boutique, Add Transfers, Secure — и объединяет проживание, трансфер и допуслуги в один чекаут вместо отдельных броней на разных сайтах. У площадки больше 200 сертифицированных коучей и 1472+ проведённых ретритов в 100+ странах. Вопрос на подумать: если весь маршрут собирается за один проход по четырём шагам, не теряет ли турист ту часть выбора, которая раньше приходилась на самостоятельный поиск жилья и транспорта?

https://vita-travel.webflow.io/
SOMA

SOMA — монреальская продакшн-студия рекламных роликов, а на хиро вместо шоурила — крупный план: рука тянется вверх сквозь толщу синей воды, и поверх кадра лежит жирный, слегка наклонный леттеринг SOMA. Дальше сайт резко меняет регистр — минималистичная сетка портретов из 16+ режиссёров (среди них Simon Olivier Fecteau, Sarah Pellerin, Daniel Roby, Ricardo Trogi), без анимации и лишних эффектов. Один драматичный кадр продаёт эмоцию ролика, а сразу за ним — сухой список тех, кто это снимает.

https://soma.ca
Kim Seunghyuk

В портфолио Kim Seunghyuk один кейс задерживает дольше остальных: пилотная презентация для программы 2024 года по переводу корейского культурного наследия — Кёнбоккун, Чхандоккун, крепость Хвасон в Сувоне — в библиотеку 3D-ассетов для игр, кино и XR. Навигация внутри кейса устроена как созвездие: слова millennia, heritage, pattern, material, rebirth, transformation соединены линиями, как точки на звёздной карте, и почему-то в этой форме процесс разработки ассетов читается понятнее, чем в обычном тайм-лайне. Три шага метода сведены к трём иконкам — Pattern, Materialize, Apply.

https://seunghyuk.com
This media is not supported in your browser
VIEW IN TELEGRAM
Store Locator (Mapbox)

В сторлокаторе Ильи ван Эка список точек и карта живут одним состоянием: клик по карточке или по пину переключает атрибут data-active сразу в обеих панелях, а перелёт к выбранной точке отрабатывает сам Mapbox GL JS за 1200 мс — без GSAP, хотя ресурс подписан как "Mapbox + GSAP". Маркеры генерируются из одного HTML-шаблона по data-координатам, а для тех, кто просил отключить движение, перелёт отключается через prefers-reduced-motion.

https://www.osmo.supply/resource/store-locator-mapbox
Alethia

Alethia продаёт Atmospheric-Based Digital MRV — измерение и верификацию выбросов CO₂ через сеть сенсоров, спутниковые снимки и блокчейн-подтверждение данных вместо ручной отчётности. Два продуктовых трека: nature-based carbon market для компенсационных проектов и supply chain emissions tracking для корпоративной цепочки поставок. Сайт держит вокруг этого минимум декора — крупная типографика, CO₂-метрики прямо в блоках текста, две точки на карте (Буэнос-Айрес и Логан, Юта) вместо абстрактного "работаем глобально".

https://www.alethia.earth
This media is not supported in your browser
VIEW IN TELEGRAM
Layout Grid Flip

Смотрю на переключение между крупной и мелкой сеткой у Ильи ван Эка и не сразу считываю это как анимацию — карточки будто сами знают новое место. За этим стоит Flip.getState() из GSAP: скрипт фиксирует позиции элементов до смены разметки, потом анимирует их к новым координатам, одновременно растягивая высоту контейнера. Количество колонок держится на CSS-переменных, так что сетка остаётся отзывчивой, а не пересобирается с нуля под каждый брейкпоинт.

https://osmo.supply/resource/layout-grid-flip
White Desert

White Desert возит до 12 гостей за рейс из Кейптауна в три собственных лагеря во внутренней Антарктиде — Whichaway, Echo Base, Explorer, по шесть люксов в каждом, перелёт до взлётной полосы Wolf's Fang занимает около 5,5 часов. Пять маршрутов размечены по цене — от $16 500 за однодневный выезд до $115 500 за экспедицию к Южному полюсу, а бронирование студия Malvah провела через шесть шагов логистики вместо одной формы запроса.

https://white-desert.com
🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Seasats

Флагманский аппарат Seasats, Lightfish, весит 305 фунтов, помещается в кузов пикапа и держится автономно на солнечной энергии до полугода — на нём же компания уже провела необитаемое судно сквозь Тайваньский пролив. Линейка на сайте разложена по задачам: Lightfish для долгого наблюдения, Quickfish — тактическая версия на 35+ узлов, Heavyfish под тяжёлую нагрузку выходит в 2026-м. Если морской дрон умещается в багажник и не требует экипажа, где теперь проходит граница между военной разведкой и гражданской робототехникой?

https://www.seasats.com/
This media is not supported in your browser
VIEW IN TELEGRAM
1000 Whales

ARK Studio строит A Thousand Whales вокруг счётчика убийств, обновляющегося в реальном времени по ходу сезона китобойного промысла Hvalur hf. в Исландии, и AR-режима, который показывает финвала в его настоящем масштабе — 26 метров — прямо в комнате зрителя. Приём работает как аргумент расследования: сухие цифры (медиана 11,5 минут до смерти, 41% выстрелов без мгновенного результата, около $12 млн убытков за три задокументированных года) подкреплены физическим ощущением размера животного, которое иначе остаётся абстракцией статистики.

https://1000whales.com/
Produx Design

Захожу на сайт Produx и вижу студию, которая буквально встроила обещание "you feel the brand before it speaks" в саму вёрстку: полноэкранные кейсы, цитаты фаундеров прямо в потоке контента, бесконечная карусель логотипов клиентов вместо статичного грид-блока. Барселонская команда под руководством Alexandr Socoloff закрывает полный цикл бренд-айдентики за 14 дней, и сайт, кажется, нарочно не перегружен деталями, чтобы не спорить с этим обещанием скорости.

https://www.produx.design/
ree|b. — Handheld Portfolio

Дизайнер Areeb Ali продаёт себя не карточками кейсов, а работающим «устройством»: экран стартует с CRT-заставки, список из восьми проектов (Resonance, Reel Cinemas, AlUla, Coca-Cola Arena и другие, 2021–2025) листается кликвилом или клавиатурой — стрелки, Enter, Tab, Esc, P на power. Для дизайнера, который работает на стыке product design и AI, такая форма портфолио сама становится демонстрацией навыка: вместо описания интеракций в кейсах он даёт их прожить в интерфейсе, который сначала нужно самому включить.

https://areebali.com
Uni-Yi

Digital Initiative for Cross-dialect Unification of Yi Scripts переводит знание носителей языка в проверяемые данные: панель Lexicon строит тепловую карту по диалектам — Bijie, Chuxiong, Dahong, Honghe, Longlin, Luquan, Shilin, — и чем темнее ячейка, тем больше словарных записей символа зафиксировано именно в этом варианте письма. Кадр с кремниевой пластиной в руке участницы в традиционном наряде и книгой Cleanroom Inspection Record буквализирует метафору проекта: письменность И здесь обрабатывают как чип — переводят рукописный вариант в стандартизированный, машиночитаемый формат, доступный на правку через логин контрибьютора.

https://www.uniyi.org
Studio K95

Захожу на сайт K95 и сначала ищу глазами сетку — а вместо неё нахожу комнату: превью кейсов расставлены на разной глубине вокруг хромированного объекта в центре, собранного из прямоугольных сегментов. Переключатель Rings/Spiral не меняет список работ, а просто разворачивает их по-другому в этом же пространстве. Студия из Катании держит в портфолио и мотошлемы, и культурный фестиваль Wratislavia Cantans — и почему-то оба типа проектов одинаково спокойно смотрятся в этой синей комнате.

https://k95.it