This component brings true editorial-grade text wrapping to the web - and makes it interactive. Not only can you create layouts where text flows precisely around complex image contours, but on the live website, users can move those objects themselves and watch the text reflow instantly in real time.
At its core, the component has two elements: text and images. You add your content, place one or more transparent images, scale and position them freely - and the text dynamically wraps around the actual visible contours, not bounding boxes. Even highly intricate shapes are handled with precision.
This is where it goes beyond traditional layouts.
Instead of a fixed composition, you’re creating a responsive editorial system. As users drag objects across a live canvas, the text continuously reshapes itself - producing fluid, ever-changing layouts that feel alive and immersive.
The result is typography that behaves more like a medium than a static element - adding motion, depth, and drama to your pages.
Setting up the component is simple:
Add your text
Insert one or more transparent images
Scale and position them as desired
Publish
The wrapping happens automatically.Once published, move objects on the live website to experience real-time layout wrapping.
Wrap Padding - Controls how closely text hugs the image contours. Increase for more spacing, decrease for tighter wrapping.
Alpha Threshold - Handles semi-transparent areas like shadows or glows (if present). Higher values allow text to flow into these regions.
Sample Step - Adjusts contour precision.Lower = more accurate, higher = more performant.
Debug Mode - Shows sampled wrap zones and boundaries for inspection.
Drag Enable - Toggle whether users can move images on the live site.
Clipping - Controls whether images are constrained within the component bounds or can extend beyond them.
This bridges the gap between print typography and the web - and then goes further by allowing users to interact with the webpage and see it respond, adapt, and evolve in real time.
It’s not just text wrapping.
It’s a layout that moves.
Zarak Shiraz
