An interactive web experience inspired by medieval illuminated manuscripts. As you move your cursor across the page, magnolia vines grow organically — and the text reflows in real-time around every bloom and leaf.
How It Works
- Move your mouse across the page to grow vines with magnolia flowers
- Text reflows instantly around every vine, leaf, and blossom
- Vines fade naturally after a few seconds, and text fills back in
- Touch support for mobile devices
Technology
Built with Pretext by Cheng Lou — a pure JavaScript text measurement and layout engine that bypasses DOM reflow entirely. Text layout is computed as pure arithmetic over cached glyph widths, enabling real-time reflow at 60fps.
The vine system uses procedural Bezier curves with organic width variation, seeded randomness for hand-drawn feel, and Canvas 2D rendering composited via the browser's GPU pipeline.
Design
Uses the Classical Morandi palette — cream canvas, gold accents, dusty lavender, and sage green — with Playfair Display for the drop cap and Lora for body text. The magnolia bloom matches the site's visual identity.
