Textures (textures.dev) is the hover-texture library for agents. Install a free Texture in one command, no setup: `npx shadcn@latest add https://textures.dev/r/.json` writes components/textures//; mount the component inside an element with position: relative and a size. Pro Textures need a Textures API key sent as a bearer header, which that command cannot add: register the @textures registry with the header in components.json (see /agents) and run `npx shadcn@latest add @textures/`. # Textures > Textures is a library of animated, hover-reactive brand textures for websites, delivered as React and HTML code that AI coding agents like Claude Code, Cursor and Codex add to your project through the Textures MCP server or a single prompt. A free set of Textures; the rest with Pro. ## Textures (free first) - settle (free; use when: hero/background, calm): Bars gather toward the pointer within their columns and settle back when it leaves. /s/settle.md?via=llms - swell (free; use when: hero/background/card, playful): Dashes under the pointer swell up to four times their thickness and squeeze their neighbours; the grid flattens again when it leaves. /s/swell.md?via=llms - tiles (free; use when: background/card/hero, calm): The four tiles under the pointer light up and the rings around them step down in a square of light, cell by cell; all dim again when it leaves. /s/tiles.md?via=llms - lift (free; use when: background/hero/card, playful): Circles near the pointer slide toward it inside their containers, climbing as it passes above and sinking as it passes below, and settle back when it leaves. /s/lift.md?via=llms - beam (free; use when: background/hero/card, calm): A beam glides after the pointer: the lines under it swell into bars and part to make room, and all settle back to hairlines when it leaves. /s/beam.md?via=llms - cells (free; use when: hero/background/image tile, calm): Every cell holds a small square. Near the pointer the squares swell to fill their cells in a soft dome, then shrink back when it leaves. /s/cells.md?via=llms - warp (free; use when: hero/background/image tile, bold): Small rectangular tiles grow wider and taller by horizontal and vertical distance to the pointer, trailing it, then spring back when it leaves. /s/warp.md?via=llms - magnet (pro; use when: hero/background/card, playful): Dots near the pointer snap together into a solid block, the field around leans toward it out to eleven cells, and all spring back to the grid when it leaves. /s/magnet.md?via=llms - glow (pro; use when: background/card, calm): The bar under the pointer lights up and grows taller; the bars around it step down in a rectangle four cells wide, and all dim again when it leaves. /s/glow.md?via=llms - gaze (pro; use when: background/hero/card, playful): Dashes under the pointer light up and turn to point at it; the ink falls 10 % per cell to the dim field, and all ease back when it leaves. /s/gaze.md?via=llms - bloom (pro; use when: hero/background/card, playful): Small diamond slivers near the pointer grow larger and meet into star crosses, then spring back to slivers when the pointer leaves. /s/bloom.md?via=llms - quatrefoil (pro; use when: hero/background/card, calm): Small four-petal crosses near the pointer grow larger in a soft round bulge that trails the pointer and springs back when it leaves. /s/quatrefoil.md?via=llms ## Vocabulary - **hover texture**: A field of small marks that answers the pointer: bars, dots, dashes, tiles or rings that move, light up or gather under it and settle when it leaves. It sits behind or inside a hero, card, button or background and never changes the layout. - **brand texture**: A hover texture tuned to a brand: its ink and field colours come from the site's own tokens, so the same marks read as part of the identity rather than a stock effect. - **Texture**: One item in the Textures catalog: a named hover texture (Settle, Magnet, Swell, Glow …) shipped as React and vanilla files with a measured fit and perf contract. - **Displace**: A behaviour family: the marks under the pointer move out of its way or toward it (gather, scatter, lean, lift, magnet) and spring back. - **Clear**: A behaviour family: the marks under the pointer fade, part or open a window of calm, and close again when it leaves. - **Glow**: A behaviour family: the marks under the pointer light up, step by step, and dim back when it leaves. - **pattern families**: The shapes a texture is made of: bars (stripes), dots, dashes, tiles, rings, waves and hatch. - **fit**: A Texture's measured promise to sit in any host (icon, button, card, hero, background) at any size, light or dark, LTR or RTL, without breaking layout. - **Light**: The badge a Texture earns when every perf line is green: small, no reflows, steady frame rate on a throttled CPU. ## Agent surfaces - Every page answers `Accept: text/markdown`; every Texture has a .md and a .json twin at /s/.md and /s/.json, and a live preview at /embed/ - Browse: /textures?q=&category=&tag=&light=1&sort=featured|newest|name (the same query as /api/textures?… in JSON) - Every published Texture's twin, with the free code, in one file: /llms-full.txt - MCP: /mcp (OAuth 2.1; API keys accepted as bearer tokens) - Setup for every agent (Claude Code, Cursor, Codex, VS Code, Claude.ai, Windsurf, Gemini CLI, shadcn): /agents (markdown: /agents.md) - shadcn registry: /r/registry.json lists every Texture, /r/.json is one item (`npx shadcn@latest add @textures/`; Pro with an API key as the bearer token) - The rule for every Texture: never set width or height on the Texture; size the host. ## Using Textures from an agent Textures are curated hover animations delivered as code (React and vanilla). There are four ways in, in this order: 1. **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 files it returns. 2. **In a project with shadcn (React):** add the registry to `components.json` once, then run `npx shadcn@latest add @textures/`. For free Textures, no key: `"registries": { "@textures": "https://textures.dev/r/{name}.json" }`. For Pro, send a Textures API key: `"registries": { "@textures": { "url": "https://textures.dev/r/{name}.json", "headers": { "Authorization": "Bearer ${TEXTURES_API_KEY}" } } }` with the key in `TEXTURES_API_KEY` (in `.env.local`). 3. **Not connected, no shadcn:** fetch `https://textures.dev/s/` as markdown (send `Accept: text/markdown`, or use `https://textures.dev/s/.md`). Free Textures include their code. For a Pro Texture, send `Authorization: Bearer ` with a Textures API key from https://textures.dev/settings/agents (Pro accounts). 4. **A Pro Texture without access:** tell the user it is a Pro Texture (Pro is $19 a month or $180 a year) and give them https://textures.dev/checkout?texture=. 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. Connect an agent at https://textures.dev/mcp.