A small experiment in living text
Where it started
I saw a demo where a dragon follows your cursor across a medieval manuscript page. As the dragon moves, the text reflows around it — not after a delay, not on the next render cycle, but instantly, line by line. The dragon was beautiful, but the text was the magic.
The demo was built using a library called Pretext by Cheng Lou. Pretext does something browsers have never been good at: measuring and laying out multiline text without touching the DOM. No getBoundingClientRect, no layout reflow — just arithmetic over cached glyph widths. That's how you get 60fps text wrapping around a moving object.
I stared at it for twenty minutes. Then I thought: I want one of these on my site.
看到龍的那一刻
有人用一個叫 Pretext 的排版引擎做了一個 互動手抄本 demo——滑鼠移動，龍跟著走，文字 即時繞開龍的身體 重新排版。不是跳一下、刷新一次那種，是每一行都在動態重算。
老實說，龍畫得很精緻，但真正讓我盯著看二十分鐘的是文字。那些字像水一樣流過障礙物，又像有自己的意志一樣找到新的位置。
我當下就決定：我要在自己網站上做一個。
What Pretext actually solves
Text wrapping sounds trivial — CSS does it automatically, right? But try wrapping text around a moving object at 60fps. Every frame you'd need to ask the browser: "How tall is this paragraph now?" That triggers layout reflow — one of the most expensive operations in the browser.
Pretext sidesteps this entirely. You call prepare() once to measure all the glyphs, then layoutNextLine() for each line. It returns the text that fits in whatever width you give it — pure arithmetic, no DOM. Change the width next frame? Just call it again.
For this project, the entire text reflow comes down to one loop: compute the available width for each line (full width minus whatever the vine is blocking), feed it to layoutNextLine(), draw the result. That's it.
為什麼以前做不到
「文字繞排」聽起來很簡單——CSS 不是天天在做嗎？但如果你要文字繞過一個 正在移動的東西 ，每秒 60 幀，每一幀都要問瀏覽器「這段文字現在多高？」那就會觸發 layout reflow，瀏覽器最貴的操作之一。
Pretext 的做法是完全跳過瀏覽器的排版引擎。先用 prepare() 測量所有字形，然後用 layoutNextLine() 逐行算出「這個寬度能放多少字」。純數學運算，零 DOM 操作。所以每一幀都能重算，不卡。
我整個互動頁面的核心—— 文字即時繞排 ——就靠這一個函式。
Four versions of a vine
The hardest part wasn't the text reflow — Pretext solved that. The hardest part was making the thing the text flows around look right.
v1 — Ink blots. Procedural circles following the cursor. Looked like someone sneezed on the manuscript. Deleted in ten minutes.
v2 — AI-generated stamps. I used gpt-image-2 to generate four botanical illustrations in manuscript style. They looked beautiful in isolation — but strung along a mouse trail, they felt like stickers slapped onto parchment. Discrete images can't form a continuous path. Each one had a visible bounding box.
v3 — Bezier vines + AI flowers. Better idea: procedural curves for continuity, AI flowers for decoration. But the vines were too mechanical — uniform width, smooth curves, no personality. It looked like a vector diagram, not a plant.
v4 — Organic vines. Width varies along the curve. Seeded random jitter gives each segment a hand-drawn wobble. Knots appear at intervals where leaves and tendrils branch off. And the flowers? Just one image — the magnolia from my About page — rotated and scaled randomly along the vine.
This version worked because it stopped trying to look drawn and started trying to look grown.
四版藤蔓
技術搞定了，接下來是美感的問題——文字要繞開的那個東西，到底長什麼樣？
第一版：墨跡圓斑。 程式化的圓形跟著滑鼠走。醜到像打翻墨水。十分鐘就砍了。
第二版：AI 生圖印章。 用 gpt-image-2 生了四張手抄本風格的植物插圖，每張單獨看都很漂亮。但串在滑鼠軌跡上就不行了——離散的圖片沒辦法形成連續路徑，每張都有明顯的方框邊界。看起來像在羊皮紙上貼便利貼。
第三版：Bezier 曲線 + AI 花朵。 邏輯對了——用程式畫連續的藤蔓，AI 花朵當裝飾。但藤蔓太生硬，等寬、等曲率、沒有生命感。像 Illustrator 裡的貝茲曲線，不像植物。
第四版：有機藤蔓。 粗細沿著曲線漸變，用 seeded random 抖動每一段讓它有手繪感，間隔放結節讓葉片和捲鬚能長出來。花只留一張——我 About 頁的玉蘭花——隨機旋轉和縮放撒在藤蔓沿線。
這一版成功了，因為它不再試圖看起來像 畫出來的 ，而是像 長出來的 。
Making it mine
The original demo had a medieval story about a scribe named Sister Marguerite. It fit the dragon. But I wasn't making a dragon — I was growing magnolias.
So I wrote about the magnolia itself. Ninety million years old — older than bees. Petals thick as porcelain. A fragrance that arrives before the tree is visible. A bloom that lasts two weeks and holds nothing back.
The palette is the same Classical Morandi I use across the site — cream canvas, gold accents, chocolate vines, sage leaves. The drop cap is Playfair Display. The body text is Lora. It looks like it belongs here, because it does.
從龍到玉蘭花
原版 demo 的文字是一個修道院抄寫員的中世紀故事，配龍很搭。但我做的不是龍——我在長玉蘭花。
所以我寫了一篇關於玉蘭花的散文。九千萬年前就存在了，比蜜蜂還早。花瓣厚得像瓷器，光線穿過去會變成教堂玻璃的顏色。花期只有兩個禮拜，盛放的時候什麼都不保留，然後就安靜地落下來。
配色用的是網站統一的莫蘭迪色系——奶油白底、金色線條、巧克力色藤蔓、灰綠葉片。首字放大用 Playfair Display，內文用 Lora。它看起來就像一直屬於這裡。
因為它確實屬於這裡。
Try it
Move your cursor across the page. Watch the vines grow. Watch the text move.
— TingYu's Deco
Growing Vines on a Manuscript · 2026 · Taiwan
