ns-ui

Background Truchet Weave

An ambient Truchet arc weave whose tile orientation is the SIGN of a slow harmonic field, so the frame reads as interlaced domains of continuous arcs separated by pale seams along the domain walls, and the pointer bends the field so the walls re-route outward from the cursor and retreat when it leaves.

Use when Pick background-truchet-weave when the hero should read as woven line-work — one continuous interlaced arc curve threading a square grid, organised into large domains and torn open along pale seams — with the pointer re-routing the weave outward from itself like a propagating domain wall. background-ascii-domain-walls is the better pick when the boundaries themselves are the only ink and should wander thermally rather than being seams in a drawn weave; background-ascii-voronoi-walls when the partition should be straight-edged cells rather than curves; background-ascii-caustics when the subject is focused bright filaments and the pointer should read as a converging lens.

Install

npx shadcn add https://design.helpmarq.com/r/background-truchet-weave.json
View source and playground

ns-ui / background-truchet-weave — tile orientation is the sign of the field; the pointer bends it and the seams re-route

Props

PropTypeDefaultDescription
tileSize?numbersquare tile size in px
className?string