# Nudge

A solid pill button in your project's font with a trailing arrow. On hover the arrow slides out and a twin slides in behind it while the label steps back a hair.

- Slug: `nudge` · Category: buttons · Pro (LicenseRef-Site-Supply-Pro) · v1.0.0
- What moves: The arrow slides out of its slot to the right as a twin slides in from the left; the label shifts left 0.15em. Mirrored in RTL.
- Triggers: hover, focus, pointer-move · Touch: press · Reduced motion: simplified
- Aliases: arrow button, next button, arrow swap button · Use cases: CTA · Tags: button, arrow, cta, next, link, pill
- Rails: Light · 2.14 KB js · p95 1.62 ms on a 4× throttled CPU · 0 layers (measured 2026-11-08 for 0.1.0)
- Estimated tokens: 3633

## Tokens

- `--texture-ink` (color, default `var(--foreground)`): The button's surface
- `--texture-field` (color, default `var(--background)`): The label and the arrow

## Placement

**Never set width or height on the Component; size the host. The Component fills whatever box it is given.** Works from 96 × 32 px up; free aspect (fill by default; fill); clips. The host needs position: relative.

### inline

A button, a link, a badge: the project's own element is the host; give it a size and the Component fills it (its text comes in by props).

```css
.host { position: relative; display: inline-block; width: 11rem; height: 3rem; border-radius: 999px; }
```

```tsx
<button type="button" className="host">
  <Nudge />
</button>
```

### contained

A card, a tile, a stat, a panel: the host has a size and the Component fills it.

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

```tsx
<article className="host">
  <Nudge />
</article>
```

## Install

- Command: `npx shadcn@latest add https://site-supply.vercel.app/r/nudge.json` (one self-contained React file at components/textures/nudge.tsx; Pro through the Copy to Agent prompt's token URL, or `npx shadcn@latest add @textures/nudge` with the @textures registry and its header in components.json, see below)
- MCP: `get_texture({ ref: "nudge" })` (server: /mcp)
- Markdown: /s/nudge.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 Component 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 Nudge component (site-supply.vercel.app/s/nudge)` (a suggestion the agent and the human can edit, never a write).

Code: Pro (from $9 a month), 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 Component and give them https://site-supply.vercel.app/checkout?texture=nudge; never recreate it. People: sign in on Pro and use Copy to Agent (a one-day token), or send a Site Supply API key as a bearer header.

## Agent brief

## 1. What it is

A solid pill button with its label set in the project's own font, followed by an arrow. On hover the arrow slides out of its slot in the direction it points while an identical arrow slides in from behind it, and the label steps back a hair (0.15em), so the button reads as "onward". Leaving reverses it. In right-to-left text the arrow points left and every move mirrors. Use it for a "next", "continue" or "learn more" call to action. Not for icon buttons: below 96 × 32 it stays static.

## 2. Behaviour timeline

- **Idle:** the resting label and arrow. Nothing runs: no loops, no listeners doing work.
- **Hover-in:** over 240 ms on an ease-out the arrow slides out of its clipped slot (forward), its twin slides in from the back edge, and the label shifts 0.15em away from the arrow's travel.
- **Pointer move:** the swap does not follow the pointer; the box is read once on enter, never in the move handler.
- **Hover-out:** the same moves reverse over 240 ms on an ease-out from wherever they are; interruptible at any point.
- **Reduced motion / slow display:** the hover state is applied in one step; nothing eases.
- **Touch:** press — a finger down plays the hover state, lifting it releases; nothing plays by itself.

## 3. Integration

- Install: `npx shadcn@latest add https://sitesupply.dev/r/nudge.json` (one self-contained React file at components/textures/nudge.tsx), or write the file `get_texture` returns exactly as returned, or use the code in this Component's markdown twin (/s/nudge.md).
- Mount it inside the project's own `<button>` or `<a>` (the host keeps the click, the link and the focus ring). The host provides `position: relative` and a size. **Never set width or height on the Component; size the host.**
- Props: `label` (the text, one line; a long label ends in an ellipsis and the arrow always stays). The direction comes from the label's own script: a Hebrew or Arabic label flips the arrow and the motion.
- Fit: `fill` (the surface fills the host, the label and arrow are sized from it and centred together); works from 96 × 32 up; clips.
- Tokens on the root: `--texture-ink` (the surface) and `--texture-field` (the label and the arrow, drawn in `currentColor`); both default to the shadcn `--foreground` and `--background`.

## 4. Customisation

- Change the label and the two tokens; round the host's corners to match (the surface is a pill). Do not change the timing, the arrow or the reduced-motion branch.

## 5. Accessibility

- The label is real text in a visually hidden span, so the host button or link takes it as its accessible name; the drawn label and both arrows are `aria-hidden`.
- Keyboard focus on the host plays the hover state; the arrow is decorative and never the only cue.


## Related
Pairs with: Roll (CTA) · Flood (CTA) — same family, same tokens.
npx shadcn@latest add https://site-supply.vercel.app/r/roll.json

## Using Site Supply from an agent

Components are curated, animated site components (buttons, links, cards, badges), 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 Component page (https://site-supply.vercel.app/s/<slug>) hands the user a prompt: the shadcn command, the markdown twin as a fallback, the mount, never recreate. A Pro Component's prompt carries a day-long token in both URLs for an entitled user. Do what the prompt says.
2. **Connected to the Site Supply MCP server** (https://site-supply.vercel.app/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://site-supply.vercel.app/r/<slug>.json` installs a free Component with no setup; or fetch `https://site-supply.vercel.app/s/<slug>.md` (or the page with `Accept: text/markdown`) and write the file under Code exactly. For Pro, send a Site Supply API key from https://site-supply.vercel.app/settings/agents as `Authorization: Bearer <key>` on either URL, or map the registry with the header in `components.json`: `"registries": { "@textures": { "url": "https://site-supply.vercel.app/r/{name}.json", "headers": { "Authorization": "Bearer ${TEXTURES_API_KEY}" } } }` (free Components need no header: `"registries": { "@textures": "https://site-supply.vercel.app/r/{name}.json" }`), then `npx shadcn@latest add @textures/<slug>`.

**A Pro Component without access:** the doors answer with the price (Pro is from $9 a month) and https://site-supply.vercel.app/checkout?texture=<slug>. Tell the user and stop. Never retry, guess or reconstruct the code.

Every published Component is listed at https://site-supply.vercel.app/llms.txt and https://site-supply.vercel.app/r/registry.json. Browse them at https://site-supply.vercel.app/textures.