← Lab homeThree experiments: black-hole text singularity, liquid dashboard grid, and draw-to-fill text vessels.
What It Does
This collection showcases three boundary-pushing creative applications of Pretext layout. The first experiment wraps text around a gravitational singularity—a black hole at the center of the canvas that distorts and attracts the text, bending character positions as if caught in a warped spacetime. The second transforms a dashboard of text blocks into a fluid system where blocks drift between grid positions as if flowing like liquid through interconnected chambers. The third invites you to draw a freeform shape with your mouse, then watches text pour into and fill that custom vessel, respecting the drawn boundary while maintaining readability.
Each experiment answers a different question about what text layout can do. They're not practical tools; they're explorations of aesthetic and interactive possibility. Together, they demonstrate that Pretext unlocks creative territories normally closed to web designers and developers. Text becomes malleable, responsive, and alive.
Technical Highlights
These experiments leverage Pretext's real-time measurement and dynamic layout functions to achieve effects that would be prohibitively expensive with traditional DOM APIs. The singularity applies non-linear position transformations to every character every frame, requiring constant re-measurement. The liquid grid continuously re-flows text blocks into new container configurations, recalculating line breaks and character positions as the layout shifts. The draw-to-fill uses a custom boundary shape as the layout constraint, requiring frame-by-frame intersection testing against the drawn path.
The codebase is unapologetically creative, prioritizing visual impact and interactivity over pragmatic production use. Yet it serves an important purpose: proving that Pretext enables designers and developers to think beyond the grid and the rectangle.
Pretext APIs Used
| API | Purpose |
|---|---|
layout() |
Recalculate text flow within dynamic container shapes and positions |
measure() |
Obtain character positions for singularity distortion and boundary testing |
| Custom layout functions | Apply gravitational warping, liquid flow constraints, and draw-based boundaries |
How to Try It
Visit the live demo at pretext.cool to explore all three experiments. Interact with each: feel the pull of the singularity, watch the liquid grid flow, and draw your own text vessels. Browse the source code on GitHub to see how each creative effect is implemented and how Pretext powers the calculations beneath the visuals.
Built By
Created by progrmoiz. Find more Pretext projects and resources at pretext.cool.
