# Lean

A solid pill button in your project's font that leans toward the pointer: the surface follows the hand a little, the label a little further, and both spring home on leave.

- Slug: `lean` · Category: buttons · Pro (LicenseRef-Site-Supply-Pro) · v1.0.0
- What moves: The surface translates toward the pointer, up to a tenth of the host's height, and the label 1.6 times as far; both spring home on leave.
- Triggers: hover, focus, pointer-move · Touch: press · Reduced motion: simplified
- Aliases: magnetic button, magnet button, parallax button · Use cases: CTA · Tags: button, magnetic, parallax, spring, cta, pill
- Rails: Light · 1.88 KB js · p95 1.83 ms on a 4× throttled CPU · 0 layers (measured 2026-11-08 for 0.1.0)
- Estimated tokens: 3436

## Tokens

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

## 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">
  <Lean />
</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">
  <Lean />
</article>
```

## Install

- Command: `npx shadcn@latest add https://site-supply.vercel.app/r/lean.json` (one self-contained React file at components/textures/lean.tsx; Pro through the Copy to Agent prompt's token URL, or `npx shadcn@latest add @textures/lean` with the @textures registry and its header in components.json, see below)
- MCP: `get_texture({ ref: "lean" })` (server: /mcp)
- Markdown: /s/lean.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 Lean component (site-supply.vercel.app/s/lean)` (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=lean; 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 that leans toward the pointer. While hovered the surface follows the pointer's offset from the centre, at most a tenth of the host's height, and the label follows 1.6 times as far, so it seems to float above the surface. Leaving springs both home. Use it for a primary call to action that should feel magnetic. Not for icon buttons: below 96 × 32 it stays static.

## 2. Behaviour timeline

- **Idle:** the resting pill, centred. Nothing runs: no loops, no listeners doing work.
- **Hover-in:** the hover weight springs up (about 240 ms) and the surface eases toward its lean every frame (`k = 1 - (1 - 0.2) ** (dt * 60)`), the label 1.6 × further.
- **Pointer move:** read on a passive listener once per frame; the lean is proportional to the pointer's offset from the centre on each axis; the box is read once on enter, never in the move handler.
- **Hover-out:** the weight springs to zero and both layers ease home to exact rest within 300 ms; interruptible at any point.
- **Reduced motion / slow display:** the lean is applied in one step; nothing eases.
- **Touch:** press — a finger down leans the button toward where it lands, lifting it releases; nothing plays by itself.

## 3. Integration

- Install: `npx shadcn@latest add https://sitesupply.dev/r/lean.json` (one self-contained React file at components/textures/lean.tsx), or write the file `get_texture` returns exactly as returned, or use the code in this Component's markdown twin (/s/lean.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.** Leave the host itself unstyled (no background or border): the drawn pill sits inset by its largest lean (12 % of the height on every side) so it never clips.
- Props: `label` (the text, one line; a long label ends in an ellipsis).
- Fit: `fill` (the inset surface fills the host, the label is sized from it and centred); works from 96 × 32 up; clips.
- Tokens on the root: `--texture-ink` (the surface) and `--texture-field` (the label); both default to the shadcn `--foreground` and `--background`.

## 4. Customisation

- Change the label and the two tokens. Give the host about 12 % more height than the pill you want to see. Do not change the lean, the parallax, the easing 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 surface and label are `aria-hidden`.
- Keyboard focus on the host plays the hover state from the centre (the pill stays centred, the hover weight is on); the host's own focus ring stays visible around it.


## 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.