# Shine

A solid pill button in your project's font. On hover a soft diagonal sheen sweeps once across it from the side the pointer came in, and the label lifts a hair.

- Slug: `shine` · Category: buttons · Pro (LicenseRef-Site-Supply-Pro) · v1.0.0
- What moves: A soft diagonal sheen sweeps once across the surface from the pointer's side; the label lifts 0.06em.
- Triggers: hover, focus, pointer-move · Touch: press · Reduced motion: simplified
- Aliases: shine button, sheen button, glint button · Use cases: CTA · Tags: button, pill, sheen, shine, cta, gloss
- Rails: Light · 2.01 KB js · p95 1.92 ms on a 4× throttled CPU · 0 layers (measured 2026-11-08 for 0.1.0)
- Estimated tokens: 3867

## Tokens

- `--texture-ink` (color, default `var(--foreground)`): The button's surface (the sheen is a faint mix of the label colour)
- `--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">
  <Shine />
</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">
  <Shine />
</article>
```

## Install

- Command: `npx shadcn@latest add https://site-supply.vercel.app/r/shine.json` (one self-contained React file at components/textures/shine.tsx; Pro through the Copy to Agent prompt's token URL, or `npx shadcn@latest add @textures/shine` with the @textures registry and its header in components.json, see below)
- MCP: `get_texture({ ref: "shine" })` (server: /mcp)
- Markdown: /s/shine.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 Shine component (site-supply.vercel.app/s/shine)` (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=shine; 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. On hover a soft diagonal sheen sweeps once across the surface, from the side the pointer came in to the other side, and the label lifts a hair. Use it for a primary call to action that should feel finished without shouting. Not for icon buttons: below 96 × 32 it stays static.

## 2. Behaviour timeline

- **Idle:** the resting button; the sheen waits off the surface. Nothing runs: no loops, no listeners doing work.
- **Hover-in:** the sheen crosses the surface once in 320 ms on an ease-in-out, from the pointer's side; the label lifts 0.06em over 240 ms.
- **Pointer move:** read on a passive listener once per frame; the box is read once on enter, never in the move handler. Staying on the button plays nothing more: the sheen plays once per arrival.
- **Hover-out:** the label settles in 240 ms and the sheen parks off the surface; interruptible at any point.
- **Reduced motion / slow display:** no sheen; the label lift is applied in one step.
- **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/shine.json` (one self-contained React file at components/textures/shine.tsx), or write the file `get_texture` returns exactly as returned, or use the code in this Component's markdown twin (/s/shine.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).
- Fit: `fill` (the 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, and the sheen at 35%); 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 one-sweep-per-arrival rule 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 the sheen are `aria-hidden`.
- Keyboard focus on the host plays the hover state from the centre (the sheen runs left to right).


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