Тримайте новий відос, про ЗСУ. Буду благодарен если репостните в инсте:

https://www.instagram.com/tv/CeQ-7vDKXDh/?igshid=YmMyMTA2M2Y=

100 днів

#ЦПД_застерігає: керівництво рф поширює фейки щодо «дня росії», щоб додати «святу» значимості та історичної ваги

🔺 В день ухвалення Декларації про державний суверенітет рф поширюються історичні, мілітаристські та пропагандистські наративи щодо колишніх звершень «тисячолітньої історії»:

🔹 мзс рф в якості вітання розмістив наратив «ми ввічливо просили не розширюватися на схід»
🔹 путін заявив, що «пишається звершеннями і ратними перемогами своїх предків, хто в битвах утверджував гідну роль росії в світі»

❗️Та тут слід нагадати:
🔸 «триколор» впровадили за царя Петра І для обману морської охорони балтійських портів
🔸 «двоголового орла» вкрали у Візантії для підтвердження тези «москва – третій Рим»
🔸 назву «Русь» викрали у 1721 році, тоді ж Петро І проголосив державу «російською імперією», а себе – імператором

Варто пам’ятати, що 300 років формального існування росії на карті є всього лише ланцюжком фейків та жорстокої імперської агресії

#інфотерор

TG | FB | INST | YT | TW

Що ці японці собі дозволяють? Дуже цікавий інтерактив, з найофігеннішим перформансом!

https://www.kubota.com/futurecube/

Вітаємо ще одного автора каналу — @zhenya_nem! Це його дебютний пост :)

#inspiration

https://www.youtube.com/watch?v=PjHKcdeRQiY

Відтворення ефекту на https://www.zikd.space/de від Юри Артюха. Заодно показує як модифікувати матеріали тришки, що є дуже потужною технікою, і дозволяє робити дива в браузері не пишучи кілометри реалізацій PBR. Хоча в цьому випадку мабуть можна було взяти геометрію ціліндра замість площини і керувати полем offset текстур.

До речі, нагадую про зручний спосіб дивитись шейдери тришки.

Загалом це крутий, хоч і доволі простий ефект. Було б цікаво поекспериментувати з оживленням типографіки і самої форми — це відкриє величезний простір до кінетичної типографіки наступного рівня. Хто спробує і в кого вийде, напишу його ім'я на снаряді 😉😄

#tutorial #reference

Як швидко і просто зробити тривимірний сайт без знання WebGL

Пропоную вашій увазі чудовий туторіал по spline.design

https://www.youtube.com/watch?v=EJxeMbDTkVI

Виглядає дуже круто! Не стільки завдяки тривимірності, а більше завдяки крутому дизайну ще в фігмі. Хоча в 3D стало тільки краще 😉

Тут можна помацати кінцевий результат

#tutorial

Для мене було цікаво як розробники Spline зробили таку швидку реалізацію розмиття, і на щастя прямо в коді шейдера є посилання на шейдертой. Вони навіть зробили визначення сили розмиття в залежності від глибини, але для цього всі об'єкти позаду "скла" рендеряться вдруге з DepthMaterial. Тому ця фіча має прихований оверхед. Подивитись можна самому з допомогою SpectorJS — взагалі рекомендую аналізувати з його допомогою всі цікаві вам сайти, дуже круто бустить скіл 😉

До речі, ще одне відео з цією технікою, цікава ідея:
https://www.youtube.com/watch?v=59NVCBo26TA

Сам Spline це майбутнє масове 3D в вебі, покриває багато потреб дизайнерів і здешевлює виробництво. Хороша новина в тому, що ті хто вміють робити вау за межами можливостей Spline будуть мати більше роботи через розширення ринку. Також можна почати корисутватись Spline і робити те саме 3D що зараз, тільки швидше. Вангую появу професії по сплайну, як от сталось з вебфлоу. І до речі, вони одне з одним чудово інтегруються.

#tool #reference

Дуже крута демка по інтеграції HTML інтерфейсу в тривимірну WebGL сцену.

https://codesandbox.io/s/interactive-spline-scene-live-html-f79ucc

Сцену зроблено в Spline (знову він, так :), інтегровано за допомогою react three fiber. До речі екосистема r3f поповнюється такими шалено крутими речами, що цьому варто присвятити цілу серію постів. Але зараз не про те. Мене вразило як круто це працює, зберігається повний функціонал HTML, навіть є автозаповнення імейлу (я для відео почистив). Це значно крутіше, ніж у будь-яких подібних демо.

