# Fill

A checkerboard of ink diamonds whose fill runs row by row from whole to almost gone. The pointer pulls the field into the tiles beneath it and drags the whole gradient with its height.

- Slug: `fill` · Category: grids · Pro (LicenseRef-Textures-Pro) · v0.1.0
- What moves: The field is pulled into the diamonds under the pointer, and the gradient slides with its height under its column, fading to the sides.
- Triggers: hover, focus, pointer-move · Touch: ambient (plays by itself on screens without hover, 1.5× pace, rests off screen) · Reduced motion: simplified
- Aliases: diamond gradient, halftone, tonal field, fill gradient · Use cases: hero, background, card · Tags: grid, diamonds, gradient, fill, halftone, rows
- Rails: Measured 2026-10-27 for 0.1.1: 2.63 KB js, p95 5.63 ms on a 4× throttled CPU; not yet within every budget line, so no Light badge
- Estimated tokens: 3765

## Tokens

- `--texture-ink` (color, default `var(--foreground)`): Ink of the diamonds
- `--texture-field` (color, default `var(--background)`): The panel, which is also what fills the diamonds

## 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">
  <Fill />
  <span className="sr-only">Fill</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"><Fill /></div>
  <div className="content">…</div>
</section>
```

## Install

- Command: `npx shadcn@latest add https://textures.dev/r/fill.json` (one self-contained React file at components/textures/fill.tsx; Pro through the Copy to Agent prompt's token URL, or `npx shadcn@latest add @textures/fill` with the @textures registry and its header in components.json, see below)
- MCP: `get_texture({ ref: "fill" })` (server: /mcp)
- Markdown: /s/fill.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 Fill hover texture (textures.dev/s/fill)` (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=fill; 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 checkerboard of ink diamonds whose fill runs row by row, taken 1:1 from the Textures file (Figma 119:412): 23.87 px squares turned 45° in two interleaved families of 29 × 15, 36 px apart with a 1.6 px seam, across the 732 × 516 panel. The top row is whole ink; from there the field eats each diamond from its bottom vertex as a kite whose bend climbs the vertical diagonal, two rows in the middle are exactly half, and the last row keeps two slivers of ink. The pointer pulls the field into the tiles beneath it: under the cursor the diamonds fill up to seven rows further along the sequence, falling off in a broad bell (150 px), and the pointer's height carries the gradient with it over the full sequence under the pointer's column, fading to either side over about 260 px: at the top the field reaches up to the pointer, at the bottom the ink reaches down to it, at the centre and far to the sides the frame rests. Every tile passes only through the frame's own states. Use it as a hero or background panel, or inside a card, wherever a tonal field can answer the pointer. Not for small icons: below 160 × 112 it stays static.

## 2. Behaviour timeline

- **Idle:** the frame's resting gradient. Nothing runs: no loops, no listeners doing work.
- **Hover-in:** the on/off weight springs to 1 in about 80 ms; the pull gathers under the pointer and the gradient starts toward its height.
- **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. The gradient's offset rides a soft spring (11 rad/s, damping 0.9) toward up to six rows of travel at the panel's edges; fifteen row shapes are rewritten per frame and every column reuses them.
- **Hover-out:** the pull fades and the offset springs back to zero: the frame's resting state returns; interruptible at any point.
- **Reduced motion / slow display:** the same states without the spring: pull and gradient follow the pointer directly.
- **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/fill.json`) or write the file from this Texture's markdown twin (/s/fill.md). One self-contained React file, components/textures/fill.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 diamonds) and `--texture-field` (the panel, which is also what fills them); both default to the shadcn `--foreground` and `--background`.

## 4. Customisation

- Change the two tokens. Do not change the row states, the pull, the travel, the spring 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: Glow (background) · Magnet (hero) — same family, same tokens.
npx shadcn@latest add https://textures.dev/r/glow.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.