Инженер Midjourney представил открытый проект Pretext, призванный произвести революцию в веб-дизайне

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

В основе этого противоречия лежит одна невидимая и непомерно дорогая операция, известная как «перекомпоновка макета» (layout reflow). Всякий раз, когда разработчику нужно узнать высоту абзаца или положение строки для создания современного интерфейса, он вынужден обращаться к объектной модели документа (DOM) браузера — стандартному механизму, с помощью которого разработчики могут создавать и изменять веб-страницы.

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

В прошлую пятницу, 27 марта 2026 года, Чен Лу (Cheng Lou) — выдающийся инженер-программист, чей вклад в React, ReScript и Midjourney во многом сформировал современный ландшафт фронтенд-разработки, — объявил в социальной сети X, что он «прошел через круги ада», чтобы выпустить решение с открытым исходным кодом (лицензия MIT): Pretext, которое он написал с помощью инструментов вайб-кодинга на базе ИИ и таких моделей, как Codex от OpenAI и Claude от Anthropic.

Это TypeScript-библиотека размером 15 КБ с нулевыми зависимостями, которая позволяет производить измерение многострочного текста и компоновку полностью в «пользовательском пространстве» (userland), минуя DOM и узкие места производительности.

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

По иронии судьбы, с помощью одного лишь текста сложно передать всю значимость последнего релиза Лу для будущего всего интернета. К счастью, другие сторонние разработчики быстро создали демоверсии на базе Pretext, демонстрирующие некоторые из его наиболее впечатляющих возможностей, включая дракона, который летает внутри текстового блока и изрыгает пламя, в то время как окружающие символы плавятся и разлетаются в стороны под воздействием извивающегося тела дракона.

Другой энтузиаст создал приложение, которое требует, чтобы пользователь держал свой смартфон строго горизонтально, параллельно полу, чтобы прочитать текст: наклон устройства в ту или иную сторону приводит к тому, что все буквы «падают» и скапливаются внизу, ведя себя так, будто каждая из них является физическим объектом, соскользнувшим с плоского подноса. Кто-то даже написал веб-приложение, позволяющее смотреть целый фильм (новую картину «Проект „Аве Мария“» с Райаном Гослингом в главной роли) и одновременно читать книгу, по которой она снята, причем всё это отображается в виде интерактивного, движущегося, быстрого и отзывчивого текста.

Хотя некоторые критики сразу отметили, что подобные яркие демоверсии делают исходный текст нечитаемым, они упускают из виду более важную вещь: благодаря Pretext один человек (Лу) с помощью инструментов ИИ-кодинга в одиночку совершил революцию в том, что доступно каждому в сфере веб-дизайна и интерактивности. Проект не существует еще и недели — разумеется, первые пользователи лишь царапают поверхность открывшихся возможностей, для реализации которых раньше требовались сложные пользовательские инструкции, не поддающиеся масштабированию или обобщению.

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

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

Учитывая это, вряд ли стоит удивляться тому, что всего за 48 часов проект собрал более 14 000 звездочек на GitHub и 19 миллионов просмотров в X, что свидетельствует о том, что многие считают фундаментальным сдвигом в подходах к созданию интернета.

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

Геометрия узкого места

Чтобы понять, почему Pretext имеет столь важное значение, необходимо осознать высокую стоимость «измерения» объектов в веб. Стандартные браузерные API вроде getBoundingClientRect или offsetHeight печально известны тем, что вызывают избыточные пересчеты макета (layout thrashing).

В современном интерфейсе — например, в сетке элементов (masonry) из тысяч текстовых блоков или в адаптивной редакционной верстке — эти измерения происходят на «горячем пути» рендеринга. Если браузеру приходится останавливаться и вычислять макет каждый раз, когда пользователь прокручивает страницу или ИИ генерирует новое предложение, частота кадров падает, батарея разряжается, а интерфейс начинает дергаться.

Идея Лу, заложенная в Pretext, заключалась в том, чтобы полностью отделить текстовую верстку от DOM. Используя движок метрик шрифтов Canvas в качестве «абсолютной истины» (ground truth) в сочетании с чистой арифметикой, Pretext может точно предсказать, где окажется каждый символ, слово и строка, даже не прикасаясь ни к какому узлу DOM.

