Whistles and Papers

Ставь ⭐️, если тоже хочешь покупать себе такие красивые коробки с предзаказом GTA VI в профиль Telegram.

А пока лишь получится только предзаказать через @wallet, да где ж столько поинтов взять.

Пока все вокруг сходят с ума от вернувшегося доступа к Fable, я продолжаю сходить с ума в принципе, но уже от Opus.

Меня это безграничье, конечно, восхищает хотя бы потому, что теперь я могу прототипы на фронте делать очень близкими к жизни. Но мне и этого стало мало, потому я решил, что мне в моей жизни не хватает ностальгии.

На фоне ЧМ я вспомнил, что в школе очень любил игру на свой Sony Ericsson — Ultimate Street Soccer. Мы с пацанами оставались после уроков классе в 3-ем, чтобы дружно зарубиться.

Это такой аркадный простой футбол, где ты финтишь, накаливаешь энергию, красиво забиваешь. Жаль лишь, что по Bluetooth не сделали мультиплеер — я бы наверное вообще домой тогда не приходил.

Короче, пара выходных и Opus собрал мне полноценный порт этой игры в браузере, написанный целиком на Typescript. Теперь в него можно не просто рубиться с клавиатуры мака, но и подключить DualSense, потому что у браузеров оказывается есть целый Gamepad API. Мог ли я с эмулятора поиграть? Да, но это же скучно.

На видео выше видно, как я целых 30 секунд не могу гол забить, сколько лет прошло всё же!

Зато сколько радости мне это принесло, вы бы знали. Если я ещё полгода не пишу посты сюда — скорее всего я продолжаю сходить с ума таким образом. 🙂

Боже храни Cursor и ChatGPT, потому что благодаря им мне стало гораздо интереснее и понятнее как разбираться в React и современных CSS и JS. Читать и разбираться в этом, интереснее чем вслепую писать код.

Таббар — самый напичканный компонент, который я вообще когда-либо проектировал.

Так появился сначала <GlassEffect /> в нашем проекте. Код самого компонента в GitHub.

Наверное, одна из довольно простых штук, которую я отдавал инженерам и которая теперь в проде используется. В своей сути просто хитрая конфигурация блюра, бордера и эффектов наложений, чтобы чуть отзывчивее и похоже смотреться в пространстве.

—

Таббар как многослойный пирог. У него два слоя с иконками и лейблами. Одна часть активна, другая неактивная. Но чтоб индикатор умел красиво менять свой цвет (не примитивным транзишеном) — используется clip-path, чьи координаты меняются, когда меняется таб.

—

Мой любимый хак: градиентный фон. Это не просто прямоугольник с градиентом — в нём есть дырка под размер таббара. Вся проблема в наслоении. Блюр иначе будет размывать цвета уже пропущенные через градиент, и весь эффект от размытия пропадёт.

Красота в том, что это — всего лишь SVG с вырезом. Которая умеет динамически менять свой размер.

—

Весь этот многослойный адок можно тоже подсмотреть на GitHub. На прототипы такого кода хватает, но умелые руки более опытных ребят, думаю, переписали это всё.

На проект было затрачено:
— Непонятно сколько часов моего сна, потому что я безумный и мне было просто кайфово это ковырять.
— Десятки тысяч токенов в курсоре.
— Не могу подсчитать какое кол-во нервных клеток.
— Крепкая нервная система одного фронтендера.

На выходе получили:
— Навороченный таббар в вебе.

К слову, там энтузиасты раскопали конфигурацию самого Liquid Glass. Там под капотом ребята, гоняют, например все цвета в YUV (wiki). Я такой прикол с оптимизациями раньше встречал где-то только в оптимизациях стикеров Телеграма.

https://x.com/jh_pointer/status/1970529112730255779

Мой ресерч не закончился на том, что я посмотрел на эффект преломления стекла, с интересом почитал про математику, и поплакал. Потому что перфоманс веба от самостоятельных реализаций такого добра катастрофически пострадает. Мы не можем себе позволить замедлить навигацию приложения. Окей, вопрос: а что мы тогда вообще можем?

За текущим нативным таббаром помимо эффекта стекла можно заметить сразу несколько штук:

1. Он отзывчив. Он откликается сразу пачкой эффектов на нажатие. Он немножко вопреки привычному вдавливанию растекается и становится крупнее.

