This media is not supported in your browser
VIEW IN TELEGRAM
Falling 2D Objects (MatterJS)
Matter.js 0.19.0 с CDN, канвас вставляется в #canvas-target, по краям сцены — четыре статичных стены-границы. Объекты спавнятся с задержкой 100 мс и по очереди перебирают пять SVG-текстур; наружу вынесены количество, размер, restitution и гравитация мира. Дефолтный скролл-хайджек отключён, чтобы страница продолжала листаться поверх канваса. Разбор Денниса Снелленберга в Osmo, исходник — altgage.com. Физический движок делает здесь ровно одну работу: превращает декоративный блок в объект, который можно расшвырять курсором.
https://www.osmo.supply/resource/falling-2d-objects-matterjs
Matter.js 0.19.0 с CDN, канвас вставляется в #canvas-target, по краям сцены — четыре статичных стены-границы. Объекты спавнятся с задержкой 100 мс и по очереди перебирают пять SVG-текстур; наружу вынесены количество, размер, restitution и гравитация мира. Дефолтный скролл-хайджек отключён, чтобы страница продолжала листаться поверх канваса. Разбор Денниса Снелленберга в Osmo, исходник — altgage.com. Физический движок делает здесь ровно одну работу: превращает декоративный блок в объект, который можно расшвырять курсором.
https://www.osmo.supply/resource/falling-2d-objects-matterjs
Truus
Амстердамское агентство Truus работает по всему спектру — от TikTok-контента до ТВ-роликов и наружки; в клиентах KFC, Netflix, HEMA, Jumbo. Дизайн Джордана Гилроя, код Денниса Снелленберга. Поверх полноэкранного кадра из кампании навешаны стикеры: смайлик, огонёк, блёстка, овальная обводка от руки — ровно тот словарь, которым размечают сторис в самих платформах, плюс гротеск и курсивная антиква в одной строке заголовка. Агентство, которое продаёт «advertising for the new mainstream», собрало хиро из родного языка этого мейнстрима: позиционирование отработано оформлением раньше, чем его успевают заявить текстом.
https://truus.co/
Амстердамское агентство Truus работает по всему спектру — от TikTok-контента до ТВ-роликов и наружки; в клиентах KFC, Netflix, HEMA, Jumbo. Дизайн Джордана Гилроя, код Денниса Снелленберга. Поверх полноэкранного кадра из кампании навешаны стикеры: смайлик, огонёк, блёстка, овальная обводка от руки — ровно тот словарь, которым размечают сторис в самих платформах, плюс гротеск и курсивная антиква в одной строке заголовка. Агентство, которое продаёт «advertising for the new mainstream», собрало хиро из родного языка этого мейнстрима: позиционирование отработано оформлением раньше, чем его успевают заявить текстом.
https://truus.co/
Jeton
Jeton — платёжное приложение: единый счёт, обмен валют, 50+ способов оплаты, больше миллиона пользователей, связь с 25+ странами. На хиро — стопка полупрозрачных 3D-дисков в розово-оранжевом градиенте, медленно расходящихся в воздухе. Не сразу понял, почему они смотрятся уместнее обычных скриншотов приложения, пока не дошло: jeton по-французски — фишка, жетон. Весь первый экран оказывается буквальным прочтением названия, и из того же материала собрана палитра всего сайта. Сделано в Büro.
https://www.jeton.com/
Jeton — платёжное приложение: единый счёт, обмен валют, 50+ способов оплаты, больше миллиона пользователей, связь с 25+ странами. На хиро — стопка полупрозрачных 3D-дисков в розово-оранжевом градиенте, медленно расходящихся в воздухе. Не сразу понял, почему они смотрятся уместнее обычных скриншотов приложения, пока не дошло: jeton по-французски — фишка, жетон. Весь первый экран оказывается буквальным прочтением названия, и из того же материала собрана палитра всего сайта. Сделано в Büro.
https://www.jeton.com/
Outfit
Студия ++hellohello из Монтевидео открыла собственный мерч-магазин: футболки, кепки, тоут-сумки, рюкзаки, ключницы, $15–33, на Shopify. Вордмарк OUTFIT® набран во весь вьюпорт красным по кремовому, и на этом визуальный бюджет заканчивается — дальше идёт ровная сетка карточек с товаром на сером фоне. Зато названия собраны из профессионального словаря: «Kerned Confidence», «Whitespace Matters», «Neutral Grotesk». Вопрос на подумать: если шутка в названии считывается только теми, кто сам верстает, магазин торгует одеждой или пропуском в цех?
https://outfit.hellohello.is/
Студия ++hellohello из Монтевидео открыла собственный мерч-магазин: футболки, кепки, тоут-сумки, рюкзаки, ключницы, $15–33, на Shopify. Вордмарк OUTFIT® набран во весь вьюпорт красным по кремовому, и на этом визуальный бюджет заканчивается — дальше идёт ровная сетка карточек с товаром на сером фоне. Зато названия собраны из профессионального словаря: «Kerned Confidence», «Whitespace Matters», «Neutral Grotesk». Вопрос на подумать: если шутка в названии считывается только теми, кто сам верстает, магазин торгует одеждой или пропуском в цех?
https://outfit.hellohello.is/
IZANAMI
Под одним именем IZANAMI собраны три несвязанных направления: образовательная программа Mama School, охватившая 20 000+ семей в Японии; предметный и пространственный дизайн из Дубая; приватные ретриты, которые ведёт основательница Мока. Офисы в Токио и Дубае. Обычно такой набор разводят по разделам с услугами — здесь вместо этого один регистр на всё: туманный лес с торием, монограмма-печать по центру и строка «Harmony is not something to be created. It is something to be remembered». Связкой работает атмосфера кадра, структура навигации к этому почти не подключена — приём держится ровно до того момента, когда посетителю понадобится понять, что именно ему продают.
https://izanami-official.com
Под одним именем IZANAMI собраны три несвязанных направления: образовательная программа Mama School, охватившая 20 000+ семей в Японии; предметный и пространственный дизайн из Дубая; приватные ретриты, которые ведёт основательница Мока. Офисы в Токио и Дубае. Обычно такой набор разводят по разделам с услугами — здесь вместо этого один регистр на всё: туманный лес с торием, монограмма-печать по центру и строка «Harmony is not something to be created. It is something to be remembered». Связкой работает атмосфера кадра, структура навигации к этому почти не подключена — приём держится ровно до того момента, когда посетителю понадобится понять, что именно ему продают.
https://izanami-official.com
This media is not supported in your browser
VIEW IN TELEGRAM
Jordi Garreta
Портфолио креативного разработчика из Барселоны: превью проектов — не карточки в сетке, а изогнутые плоскости, развешанные в глубину сцены, курсор водит камеру между ними. Фон перекрашивается под каждый проект — тёмно-серый, лиловый, оливковый, — а поверх всего лежит неподвижная HUD-рамка: имя, «available for work», название и год по средней линии, местное время с подписью «might be at the beach» в правом углу. Сцена на весь сайт одна: меняется только то, что в ней висит и каким цветом залито.
https://www.jordigarreta.com/
Портфолио креативного разработчика из Барселоны: превью проектов — не карточки в сетке, а изогнутые плоскости, развешанные в глубину сцены, курсор водит камеру между ними. Фон перекрашивается под каждый проект — тёмно-серый, лиловый, оливковый, — а поверх всего лежит неподвижная HUD-рамка: имя, «available for work», название и год по средней линии, местное время с подписью «might be at the beach» в правом углу. Сцена на весь сайт одна: меняется только то, что в ней висит и каким цветом залито.
https://www.jordigarreta.com/
This media is not supported in your browser
VIEW IN TELEGRAM
3D Cards Tornado
Карусель на GSAP, где Observer переводит скролл, драг и тач в один и тот же входной сигнал, а ScrollTrigger вращает карточки вокруг центральной оси. Глубина считывается перспективной трансформацией: чем дальше карточка от центра, тем сильнее блюр, темнее яркость и меньше масштаб. Для бесконечности ленты Деннис Снелленберг (по мотивам концепта Pacomepertant) клонирует карточки на лету вместо зацикливания готового массива — приём, который убирает видимый шов в момент повтора.
https://www.osmo.supply/resource/3d-cards-tornado
Карусель на GSAP, где Observer переводит скролл, драг и тач в один и тот же входной сигнал, а ScrollTrigger вращает карточки вокруг центральной оси. Глубина считывается перспективной трансформацией: чем дальше карточка от центра, тем сильнее блюр, темнее яркость и меньше масштаб. Для бесконечности ленты Деннис Снелленберг (по мотивам концепта Pacomepertant) клонирует карточки на лету вместо зацикливания готового массива — приём, который убирает видимый шов в момент повтора.
https://www.osmo.supply/resource/3d-cards-tornado
Dragonfly
Ребрендинг держится на буквальном прочтении имени: хиро закрыт зернистым растровым макроснимком стрекозы, а неоново-оранжевый вордмарк проступает поверх него мягким свечением. Фонд работает в крипто восемь лет, с офисами в Нью-Йорке и Сингапуре и чеками от $3M до $30M+, а сайты категории обычно выбирают графики и сетки — здесь вместо этого органическая, почти энтомологическая фактура фотографии, что совпадает с заявленной позицией фонда работать со «странными» проектами.
https://www.dragonfly.xyz
Ребрендинг держится на буквальном прочтении имени: хиро закрыт зернистым растровым макроснимком стрекозы, а неоново-оранжевый вордмарк проступает поверх него мягким свечением. Фонд работает в крипто восемь лет, с офисами в Нью-Йорке и Сингапуре и чеками от $3M до $30M+, а сайты категории обычно выбирают графики и сетки — здесь вместо этого органическая, почти энтомологическая фактура фотографии, что совпадает с заявленной позицией фонда работать со «странными» проектами.
https://www.dragonfly.xyz
This media is not supported in your browser
VIEW IN TELEGRAM
Progressive Blur
Ресурс называется Progressive Blur — Editorial Nav Effect. Слово «progressive» здесь описывает логику: резкость навигационной панели меняется постепенно, а не переключается разом при пересечении порога скролла. Деталей реализации на публичной странице Osmo нет — техника открывается только подписчикам платного Vault, так что в отличие от большинства ресурсов студии этот приём не сопровождается разбором в открытом доступе.
https://www.osmo.supply/
Ресурс называется Progressive Blur — Editorial Nav Effect. Слово «progressive» здесь описывает логику: резкость навигационной панели меняется постепенно, а не переключается разом при пересечении порога скролла. Деталей реализации на публичной странице Osmo нет — техника открывается только подписчикам платного Vault, так что в отличие от большинства ресурсов студии этот приём не сопровождается разбором в открытом доступе.
https://www.osmo.supply/
RISK
У продакшена RISK портфолио открывается не шоурилом, а координатами съёмочной точки в подписи: 43°17'2.231″ N, 5°22'16.457″ E. Кадры кампании раздроблены на диагональные грани, будто снимок смотрят через треснувшее стекло, а внизу — слоган Not taking a risk is the real risk. Вопрос на подумать: если тон бренда уже прописан в самом названии студии, добавляет ли координатная точность что-то, кроме ощущения репортажной подлинности?
https://www.risk.film
У продакшена RISK портфолио открывается не шоурилом, а координатами съёмочной точки в подписи: 43°17'2.231″ N, 5°22'16.457″ E. Кадры кампании раздроблены на диагональные грани, будто снимок смотрят через треснувшее стекло, а внизу — слоган Not taking a risk is the real risk. Вопрос на подумать: если тон бренда уже прописан в самом названии студии, добавляет ли координатная точность что-то, кроме ощущения репортажной подлинности?
https://www.risk.film
Obys® Experiment Space
У Obys нашёлся раздел, которого не ждёшь от студийного сайта: тридцать с лишним экспериментов, пронумерованных и датированных по годам, часть уже с меткой 2026-й. Открыть его получится только с десктопа — с телефона вместо контента просьба вернуться с большего экрана. Подпись Never Finished висит с 2018 года, и от этого список читается не как забытый черновик, а как продолжающийся процесс, который просто решили не прятать.
https://experiment.obys.agency/
У Obys нашёлся раздел, которого не ждёшь от студийного сайта: тридцать с лишним экспериментов, пронумерованных и датированных по годам, часть уже с меткой 2026-й. Открыть его получится только с десктопа — с телефона вместо контента просьба вернуться с большего экрана. Подпись Never Finished висит с 2018 года, и от этого список читается не как забытый черновик, а как продолжающийся процесс, который просто решили не прятать.
https://experiment.obys.agency/
Dawn
Кейсы на сайте агентства поданы не блоками с заголовком и подзаголовком, а плотной сеткой: у каждого превью — плашка-тег (PICSART REBRAND, Y IN LYFT, UNWRAP THE TRUTH), а рядом с одним из кадров прямо в сетке встроена клиентская цитата вместо отдельного раздела с отзывами. Dawn работает над go-to-market кампаниями для tech-брендов вроде Lyft, Google и Picsart, и кейс здесь сведён к одному кадру плюс одной фразе — компактность подачи сама работает как аргумент о скорости, которую агентство продаёт.
https://dawn.la/
Кейсы на сайте агентства поданы не блоками с заголовком и подзаголовком, а плотной сеткой: у каждого превью — плашка-тег (PICSART REBRAND, Y IN LYFT, UNWRAP THE TRUTH), а рядом с одним из кадров прямо в сетке встроена клиентская цитата вместо отдельного раздела с отзывами. Dawn работает над go-to-market кампаниями для tech-брендов вроде Lyft, Google и Picsart, и кейс здесь сведён к одному кадру плюс одной фразе — компактность подачи сама работает как аргумент о скорости, которую агентство продаёт.
https://dawn.la/
Haus
Haus держит клиентов уровня OpenAI и Netflix в списке работ, а хиро при этом — кислотно-жёлтый фон и коллаж из глазного яблока, старого Mac, спрей-баллончиков, оригами-журавлика и кота с тремя головами. Подпись Born Makers лежит поверх этого шума без единой отсылки к конкретному кейсу — бренд агентства держится не на портфолио с ходу, а на плотности и абсурдности самого захода.
https://madeinhaus.com
Haus держит клиентов уровня OpenAI и Netflix в списке работ, а хиро при этом — кислотно-жёлтый фон и коллаж из глазного яблока, старого Mac, спрей-баллончиков, оригами-журавлика и кота с тремя головами. Подпись Born Makers лежит поверх этого шума без единой отсылки к конкретному кейсу — бренд агентства держится не на портфолио с ходу, а на плотности и абсурдности самого захода.
https://madeinhaus.com
Aura Bora
У бренда газировки без сахара скидка на первый заказ — не форма с почтой, а мини-игра: маскот-ёж собирает те же ингредиенты, что и в банках — лайм-кардамон, лаванда-огурец, кактус-роза — и по итогам выдаёт промокод. Обычный приём для захвата e-mail пересобран так, чтобы играть приходилось в собственный вкусовой ряд бренда, а не в абстрактный кликер.
https://aurabora.com
У бренда газировки без сахара скидка на первый заказ — не форма с почтой, а мини-игра: маскот-ёж собирает те же ингредиенты, что и в банках — лайм-кардамон, лаванда-огурец, кактус-роза — и по итогам выдаёт промокод. Обычный приём для захвата e-mail пересобран так, чтобы играть приходилось в собственный вкусовой ряд бренда, а не в абстрактный кликер.
https://aurabora.com
Sound Ethics
Sound Ethics — исследовательская организация на стыке музыки и AI: отслеживает, какие треки попали в обучающие датасеты, и строит системы атрибуции для авторов, а сейчас курирует University AI Music Research Initiative — 12 команд в 8 университетских лабораториях, включая Berkeley, UCLA и NYU. Свои ценности сайт раскладывает метафорой пластинки: одна сторона диска — Embrace AI, другая — Champion Artists. Сделала студия SF.CO (Some Folk).
https://www.soundethics.org
Sound Ethics — исследовательская организация на стыке музыки и AI: отслеживает, какие треки попали в обучающие датасеты, и строит системы атрибуции для авторов, а сейчас курирует University AI Music Research Initiative — 12 команд в 8 университетских лабораториях, включая Berkeley, UCLA и NYU. Свои ценности сайт раскладывает метафорой пластинки: одна сторона диска — Embrace AI, другая — Champion Artists. Сделала студия SF.CO (Some Folk).
https://www.soundethics.org
This media is not supported in your browser
VIEW IN TELEGRAM
Acid Crunch
Открываешь Acid Crunch, и лента с работами разворачивается зумом, будто заходишь внутрь одного кадра. Подписи-метки над превью каждый раз складываются в новый узор — при повторном заходе получаешь другую раскладку той же ленты. Roman Baturin и Misha Matveev собрали это на React/Next.js, Awwwards отметил Honorable Mention в июле 2026.
https://www.awwwards.com/sites/acid-crunch
Открываешь Acid Crunch, и лента с работами разворачивается зумом, будто заходишь внутрь одного кадра. Подписи-метки над превью каждый раз складываются в новый узор — при повторном заходе получаешь другую раскладку той же ленты. Roman Baturin и Misha Matveev собрали это на React/Next.js, Awwwards отметил Honorable Mention в июле 2026.
https://www.awwwards.com/sites/acid-crunch
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/
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
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
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
Смотрю на витрину 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/
++hellohello вместе с Pablo Picart и Ismael Martínez сделали сайт-посвящение уругвайскому инженеру Элвадио Дьесте, который проектировал самонесущие кирпичные своды. Хиро на Three.js и GSAP не иллюстрирует эти своды фотографией, а превращает камеру в участника: она безостановочно летит вглубь одной и той же кирпичной оболочки, кладка расступается слоями, и сама навигация по сайту воспроизводит логику вложенного, повторяющегося свода. Awwwards отметил проект Honorable Mention в августе 2026 с оценкой 8.4 из 10.
https://www.awwwards.com/sites/eladio-dieste/