Прирост производительности поражает воображение. Согласно бенчмаркам проекта, функция layout() в Pretext способна обработать пакет из 500 различных текстов примерно за 0,09 мс. По сравнению с традиционными операциями чтения из DOM это обеспечивает увеличение производительности в 300–600 раз. Такая скорость превращает верстку из тяжелой асинхронной рутины в синхронный и предсказуемый примитив, способный работать на частоте 120 кадров в секунду даже на мобильных устройствах.

Технология: разделение на подготовку и компоновку

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

• prepare(text, font): Это одноразовая фаза «тяжелой работы». Библиотека нормализует пробелы, разбивает текст на сегменты, применяет языковые правила склейки и измеряет сегменты с помощью canvas. Результат кэшируется в виде непрозрачной структуры данных.

• layout(preparedData, maxWidth, lineHeight): Это «горячий путь». Представляет собой чистую арифметику, которая берет подготовленные данные и вычисляет высоту или количество строк на основе заданной ширины.

Поскольку layout() — это всего лишь математика, ее можно вызывать многократно во время изменения размера окна или симуляции физики без каких-либо потерь производительности. Библиотека поддерживает сложные типографические задачи, которые ранее было невозможно эффективно решать в пользовательском пространстве:

• Смешанный двунаправленный текст (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 была крайне восторженной. Гильермо Рауч (Guillermo Rauch), генеральный директор Vercel, и Райан Флоренс (Ryan Florence) из Remix высоко оценили прирост производительности библиотеки. Тай Зондей (Tay Zonday) отметил потенциал технологии для нейроотличных людей благодаря высокоскоростному чтению за счет динамической растеризации текста.

Тем не менее, релиз также вызвал тонкую дискуссию о будущем веб-стандартов. Критики предостерегли от чрезмерного увлечения концепцией «толстого клиента», утверждая, что обход DOM уводит нас от простоты гипермедиа-систем. Ответ Лу стал размышлением об эволюции вычислительной техники. Он указал на развитие iOS, которая начиналась с PostScript — статичного формата для принтеров, — а превратилась в отполированную платформу с поддержкой скриптов. Интернет, по мнению Лу, остался заперт в мышлении «документного формата», надстраивая скрипты поверх статичного ядра до тех пор, пока сложность не достигла точки убывающей отдачи. Pretext — это попытка перезапустить этот разговор, рассматривая верстку как интерпретатор (набор функций, которыми могут манипулировать разработчики), а не как черный ящик формата данных, управляемый браузером.

Стратегический анализ: внедрять или подождать?

Pretext выпущен под лицензией MIT, что гарантирует его сохранение в качестве общественного блага как для сообщества разработчиков, так и для коммерческих предприятий. Это не просто библиотека для улучшения внешнего вида чат-пузырей; это инструмент инфраструктурного уровня, который отделяет визуальное представление информации от архитектурных ограничений интернета 1990-х годов.

Решив последнюю и самую большую проблему измерения текста, Лу проложил путь для того, чтобы веб наконец смог конкурировать с нативными платформами по степени плавности и выразительности. Используется ли Pretext для высококлассной редакционной верстки, виртуализированных лент со скоростью 120 кадров в секунду или интерфейсов генеративного ИИ, он знаменует собой момент, когда текст в интернете перестал быть статичным документом и превратился в по-настоящему программируемую среду.

Организациям стоит внедрить Pretext немедленно, если они занимаются созданием «генеративных интерфейсов» (Generative UI) или высокочастотных информационных панелей, но делать это нужно с четким пониманием компромиссов концепции «толстого клиента».

• Зачем внедрять: Переход от производительности макета O(N) к O(log N) или O(1) — это не просто инкрементальное обновление, это архитектурный прорыв. Если ваш продукт включает чат-интерфейс, который притормаживает во время длинных ответов, или сетку (masonry), которая «прыгает» при вычислении высоты, Pretext — это решение. Он позволяет создавать интерфейсы, которые ощущаются такими же быстрыми, какими становятся лежащие в их основе модели.

• О чем следует помнить: Внедрение требует специализированных кадров. Это больше «не просто CSS»; это инженерный подход с глубоким пониманием типографики. Организации также должны осознавать, что, перенося верстку в пользовательское пространство, они берут на себя роль «хранителей» доступности и стандартного поведения, которые браузер раньше обрабатывал автоматически.

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