Ефект досягається за рахунок накладання canvas з прозорим віконцем поверх сторінки, а контейнеру сторінки прописаний стиль transform: matrix3d(...), і ця матриця оновлюється відповідно до 3D сцени. Можна помітити як воно іноді не встигає, але з тим нічого не зробиш.

Очевидно, таке рішення дуже обмежене в можливостях, але. Курсор у вигляді руки тицяє по DOM кнопкам! І від неї ще відкидається тінь на сцену! І ховери! Дуже дуже круто 😍

#reference

Дуже крута демка по real-time симуляції бавовни з path-tracing

Нажаль, в вебі нам таке не світить, хоча воно доволі добре працює на українській платформі Crimea — обчислення кадру займає менше ніж 1 мс. Сподіваюсь ми побачимо більше подібних демок і врешті зможемо самі використовувати цю платформу. Технічні деталі цієї нової розробки поки не зрозумілі, але схоже що це переверне уявлення про рендеринг в майбутньому 🔥😏

Автор: ЗСУ

Сайт-портфоліо David Heckhoff
Мабуть це буде тиждень мультяшного дизайну :D

https://david-hckh.com/

Цікаві анімації і мені прямо зайшло як на першому екрані він щось там собі друкує і крутить колесо мишки :) Дрібниця, що створює всю атмосферу.

Дрібниці, деталі і нюанси зазвичай дуже посилюють враження від досвіду. Чим більше референсів ви бачили, тим більше різних дрібниць ви можете вигадати і втілити, тим самим піднімаючи клас своєї роботи.

#reference

Сайт візитка Arno Di Nunzio.

https://adinunz.io/

Крутий інтерактив, водночас мінімалістичний і багатий дизайн, кайф :) І так, елементи падають по скролу 🔥

З неба капають сльози клонів портфоліо Bruno Simon 😅

Рефки для сьогоднішніх постів підказав автор @blinklinks. Обіцяю, наступного тижня буде інший дизайн :)

#reference

Продовжую тиждень мультяшного дизайну в вебі — портфоліо дизайнера і арт директора Peter Tarka

https://petertarka.com/

Цей сайт насправді означав прихід відео на прозорому тлі в веб. Нарешті. Йому вже кілька місяців, але не згадати його не можна. Тепер можна робити ще більше різних крутих штук і я це вже обкатав в продакшені, може колись напишу про те :)

Для всіх нормальних браузерів пакуємо png секвенції так:

ffmpeg -framerate 30 -f image2 -i ./png/input%03d.png -c:v libvpx-vp9 -pix_fmt yuva420p output.webm

Звісно, потрібно при цьому встановити ffmpeg :)

Для Safari беремо MacOS і пакуємо ту саму секвенцію використовуючи QuickTime. Завелось тільки так 🤷‍♂️

#reference

Міні курс по відтворенню bokoko33.me

https://www.youtube.com/watch?v=rxTb9ys834w

Такий собі скорочений безкоштовний аналог threejs-journey.com. Але щоб отримати готовий код доведеться заплатити аж 5$ :)

У відео ви побачите:
• Моделювання в Blender
• Імпорт в Three.js
• Приклад непоганої організації коду
• Як працювати з хелперами щоб зробити розробку зручнішою
• Використання ScrollTrigger
• Адаптивність
• Анімації
• Деплой сайту на Vercel

#tutorial

Закінчуємо тиждень мультиків солов'їною музикою.

https://folk-ukraine.com/

Аплікації це валідна техніка для мультиплікації, та і сайт пушка. Божественна і навігація, і дизайн, і контент, і це креативно 😄

Всіх обіймаю, Україна це любов, але ворогам — смерть. Донатьте на ЗСУ, самі вже знаєте куди. Спокійної п'ятниці!

PS: Вигнав з каналу тисячу москалів, буду вдячний якщо запросите своїх колег підписатися 😉

@creative_coder

Доброго ранку, країна незламних! 🇺🇦

Американський піхотинець

https://www.youtube.com/watch?v=05Hlpvq9bw4

Рекомендую подивитися і влаштувати дискусію в коментарях. Бо там дійсно є про що подискутувати. Зараз саме час закладати основи майбутнього нашої держави, а держава вона ж в головах 😉