# Bloom

A checkerboard lattice of slim horizontal and vertical diamonds. Near the pointer they grow up to 3.5× and meet into four-point stars.

- Slug: `bloom` · Category: grids · Pro (LicenseRef-Textures-Pro) · v0.1.0
- What moves: Small diamond slivers near the pointer grow larger and meet into star crosses, then spring back to slivers when the pointer leaves.
- Triggers: hover, focus, pointer-move · Touch: press · Reduced motion: simplified
- Aliases: diamond lattice, star cross grid, sliver checkerboard, radial diamond scale · Use cases: hero, background, card · Tags: grid, swell, dense, soft, ripple
- Rails: Measured 2026-10-18 for 0.1.0: 1.36 KB js, p95 14.41 ms on a 4× throttled CPU; not yet within every budget line, so no Light badge
- Estimated tokens: 1562

## Tokens

- `--texture-ink` (color, default `var(--foreground)`): Ink of the marks
- `--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 × 113 px up; keeps 1/0.7047 (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: 1 / 0.7047; width: 100%; max-width: 48rem; overflow: hidden; border-radius: 4px; }
```

```tsx
<a className="host" href="/s/bloom">
  <Bloom />
  <span className="sr-only">Bloom</span>
</a>
```

### 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
<section className="section">
  <div className="host" aria-hidden="true"><Bloom /></div>
  <div className="content">…</div>
</section>
```

## Install

- MCP: `get_texture({ ref: "bloom" })` (server: /mcp)
- Registry: `npx shadcn@latest add @textures/bloom` (React; the @textures registry in components.json, see below)
- Markdown: /s/bloom.md (free code included; Pro with an API key as the bearer token)
- Prompt: "Implement this hover animation from Textures. @/s/bloom"
- After installing: view the host at the sizes it will actually appear in, mobile and desktop.
- Suggested commit: `feat: add Bloom hover texture (textures.dev/s/bloom)` (a suggestion the agent and the human can edit, never a write).

Code: Pro. Sign in on Pro and use Copy to Agent: the link it copies carries a one-day token that unlocks this twin. Agents with an API key send it as a bearer header.. Live preview: /embed/bloom. JSON twin: /s/bloom.json.

## Agent brief

## 1. What it is

A checkerboard lattice of slim horizontal and vertical diamonds. Near the pointer they grow up to 3.5× and meet into four-point stars. Use it as a hero or background panel, or inside a card, wherever a field of marks can answer the pointer. Not for small icons: below 160 × 113 it stays static. Recognised as lattice (confidence 0.991) by the Textures engine.

## 2. Behaviour timeline

- **Idle:** the resting field. Nothing runs: no loops, no listeners doing work.
- **Hover-in:** the on/off weight springs to 1 in about 80 ms; small diamond slivers near the pointer grow larger and meet into star crosses, then spring back to slivers when the pointer leaves.
- **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. Falloff: radial, radius 0.89 of the short side, smoothstep.
- **Hover-out:** every element springs back (stiffness 170, damping 26); interruptible at any point.
- **Reduced motion / slow display:** the same states without easing: everything snaps.
- **Touch:** a tap plays a short ripple.

## 3. Integration

- Install: `npx shadcn@latest add @textures/bloom` (React) or copy `vanilla/`.
- The host provides `position: relative` and a size. **Never set width or height on the Texture; size the host.**
- Fit: `cover` by default (the panel, aspect 1 / 0.7047, covers the host and crops at the edges), `contain` available; works from 160 × 113 up; clips.
- Tokens on the root: `--texture-ink` (the marks) and `--texture-field` (the panel); both default to the shadcn `--foreground` and `--background`.

## 4. Customisation

- Change the two tokens. Do not change the spring, the falloff or the reduced-motion branch; the motion spec lives in `motion.ts` and is read by the shared runtime.

## 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, pro) · Magnet (hero, pro) — same family, same tokens.
npx shadcn@latest add https://textures.dev/r/glow.json?via=code

## Using Textures from an agent

Textures are curated hover animations delivered as code (React and vanilla). There are four ways in, in this order:

1. **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 files it returns.
2. **In a project with shadcn (React):** add the registry to `components.json` once, then run `npx shadcn@latest add @textures/<slug>`. For free Textures, no key: `"registries": { "@textures": "https://textures.dev/r/{name}.json" }`. For Pro, send a Textures API key: `"registries": { "@textures": { "url": "https://textures.dev/r/{name}.json", "headers": { "Authorization": "Bearer ${TEXTURES_API_KEY}" } } }` with the key in `TEXTURES_API_KEY` (in `.env.local`).
3. **Not connected, no shadcn:** fetch `https://textures.dev/s/<slug>` as markdown (send `Accept: text/markdown`, or use `https://textures.dev/s/<slug>.md`). Free Textures include their code. For a Pro Texture, send `Authorization: Bearer <key>` with a Textures API key from https://textures.dev/settings/agents (Pro accounts).
4. **A Pro Texture without access:** tell the user it is a Pro Texture (Pro is $19 a month or $180 a year) and give them https://textures.dev/checkout?texture=<slug>. 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. Connect an agent at https://textures.dev/mcp.