comparisons
Visual order vs document order
A diagnostic composition that exposes when an interface's VISUAL order (screen position, top to bottom and left to right) diverges from its DOCUMENT order because CSS has repositioned elements with grid and the order property, drawing both paths at once in their own color and marking the elements whose sequence position differs with the magnitude of the offset.
See it live and copy its promptWhat you can adjust
- Visual traversal color
- Document traversal color
- Line thickness
- Composition opacity
- Number of elements
- Show offset
How this catalog works
Every component ships with its reproduction prompt: the text you paste into an AI builder to get exactly this piece. The values above are editable, and the prompt you copy carries the ones you chose, so what gets generated is what you were looking at.
