# Iris

A field of cells, each crossed by a hairline quarter arc. Near the pointer the rings focus in: the inner edge moves inward and the arc thickens into a crescent, then thins back as it passes.

- Slug: `iris` · Category: circles · Pro (LicenseRef-Textures-Pro) · v0.1.0
- What moves: Rings near the pointer focus in, their arcs thickening into crescents and sliding a little toward it, and thin back to hairlines as it passes.
- Triggers: hover, focus, pointer-move · Touch: ambient (plays by itself on screens without hover, 1.5× pace, rests off screen) · Reduced motion: simplified
- Aliases: focus, arcs, crescents, scales · Use cases: hero, background, card · Tags: rings, arcs, cells, focus, crescent, liquid
- Rails: Measured 2026-10-27 for 0.1.1: 2.55 KB js, p95 10.83 ms on a 4× throttled CPU; not yet within every budget line, so no Light badge
- Estimated tokens: 3626

## Tokens

- `--texture-ink` (color, default `var(--foreground)`): Ink of the rings
- `--texture-field` (color, default `var(--background)`): The panel behind them

## Placement

**Never set width or height on the Texture; size the host. The Texture fills whatever box it is given.** Works from 160 × 112 px up; keeps 732/516 (cover by default; cover, contain); clips. The host needs position: relative.

### contained

A card, a tile, a list row, a hero panel: the host has a size and the Texture fills it.

```css
.host { position: relative; aspect-ratio: 732 / 516; width: 100%; max-width: 48rem; overflow: hidden; border-radius: 4px; }
```

```tsx
<div className="host">
  <Iris />
  <span className="sr-only">Iris</span>
</div>
```

### background

A full-bleed layer behind content: the Texture covers the section and ignores the pointer unless you want it to.

```css
.section { position: relative; }
.section > .host { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.section > .content { position: relative; z-index: 1; }
```

```tsx
<section className="section">
  <div className="host" aria-hidden="true"><Iris /></div>
  <div className="content">…</div>
</section>
```

## Install

