# Flip A field of dim tiles. The row under the pointer flips on its vertical axis, tile by tile away from the cursor, to its bright face; it holds a moment and turns back in a quick 120 ms turn. - Slug: `flip` · Category: grids · Pro (LicenseRef-Textures-Pro) · v0.1.0 - What moves: The row under the pointer turns tile by tile on its vertical axis, away from the cursor, to its bright face, holds, and turns back. - Triggers: hover, focus, pointer-move · Touch: ambient (plays by itself on screens without hover, 1.5× pace, rests off screen) · Reduced motion: simplified - Aliases: row flip, card flip, tiles, shutter row · Use cases: hero, background, card · Tags: tiles, grid, flip, card-flip, rows, board - Rails: Measured 2026-10-27 for 0.1.1: 3.94 KB js, p95 9.54 ms on a 4× throttled CPU; not yet within every budget line, so no Light badge - Estimated tokens: 4313 ## Tokens - `--texture-ink` (color, default `var(--foreground)`): Ink of the tiles, dim at rest and full when flipped - `--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
Flip
``` ### 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
…
``` ## Install - Command: `npx shadcn@latest add https://textures.dev/r/flip.json` (one self-contained React file at components/textures/flip.tsx; Pro through the Copy to Agent prompt's token URL, or `npx shadcn@latest add @textures/flip` with the @textures registry and its header in components.json, see below) - MCP: `get_texture({ ref: "flip" })` (server: /mcp) - Markdown: /s/flip.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 Flip hover texture (textures.dev/s/flip)` (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//.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=flip; 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 dim tiles, thirty-seven by twenty-six, on the lattice of the Textures file (Figma 163:30822; its twenty-seventh row overflowed the panel and was cut): 16.5 px tiles at a 19.5 pitch, the resting face a tenth of the ink. The motion is Row Flip B from the Mural x Adurant experiments: the row under the pointer turns like a row of cards, every tile turning on its vertical axis away from the cursor's column one after another to its bright face; the row holds while the pointer stays and for 600 ms after, then turns back the same way. A fast move flips every row it crosses. Use it as a hero or background panel, or inside a card, wherever a board-like field can answer the pointer. Not for small icons: below 160 × 112 it stays static. ## 2. Behaviour timeline - **Idle:** the resting field, every tile dim. Nothing runs: no loops, no listeners doing work. - **Hover-in:** the on/off weight springs to 1 in about 80 ms; the row under the pointer starts to turn from the cursor's column outward. - **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. Each tile's turn is a 120 ms turn about its vertical axis, the turn running from the cursor's column to the row's far edge in 180 ms; the path between frames is interpolated so no row is skipped. The resting field is one pattern; only rows in motion are elements, from a pool of twenty-four. - **Hover-out:** every flipped row holds 600 ms, then turns back from the cursor's column outward in 0.6 of that time; interruptible at any point: a row caught on its way back reverses in place. - **Reduced motion / slow display:** the same states without the turn: tiles swap faces. - **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/flip.json`) or write the file from this Texture's markdown twin (/s/flip.md). One self-contained React file, components/textures/flip.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 tiles, dim at rest and full when flipped) and `--texture-field` (the panel); both default to the shadcn `--foreground` and `--background`. ## 4. Customisation - Change the two tokens. Do not change the flip, the stagger, the hold 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/.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/) 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/.json` installs a free Texture with no setup; or fetch `https://textures.dev/s/.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 ` 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/`. **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=. 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.