2. Он рефлексирует на нажатие усилением света, используя притом HDR. (В начале я ошибочно думал, что это всё хитрость пространства Display P3).

3. Активный блоб перетекает, да ещё и дисперсией окружения, отсвечивая объекты вокруг.

4. Внутри самого материала стекла (и градиента вокруг) такое кол-во блендингов, что я даже в Фигме не могу настолько близко повторить эффекты.

Вычеркиваем стекло, отражение при тактильности, упрощаем блендинги, и кажется остальное ещё более-менее доступно для того, чтобы повторить этот опыт.

На 2-м пункте я отлетел: мне честно было просто интересно насколько хитро это было реализовано, потому что где-то внутреннее я думал, что можно через Display P3 сделать белый побелее (лол). И где-то на просторах твиттера я увидел, что это HDR в 200 nit. Начиная с 26.2 слава богу поменьше. Чиселка в 200 nit опытным путём была вытащена из Blackmagic Design.

HDR в вебе доступен для видео. Я тогда думал засунуть кусок видео в 200 nit в квадрат и при нажатии им просвечивать. Но такие приколы не дружат с обычным opacity, да и перекрашивать это было бы непросто. Потому я всю эту идею отверг.

Сам HDR в вебе можно потыкать вот тут: https://dt.in.th/HDRQRCode

Пора себе признаться: я жутко скучаю по проектированию нативных аппов.

Эта скука обусловлена тем, что проектируешь веб-приложение, которое мимикрирует под нативный апп. А вебу заметно не хватает того спектра возможностей, что доступна тебе в нативе из коробки.

Например, мы Wallet в самом начале пути проектировали довольно линейно, потому что зачем нам на пять экранов глубина? И вот появление таббара в приложении как бы подразумевает перевод накопившегося легаси на новые рельсы. В итоге ходишь, пишешь документации как должна вести себя стековая навигация и на пальцах рассказываешь теорию, которая обычно уже работает.

Кто бы знал, что это не последнее от чего приходится посходить с ума. Но вот рукой машет Apple с Liquid Glass и, внезапно, безумным таббаром.

На видео: наш обновленный таббар в Wallet. Изрядно пока подлагивает при переключениями между кастоди и нон-кастоди, но авось ещё дооптимизируем.

Какие-то новые ощущения.

Раньше: вау, релиз новой iOS.
Сейчас: о, в Cursor добавили новую модельку. Срочно тестить!

Liquid Glass в Wallet детектед...

Мог ли я три года назад представить, что смогу в Wallet в Telegram купить токенизированных акций Nvidia, и даже скинуть друзьям их на ДР? А теперь и представлять не надо.

Про то, как интересно реверс-инжинирить новые материалы Liquid Glass предстоит написать ещё отдельный пост.

(Как и поплакаться, что в браузерах и в этих ваших реактах, этого безумия увидеть не дадут).

Но фундаментальные технологии уже описаны, а значит ими нужно учиться пользоваться.

А пока: минутка восхищения пост. Подробная математика, описание физики работы стёкол, и даже их реализация на базе SVG-фильтров: https://kube.io/blog/liquid-glass-css-svg/

Иронично, что всё это в Safari пока не работает, и похоже, что в ближайшее время не будет.

1 · 2 · 3 · 4 · 5

Дальше — visionOS. И тут незаметный для многих шаг берёт для себя новое устройство, где проведено очень много работы с новыми материалами.

Оттуда тянутся новые технологии, которые сейчас можно замечать в последних iOS: типа имитационного 3D параллакса в фотографиях, подстройки материалов под внешнее окружение, и новой попытки работать с глубиной.

Здесь микрофон хочется передать Серёже Томилову, что глубоко поковырял эти приёмы сквозь несколько систем — https://telegra.ph/Redizajn-tvOS17-ili-kuda-vsyo-katitsya-10-28.

1 · 2 · 3 · 4 · 5

Особенно интересно у Apple всё это начинает выстраиваться в большой, красивый и страшно техничный визуальный язык.

Например, вся фундаментальность жидкости и плавности существует уже давно.

Всю преемственность для текущих навигационных контролов можно было поймать уже три года назад с релизом Dynamic Island — x.com/chan_k/status/1570795751764295682

Chan Karunamuni — это главная звезда дизайна в Apple сейчас. Просто взгляните на список его релизов: chankarunamuni.com. Совсем неудивительно, что спустя три года он и будет делать Liquid Glass.