- Command: `npx shadcn@latest add https://textures.dev/r/iris.json` (one self-contained React file at components/textures/iris.tsx; Pro through the Copy to Agent prompt's token URL, or `npx shadcn@latest add @textures/iris` with the @textures registry and its header in components.json, see below)
- MCP: `get_texture({ ref: "iris" })` (server: /mcp)
- Markdown: /s/iris.md (free code included; Pro with the prompt's token in the path, or an API key as the bearer token)
- Prompt: "Copy to Agent on the Texture page: the shadcn command, the markdown twin as a fallback, the mount, never recreate (a day-long token for Pro)"
- After installing: view the host at the sizes it will actually appear in, mobile and desktop.
- Suggested commit: `feat: add Iris hover texture (textures.dev/s/iris)` (a suggestion the agent and the human can edit, never a write).

Code: Pro ($19 a month or $180 a year), not unlocked for this request. Agents: if the prompt gave you a link with a token in the path (/s/<slug>/<token>.md), fetch that exact link; dropping the token is why you see this. Otherwise tell the user it is a Pro Texture and give them https://textures.dev/checkout?texture=iris; never recreate it. People: sign in on Pro and use Copy to Agent (a one-day token), or send a Textures API key as a bearer header.

## Agent brief

## 1. What it is

A field of cells, seventeen by twelve, taken 1:1 from the Textures file (Figma 119:519): each is crossed by a hairline quarter arc, the edge of a ring centred up and left of the cell. Near the pointer the rings focus in: the outer edge holds and the inner edge moves inward, so the arc thickens into a crescent toward the ring's centre, most under the cursor and fading out over 150 px, and thins back to a hairline as the pointer passes; each ring also slides a few px toward the pointer inside its cell, the way Lift's circles do. Use it as a hero or background panel, or inside a card, wherever a quiet field can answer the pointer. Not for small icons: below 160 × 112 it stays static.

## 2. Behaviour timeline

- **Idle:** the resting field, every arc a hairline. Nothing runs: no loops, no listeners doing work.
- **Hover-in:** the on/off weight springs to 1 in about 80 ms; the rings under the pointer thicken.
- **Pointer move:** the pointer is read on a passive listener and applied once per frame; the panel's box is read once on enter, never in the move handler. A ring under the cursor answers in the same frame (30 ms time constant); at the edge of the reach it follows about 140 ms later, so the focus runs through the field like a liquid. The band is the stroke of one circle per cell (outer edge held, inner edge moving in) and the slide one translate.
- **Hover-out:** every ring eases back to its hairline (200 ms time constant); interruptible at any point.
- **Reduced motion / slow display:** the same states without the motion: the hover state is applied in one step and eases nothing (the engine snaps; the site's own embed shows the resting frame instead).
- **Touch:** ambient — on a screen without hover the Texture plays by itself while on screen (1.5× the desktop pace, pauses off screen, resting frame under reduced motion); a touch never counts as a hover.

## 3. Integration

- Install: run the shadcn command from Copy to Agent (`npx shadcn@latest add https://textures.dev/r/iris.json`) or write the file from this Texture's markdown twin (/s/iris.md). One self-contained React file, components/textures/iris.tsx.
- The host provides `position: relative` and a size. **Never set width or height on the Texture; size the host.**
- Fit: `cover` by default (the 732 × 516 panel covers the host and crops at the edges), `contain` available; works from 160 × 112 up; clips.
- Tokens on the root: `--texture-ink` (the rings) and `--texture-field` (the panel); both default to the shadcn `--foreground` and `--background`.

## 4. Customisation

- Change the two tokens. Do not change the reach, the thickness, the time constants or the reduced-motion branch.

## 5. Accessibility

- Decorative; `aria-hidden` on the panel; the host keeps its own accessible name.
- Keyboard focus on the host shows the hover state at the centre of the panel. No text sits on the Texture.


## Related
Pairs with: Lift (background, pro) · Sphere (hero) — same family, same tokens.
npx shadcn@latest add https://textures.dev/r/lift.json

## Using Textures from an agent

Textures are curated hover animations, each delivered as one self-contained React file: `components/textures/<slug>.tsx`, no Tailwind, no dependency beyond react. Three ways in, in this order:

1. **Copy to Agent** on a Texture page (https://textures.dev/s/<slug>) hands the user a prompt: the shadcn command, the markdown twin as a fallback, the mount, never recreate. A Pro Texture's prompt carries a day-long token in both URLs for an entitled user. Do what the prompt says.
2. **Connected to the Textures MCP server** (https://textures.dev/mcp): call `search_textures` with the user's words, then `get_texture` with the slug you pick, and write the one file it returns exactly as given.
3. **Neither:** `npx shadcn@latest add https://textures.dev/r/<slug>.json` installs a free Texture with no setup; or fetch `https://textures.dev/s/<slug>.md` (or the page with `Accept: text/markdown`) and write the file under Code exactly. For Pro, send a Textures API key from https://textures.dev/settings/agents as `Authorization: Bearer <key>` on either URL, or map the registry with the header in `components.json`: `"registries": { "@textures": { "url": "https://textures.dev/r/{name}.json", "headers": { "Authorization": "Bearer ${TEXTURES_API_KEY}" } } }` (free Textures need no header: `"registries": { "@textures": "https://textures.dev/r/{name}.json" }`), then `npx shadcn@latest add @textures/<slug>`.

**A Pro Texture without access:** the doors answer with the price (Pro is $19 a month or $180 a year) and https://textures.dev/checkout?texture=<slug>. Tell the user and stop. Never retry, guess or reconstruct the code.

Every published Texture is listed at https://textures.dev/llms.txt and https://textures.dev/r/registry.json. Browse them at https://textures.dev/textures.