# Raise

A card in your project's font that lifts on hover: the face rises and grows a touch, a soft shadow fades in under it and an arrow slides into the top-right corner.

- Slug: `raise` · Category: cards · Pro (LicenseRef-Site-Supply-Pro) · v1.0.0
- What moves: The card face rises and scales to 1.01 while a pre-drawn shadow fades in beneath it and a corner arrow slides in.
- Triggers: hover, focus, pointer-move · Touch: press · Reduced motion: simplified
- Aliases: lift card, hover lift card, elevated card · Use cases: card, pricing card · Tags: card, lift, shadow, arrow, link card, feature
- Rails: Light · 2.59 KB js · p95 1.74 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 copy, the hairline frame, the arrow and the shadow's tint
- `--texture-field` (color, default `var(--background)`): The card's face

## Placement

**Never set width or height on the Component; size the host. The Component fills whatever box it is given.** Works from 200 × 140 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">
  <Raise />
</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">
  <Raise />
</article>
```

## Install

- Command: `npx shadcn@latest add https://site-supply.vercel.app/r/raise.json` (one self-contained React file at components/textures/raise.tsx; Pro through the Copy to Agent prompt's token URL, or `npx shadcn@latest add @textures/raise` with the @textures registry and its header in components.json, see below)
- MCP: `get_texture({ ref: "raise" })` (server: /mcp)
- Markdown: /s/raise.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 Raise component (site-supply.vercel.app/s/raise)` (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=raise; 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 card face with a title and a line of body copy at the top left, set in the project's own font, framed by a hairline. On hover the face lifts: it rises a touch and grows to 1.01, a soft shadow fades in beneath it and a small arrow slides into the top-right corner. Use it for link cards, feature grids and pricing tiers that lead somewhere. Below 200 × 140 it stays static.

## 2. Behaviour timeline

- **Idle:** the resting face, inset a little inside the host to leave room for the lift and the shadow. Nothing runs: no loops, no listeners doing work.
- **Hover-in:** over 240 ms on an ease-out the face rises (2 % of the card's height at most) and scales to 1.01, the pre-drawn shadow fades in, and the arrow slides in from the bottom left of its slot.
- **Pointer move:** nothing follows the pointer; the box is read once on enter, never in the move handler.
- **Hover-out:** everything settles back together in 240 ms from wherever it is; interruptible at any point.
- **Reduced motion / slow display:** the raised state is applied in one step; nothing eases.
- **Touch:** press — a finger down raises the card, lifting it releases; nothing plays by itself.

## 3. Integration

- Install: `npx shadcn@latest add https://sitesupply.dev/r/raise.json` (one self-contained React file at components/textures/raise.tsx), or write the file `get_texture` returns exactly as returned, or use the code in this Component's markdown twin (/s/raise.md).
- Mount it inside the project's own `<article>` or `<a>` (the host keeps 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.** The host itself stays transparent: the face draws the card, inset by about 4 cqmin (6.5 below, for the shadow).
- Props: `title` (one line, ellipsised) and `body` (up to three lines, ellipsised).
- Fit: `fill` (the face fills the host less its margin, the copy is sized from it and laid out top left); works from 200 × 140 up; clips.
- Tokens on the root: `--texture-ink` (the copy, the frame, the arrow and the shadow's tint) and `--texture-field` (the face); they default to the shadcn `--foreground` and `--background`.

## 4. Customisation

- Change the title, the body and the two tokens. Do not change the timing, the lift, the margin or the reduced-motion branch.

## 5. Accessibility

- The title and body are real text in a visually hidden span, so the host link or article takes them as its content; the drawn face and the arrow are `aria-hidden`.
- Keyboard focus on the host raises the card as hover does.


## Related
Pairs with: Spotlight (card) · Reveal (card, pro) — same family, same tokens.
npx shadcn@latest add https://site-supply.vercel.app/r/spotlight.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.