1 · 2 · 3 · 4 · 5

А теперь для всех таких интересностей есть motion.dev.

И даже для тянущихся контролов тоже нет таких больших сложностей в вебе — https://motion.dev/tutorials/react-ios-slider

1 · 2 · 3 · 4 · 5

Когда выходит новая iOS со всякими новыми штуками аля "мы тут сделали новый безумный шейдер для стекла" или же "наши объекты в динамике тянутся намного интереснее", то ты невольно уходишь глубоко в реверс-инжиниринг таких штук.

В своё время было интересно разобраться с математикой пружины у Apple.

Раз уж мы ставим перед собой цель "полностью повторить", то обращаться надо к оригиналу.

Тогда была найдена оригинальная реализация пружинки в webkit, а поверх неё уже целая куча теории и практики — https://webkit.org/demos/spring/.

Тогда ещё никаких ChatGPT не было, потому я себе накидал простенькую визуализацию того, как пружина рассчитывается, чтоб понимать как вообще двигать параметры, чтоб работало как надо.

1 · 2 · 3 · 4 · 5

Today I learned, оказывается у ваших MacBook есть датчик наклона монитора.

Применяется он для целого множества штук: так Mac уводится в спящий режим (я был уверен, что оно работает на магнитах), регулируется подсветка, в AR-сценариях так калибруется позиция. Наверняка, и в магазинах Apple так расставляет Mac под нужный угол.

Конечно же, умельцы раскопали API. И... привязали к датчику звук скрипящей двери.

Источник: x.com/samhenrigold

Вы приходите на дизайн-синк: вы нарисовали новый компонент, и пытаетесь обосновать команде своё решение.

Вас просят пояснить за выравнивание. Ваши действия?

Отдельная личная ачивка — мы успели обновить ещё и https://wallet.tg, а не просто дособрать продукт, чтобы запустить его на новом рынке.

Почему ачивка: оно немного в новом для меня амплуа. Этот лендинг верстал руками я сам при помощи куда более опытных товарищей.

Это не Framer или Figma — это вся красота собрана на Next.js. Чуть позже туда доедут ещё более приятные вещи в виде лотти-анимаций, а пока можно и подышать.

Сам — потому что жутко замучал бы разработчиков своей душностью и перебором всяких микро-штук в вёрстке.

А вот теперь поехали штуки, ради которых всё затевалось.

Как говорится, используйте наушники при просмотре этого видео!

https://www.cnbc.com/2025/07/22/telegram-crypto-wallet-us.html

Задачи про ребрендинг — мои любимые. Это всегда хороший момент, чтобы привести систему в порядок.

Этот пост, чтобы зафиксировать порядок вещей, которые мы собирали внутри:

Года два назад мы запускали TON Space. Тогда TON Space Wallet встал в список ассетов внутри кастоди.

Это было такое окошко в мир экосистемы. Мол, вот тебе кошелёк, у которого есть под-режим с жетонами, коллекциями, подписями транзакций, etc.

Дальше TON Space Wallet перерос уже своё нахождение в кошельке — оброс фичами и самостоятельными разделами. Переехал табом в шапку и дал переключаться между кастоди- и селф-кастоди.

Образовалась матрёшка. Есть Wallet внутри Wallet, а есть TON Space внутри Wallet, но есть Wallet, который кастоди, и это всё Wallet.

А ещё вот появилась фича в TON Space, так этот ваш TON Space находится в Wallet, который в Telegram. 😶‍🌫️ Объяснять такое, мягко говоря, больно и тяжело.

Wallet in Telegram — теперь зонтик. В котором есть два режима Crypto Wallet (где поддерживается не только TON и уже нативно есть даже ETH) и TON Wallet — всё необходимое для жизни и взаимодействия с экосистемой есть там.

ТON Space теперь TON Wallet. Я эти ребрендинги / ренеймы так люблю, потому что снаружи поменялись слова, а за ними — много всего.

Stay tuned, там впереди ещё столько веселья!

К этому моменту, мы с командой вдохнули совсем новую жизнь к апдейту нашего сайта — https://top.co. Так что самое время взглянуть!

Особенно нравится смотреть его с десктопа, где он ощущается ну особенно живым! (И то ли ещё будет!)

Вы бы знали как мне радостно от того, что получается удерживаться между игривостью и "мы тут вообще-то серьезные штуки делаем, надо удержаться от безудержного веселья!!"