# Jacquard swatch

A working QR code woven as a cloth swatch. Where the code is dark, the dark warp floats on top; where it is light, the light weft does, the way a jacquard loom draws a figure. From arm’s length a phone reads it; up close it is cloth, with a hemmed top, a selvedge, a woven label and frayed sides. A thin line of light passes down it like a till reader, the raised threads catch it, and a lamp comes on when it is read.

Kit part · With the Kit · https://tactileui.dev/parts/jacquard-swatch

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

The cloth is one inline in module units. Dark cells are vertical warp, light cells horizontal weft. An SVG filter wobbles the threads a fraction of a module and mottles them with fibre noise. The frayed sides are one path of weft ends; the hem, selvedge with tenter holes and the woven label are a few rects. The reading line and a gradient band move together in the same units; the band masks a layer of highlights on the thread crowns, so the light only catches the threads it is passing.

## Variants

- A short link
- A longer value weaves a bigger code
- Already read

## States

- Not read
- Reading
- Read

## Props and options

| Name | Kind | Description |
| - | - | - |
| [data-jacquard-scan] | attribute | Runs the reading line and settles the swatch on Read; wired by the module itself. |
| [data-held] | attribute | Holds the line mid-pass, for a still or a states table. |

## Usage notes

Move over the cloth, or press Scan: a line of light passes down the weave, the threads catch it, and the lamp comes on. Point a phone at it and it opens the link.

## Accessibility

- The weave is an whose name carries what the code is for and the value itself, so a screen reader user gets the link without a camera.
- Scan is a real , reached by Tab, with the kit’s focus ring; focusing it from the keyboard runs the line just as a hover does, and Enter or Space runs it too.
- Reduced motion: no line, no glints, nothing on hover or focus; Scan goes straight to Read.
- The cloth is cream cotton with near-black thread in every finish (dark on light, four modules of light weave all round) so phone cameras read it; only the bench under it follows the finish.

## Related parts

- [Tumbler lock](https://tactileui.dev/parts/tumbler): A PIN or one-time code dialled into a combination lock: number wheels behind a slot in the plate, turning on detents. Right, a locking bar drops into their notches; wrong, they spin back to blank.
- [Sign-in](https://tactileui.dev/parts/sign-in): Sign in and sign up on one plate: Google and GitHub keys with their marks stamped in monochrome, an email route underneath, a two-way selector that re-prints the plate, and errors that say how to fix them.
- [Readout](https://tactileui.dev/parts/readout): A printed label over a value: key figures, with the unit small and the change in words.