Loom Breaker

Written for the variant you picked above: Indigo

Build a section that opens under a band of woven cloth. Props: eyebrow, title, lead, primary and secondary links {label, href}, points, weave (plain, twill or basket), palette {ground, warp [two colours], weft [two colours], ink, muted, line, accent, onAccent}, onNavigate and className. Weaving (pure functions): whether a warp column i lies over weft row j — plain alternates (i + j even), twill steps diagonally (i − j mod 4 < 2), basket pairs both (⌊i/2⌋ + ⌊j/2⌋ even); and a layout for a band of a given width: warps every 30px (24 below 640px), 78% of the pitch wide, centred across the width; four weft rows filling 132px, each 80% of its row; and a patch of warp for every crossing where the warp is on top. The band is an SVG as wide as the section (a ResizeObserver): warps first, alternating warp colours, each continuing below the cloth as two short fringe strokes; then the wefts in alternating weft colours; then the over-patches in their warp's colour with a slightly darker hairline so the weave reads. When the section scrolls into view (IntersectionObserver, once), it weaves: warps drop in (scaleY from the top, 9ms apart), each weft slides across from the left (900ms, starting 380ms + 150ms per row), each over-patch appears as its row's weft passes its x, and the fringe draws in last. Without scripting or with reduced motion the cloth is simply there. Body (container queries): two columns — eyebrow in spaced capitals, a large balanced title and a muted lead on the left; on the right a list of points with plus ticks in the accent on hairline rows, then a filled primary pill and an outlined secondary. One column below 760px. A 10px selvedge of warp and weft stripes closes the section. Selected variant — Indigo (indigo): Plain weave in denim: ground #eef0f4, warp #1f3a6b and #2c4f8c, weft #e9e2d3 and #c7d4ea, ink #111a2c, muted #4b5568, accent #1f3a6b on #f4f6fb. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: The links work as normal; the cloth weaves itself once when the section scrolls into view. Motion: Warps drop over about 0.9s, then four weft rows shuttle across 150ms apart, each 900ms, with crossings locking as they pass; the fringe draws last. Reduced motion shows the finished cloth. Accessibility: A labelled section with real links; the cloth is decorative SVG and hidden. Text and buttons keep 4.5:1 contrast in every palette. Responsive behavior: The band rebuilds for any width with a finer pitch on phones; the body stacks below 760px. Touch: Nothing depends on hover. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

The links work as normal; the cloth weaves itself once when the section scrolls into view.

Motion

Warps drop over about 0.9s, then four weft rows shuttle across 150ms apart, each 900ms, with crossings locking as they pass; the fringe draws last. Reduced motion shows the finished cloth.

Accessibility

A labelled section with real links; the cloth is decorative SVG and hidden. Text and buttons keep 4.5:1 contrast in every palette.

Responsive

The band rebuilds for any width with a finer pitch on phones; the body stacks below 760px.

On touch

Nothing depends on hover.