TGViewer
Будни разработчика Будни разработчика @htmlshit · 14.4K subscribers
Post #4233 1.52K
#компонент дня

Bramus сделал <hic-pageflip> — натуральное перелистывание страниц с загибами, тенями и всей этой физикой бумажной книжки. Сам эффект давно можно было сделать на Canvas/WebGL, проблема была в другом: содержимое страницы превращалось, по сути, в картинку. Прощай выделение текста, ссылки, accessibility и нормальный DOM.

Вот: https://www.bram.us/2026/09/02/html-in-canvas-pageflip/

Кстати, лет шесть назад уже был пост о подобном эффекте, прелесть той статьи — разложена вся геометрия: https://t.me/htmlshit/400

Но там не 3D, там clip-path и динамические тени.

А тут используется экспериментальный HTML-in-Canvas API: браузер умеет отрисовывать настоящий HTML через Canvas/WebGL, при этом исходные элементы остаются живыми DOM-элементами. Поэтому текст можно выделять, ссылки нажимаются, скринридеры продолжают видеть содержимое — а сверху на всё это можно навесить настоящее 3D-деформирование страницы.

Удобно? Не то слово!

Пока, правда, это работает в Chrome за флагом canvas-draw-element, а сам API ещё меняется. Но направление очень интересное. Нет никаких сомнений, что это попрёт за пределы экспериментов.

В лучших традициях Macromedia Flash!

#canvas #html #webgl #webgpu
  • 🔥 14
  • 👍 2
  • ❤ 1
More from @htmlshit
  1. Sep 25, 2026#фишка дня Вот такой короткий набор CSS правил позволит текстовому полю расти вместе со вв…
  2. Sep 25, 2026#статья дня Ахмад Шадид придумал, как на CSS определить, что два элемента начинают пересек…
  3. Sep 24, 2026#релиз дня Похоже, следующим коллегой разработчика станет не один ИИ-агент, а целая команд…
  4. Sep 24, 2026#инструмент дня Кто-нибудь, остановите это безумие! Очередная библиотека подсветки синтакс…
  5. Sep 24, 2026#статья дня Polypane выпустили прекрасную статью о том, что вы все делаете скролл на стран…
  6. Sep 23, 2026Одно из модных слов этого года в ИИ — харнесс. Если совсем грубо, это вся обвязка вокруг с…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →