Таскай кружок — мемы обтекают его в реальном времени. 60 fps, ноль обращений к DOM.
Каждый символ рассчитан математикой. Наведи мышь — создай рябь. Кликни — ударная волна.
Тысячи символов падают и переливаются. Кликни — взрыв мемов.
Слова падают и сталкиваются. Кликни, чтобы подбросить. Двигай мышкой — отталкивай.
Одноразовый анализ: нормализация, сегментация, правила переноса Unicode, измерение через canvas. ~19мс на 500 текстов.
Чистая арифметика из кешированных измерений. Высота, строки, перенос — всё за ~0.09мс. Без единого касания DOM.
Вывод куда угодно: DOM, Canvas, SVG, сервер. Вы контролируете рендер. Полная свобода, ноль layout thrashing.
import { prepare, layout } from '@chenglou/pretext'
// Одноразовое измерение
const prepared = prepare('Ваш текст здесь', '16px Inter')
// Мгновенный layout — вызывай на каждый resize
const { height, lineCount } = layout(prepared, width, 20)
// Обтекание препятствий
let cursor = { segmentIndex: 0, graphemeIndex: 0 }
while (true) {
const line = layoutNextLine(prepared, cursor, w)
if (!line) break
ctx.fillText(line.text, 0, y)
}