Протягом останніх трьох десятиліть Інтернет функціонував у стані архітектурного заперечення. Він був спочатку задуманий як платформа для обміну статичними науковими роботами з фізики, але сьогодні йому доводиться візуалізувати найскладніші, інтерактивні та генеративні інтерфейси, які коли-небудь створювало людство.
В основі цієї напруги лежить одна невидима та надзвичайно дорога операція, відома як “перерахунок розкладки” (layout reflow). Щоразу, коли розробнику потрібно визначити висоту абзацу або положення рядка для створення сучасного інтерфейсу, він повинен звернутися до Document Object Model (DOM) браузера — стандарту, за допомогою якого розробники можуть створювати та модифікувати вебсторінки.
У відповідь браузер часто змушений перераховувати геометрію всієї сторінки — процес, подібний до того, як місто мусить перемальовувати всю свою карту щоразу, коли мешканець відчиняє вхідні двері.
У п’ятницю, 27 березня 2026 року, Ченг Лоу — видатний інженер-програміст, чиї роботи над React, ReScript та Midjourney визначили значну частину сучасного ландшафту фронтенду — оголосив у соціальній мережі X, що він “пройшов крізь глибини пекла”, щоб випустити рішення з відкритим вихідним кодом (ліцензія MIT): Pretext. Він створив його за допомогою інструментів “AI vibe coding” та моделей, таких як Codex від OpenAI та Claude від Anthropic.
Це бібліотека TypeScript обсягом 15 КБ без залежностей, яка дозволяє вимірювати та розміщувати багаторядковий текст повністю у “userland” (на стороні користувача), оминаючи DOM та його вузькі місця у продуктивності.
Не вдаючись у надмірну технічну деталізацію, коротко кажучи, Pretext Лоу перетворює текстові блоки в Інтернеті на повністю динамічні, інтерактивні та адаптивні простори, здатні плавно рухатися навколо будь-яких інших об’єктів на вебсторінці, зберігаючи порядок літер та пробіли між словами й рядками. Це відбувається навіть тоді, коли користувач перетягує інші об’єкти, що перетинаються з текстом, або кардинально змінює розмір вікна браузера.
Іронічно, але лише текстом важко передати, наскільки значущим є останній реліз Лоу для майбутнього всього Інтернету. На щастя, інші сторонні розробники швидко створили демонстрації з Pretext, які демонструють деякі з його найвражаючих можливостей, включно з драконом, що літає всередині блоку тексту, дихаючи вогнем, тоді як навколишні символи плавляться і відтісняються формою дракона, що звивається.
Інший розробник створив додаток, який вимагає від користувача тримати смартфон абсолютно горизонтально, щоб читати текст — нахил пристрою в один чи інший бік призводить до того, що всі літери падають і збираються внизу, ніби кожен об’єкт був фізичним предметом, скинутим з пласкої поверхні. Хтось навіть запрограмував вебдодаток, що дозволяє одночасно дивитися повнометражний фільм (новий “Project Hail Mary” з Райаном Гослінгом) та читати книгу, на якій він базується, — все це відтворено за допомогою інтерактивного, рухомого, швидкого та чуйного тексту.
Хоча деякі критики одразу вказали на те, що багато з цих яскравих демонстрацій роблять основний текст нечитабельним або нерозбірливим, вони упускають головне: за допомогою Pretext одна людина (Лоу), використовуючи інструменти AI-кодування, самотужки революціонізувала те, що можливо для *всіх* і *будь-кого* в дизайні веб та інтерактивності. Проект існує менше тижня — звісно, перші користувачі лише починають освоювати нові можливості, які раніше вимагали складних, індивідуальних інструкцій і не могли бути масштабовані або узагальнені.
Звісно, найбільше цим досягненням одразу ж будуть вражені та зачеплені дизайнери та типографи — але насправді, будь-хто, хто витрачав час на розміщення блоку тексту та обгортання його навколо зображень чи інших вбудованих інтерактивних елементів на вебсторінці, ймовірно, буде зацікавлений у цьому. Але будь-хто, хто *користується* Інтернетом — усі 6 мільярдів людей і більше — ймовірно, відчують деякі ефекти цього релізу незабаром, оскільки він пошириться на сайти, які ми відвідуємо та використовуємо щодня.
І вже зараз деякі розробники працюють над більш корисними функціями, наприклад, користувацьким резонатором розміру шрифту та оптимізатором міжлітерного інтервалу для людей з дислексією:
З огляду на це, можливо, не дивно дізнатися, що протягом 48 годин проект набрав понад 14 000 зірок на GitHub та 19 мільйонів переглядів у X, сигналізуючи про те, що багато хто вважає фундаментальним зрушенням у способі побудови Інтернету.
Це також демонструє, що кодування за допомогою ШІ вийшло за межі генерації стандартного коду і привело до фундаментальних архітектурних проривів. Для підприємств це означає нову еру, коли високопродуктивні інженерні команди можуть використовувати ШІ для створення індивідуальної, високоефективної інфраструктури, яка оминає багаторічні обмеження платформи, ефективно відокремлюючи інновації продуктів від повільного циклу стандартизації браузерів у галузі.
Геометрія вузького місця
Щоб зрозуміти, чому Pretext важливий, потрібно усвідомити високу вартість “вимірювання” елементів в Інтернеті. Стандартні API браузерів, такі як getBoundingClientRect або offsetHeight, відомі тим, що викликають “layout thrashing” (затримки через багаторазове перерахування розкладки).
У сучасному інтерфейсі — уявіть собі сітку masonry з тисяч текстових полів або адаптивний редакційний макет — ці вимірювання відбуваються в “гарячому шляху” (hot path) рендерингу. Якщо браузеру доводиться зупинятися і розраховувати розкладку щоразу, коли користувач прокручує сторінку або ШІ генерує нове речення, частота кадрів падає, акумулятор розряджається, а користувацький досвід стає переривчастим.
Інсайтом Лоу з Pretext було відокремлення розміщення тексту від DOM. Використовуючи двигун метрик шрифтів Canvas браузера як “істину в останній інстанції” та поєднуючи його з чистою арифметикою, Pretext може точно передбачити, де опиниться кожен символ, слово та рядок, ніколи не звертаючись до вузла DOM.
Розрив у продуктивності вражає. Згідно з бенчмарками проекту, функція layout() Pretext може обробити пакет із 500 різних текстів приблизно за **0.09 мс**. Порівняно з традиційним читанням DOM, це становить **300–600-кратне збільшення продуктивності**. Ця швидкість перетворює розрахунок розкладки з важкої, асинхронної роботи на синхронний, передбачуваний примітив — той, що може працювати зі швидкістю 120 кадрів на секунду навіть на мобільних пристроях.
Технологія: розділення підготовки та розміщення
Елегантність Pretext полягає в його двоступеневій моделі виконання, розробленій для максимальної ефективності:
-
prepare(text, font): Це одноразовий етап “важкої роботи”. Бібліотека нормалізує пробіли, сегментує текст, застосовує специфічні для мови правила з’єднання та вимірює сегменти за допомогою Canvas. Результат кешується як непрозорий набір даних.
-
layout(preparedData, maxWidth, lineHeight): Це “гарячий шлях”. Це чиста арифметика, яка бере підготовлені дані та розраховує висоту або кількість рядків на основі заданої ширини.
Оскільки layout() — це просто математика, її можна викликати багаторазово під час зміни розміру вікна або фізичної симуляції без жодних штрафів за продуктивність. Вона підтримує складні типографські потреби, які раніше було неможливо ефективно обробляти в userland:
-
Змішаний двонаправлений (bidi) текст: Обробка англійської, арабської та корейської мов в одному реченні без порушення розкладки.
-
Розрив графем: Гарантія того, що емодзі або складні кластери символів не будуть розбиті між рядками.
-
Контроль пробілів: Збереження табуляцій та жорстких розривів для коду або поезії за допомогою логіки white-space: pre-wrap.
“Пеклова” подорож та петля зворотного зв’язку зі ШІ
Технічне завдання Pretext полягало не лише в написанні математики; ключовим було забезпечення того, щоб математика відповідала “істині” фактичного рендерингу тексту різними браузерами (Chrome, Safari, Firefox). Рендеринг тексту сумнозвісно наповнений особливостями, від того, як різні двигуни обробляють кернінг, до специфіки евристики розривів рядків.
Лоу розповів, що бібліотека була побудована за допомогою “методу ітерацій, дружніх до ШІ”. Шляхом ітеративного запитування моделей, таких як Claude та Codex, для узгодження логіки розміщення TypeScript з фактичним рендерингом браузера на величезних корпусах даних — включно з повним текстом “Великого Гетсбі” та різноманітними багатомовними наборами даних — йому вдалося досягти піксельної точності без необхідності використання важких бінарних файлів WebAssembly (WASM) або бібліотек для парсингу шрифтів.
Ефект доміно: вихідні, повні демонстрацій
Випуск Pretext негайно вилився в серію радикальних експериментів у X та ширшій спільноті розробників. Початкові демонстрації, представлені Лоу в X, дали уявлення про новий світ:
-
Редакційний рушій: Багатоколонний макет журналу, де текст плавно обтікає перетягувані сфери, перераховуючись у реальному часі зі швидкістю 60 кадрів на секунду.
-
Віртуалізація masonry: Демонстрація, що показує сотні тисяч текстових блоків змінної висоти. Передбачення висоти зводиться до лінійного проходження за кешованими висотами.
-
Бульбашки, що стискаються: Бульбашки чату, які розраховують найвужчу можливу ширину для багаторядкового тексту, усуваючи марну площу.
Відповідь спільноти була такою ж вибуховою. Протягом 72 годин розробники почали розсувати межі:
-
@@yiningkarlli реалізував алгоритм вирівнювання абзаців Knuth-Plass, переносячи високоякісну друкарську якість — зменшуючи “річки” білих пробілів шляхом оцінки цілих абзаців як одиниць — в Інтернет.
-
@Talsiach створив “X Times”, газету на базі ШІ, яка використовує Grok для аналізу зображень та постів X, застосовуючи Pretext для миттєвого розрахунку макету першої шпальти.
-
@Kaygeeartworks продемонстрував симуляцію рідини Three.js з рибами, що плавають крізь текстові елементи та навколо них, причому текст реагує на фізику з високою частотою кадрів.
-
@KageNoCoder запустив Pretext-Flow, інтерактивний майданчик для розміщення тексту навколо кастомних медіа, таких як прозорі PNG або відео.
-
@cocktailpeanut та @stevibe продемонстрували Змійку в ASCII-арті та фізику закону Гука з динамічним перерахунком тексту.
-
@kho створив візуалізацію BioMap з 52 блоками біомаркерів, що виконують перерахунок розкладки за 0.04 мс кожного кадру.
Філософські зрушення та “товстий клієнт”
Реакція на Pretext була переважно захопленою з боку лідерів фронтенду. Гільєрмо Раух, генеральний директор Vercel, та Райан Флоренс з Remix високо оцінили приріст продуктивності бібліотеки. Тай Зондей відзначив потенціал для швидкого читання нейровідмінних людей завдяки динамічній растеризації тексту.
Однак реліз також розпалив nuanced дебати про майбутнє веб-стандартів. Критики попереджали про “товсті клієнти” (thick client) та надмірне розширення функціоналу, стверджуючи, що обхід DOM віддаляє нас від простоти систем гіпертексту. У відповідь Лоу розмірковував про спадщину обчислень. Він вказав на еволюцію iOS — яка почалася з PostScript, статичного формату для принтерів, і перетворилася на відшліфовану, скриптовану платформу. Лоу стверджує, що Інтернет залишався застряглим у парадигмі “формату документів”, накладаючи скрипти поверх статичного ядра доти, доки складність не досягла точки зменшення віддачі. Pretext — це спроба перезапустити цю розмову, розглядаючи розміщення як інтерпретатор — набір функцій, якими можуть маніпулювати розробники — а не як чорну скриньку даних, керовану браузером.
Стратегічний аналіз: Приймати чи чекати?
Pretext випущено під ліцензією MIT, що гарантує його статус загальнодоступного інструменту як для спільноти розробників, так і для комерційних підприємств. Це не просто бібліотека для кращого вигляду бульбашок чату; це інструмент інфраструктурного рівня, який відокремлює візуальне представлення інформації від архітектурних обмежень Інтернету 1990-х років.
Вирішивши останнє і найбільше вузьке місце вимірювання тексту, Лоу надав Інтернету шлях до того, щоб нарешті конкурувати з нативними платформами за плинністю та виразністю. Незалежно від того, чи буде він використовуватися для високоякісного редакційного дизайну, віртуалізованих стрічок зі швидкістю 120 кадрів на секунду, чи інтерфейсів генеративного ШІ, Pretext знаменує момент, коли текст в Інтернеті перестав бути статичним документом і став справді програмованим середовищем.
Організаціям слід негайно прийняти Pretext, якщо вони розробляють “Генеративний UI” (Generative UI) або високочастотні інформаційні панелі, але робити це слід із чітким розумінням компромісу “товстого клієнта”.
-
Чому варто прийняти: Перехід від продуктивності розрахунку розкладки O(N) до O(log N) або O(1) — це не інкрементальне оновлення; це архітектурний прорив. Якщо ваш продукт включає інтерфейс чату, який заїкається під час довгих відповідей, або сітку masonry, яка “підстрибує” під час розрахунку висоти, Pretext — це рішення. Він дозволяє створювати інтерфейси, які відчуваються такими ж швидкими, як і базові моделі, що з’являються.
-
На що звернути увагу: Впровадження вимагає спеціалізованого кадрового резерву. Це вже не “просто CSS”; це інженерія, що враховує типографіку. Організації також повинні усвідомлювати, що, переносячи розрахунок розкладки в userland, вони стають “опікунами” доступності та стандартної поведінки, яку раніше безкоштовно забезпечував браузер.
Зрештою, Pretext є першим значним кроком до Інтернету, який більше нагадує ігровий рушій, а не статичний документ. Організації, які приймуть цю “інтерпретаторську” модель розміщення, будуть тими, хто визначатиме візуальну мову ери ШІ.
Прогноз ІТ-Блогу: Pretext, ймовірно, стане стандартом де-факто для складного розміщення тексту в Інтернеті, дозволяючи створювати надзвичайно динамічні та інтерактивні веб-інтерфейси, що змагатимуться з нативними додатками. Його вплив буде найвідчутнішим у сферах контент-орієнтованих платформ, соціальних мереж та інструментів для творців.
За матеріалами: venturebeat.com