> ## Documentation Index
> Fetch the complete documentation index at: https://docs.regards.design/llms.txt
> Use this file to discover all available pages before exploring further.

# Interactions

> Interactions recorded on real websites, measured in the browser: hovers, menus, scroll reveals, easing curves and durations, for your agent's motion work.

`search_interactions` searches a library of interactions recorded on live websites: hovers, clicks, focus states, scroll reveals, scroll-linked motion, loops and menu glides. Each one was measured frame by frame in the browser, so your agent gets the timing and curves that made it feel right, not a guess at them.

Use it for motion: a hover state, a button press, a menu or navbar, tabs, a reveal on scroll, an easing curve or a duration to choose, "make this feel like dub's navbar", or motion that feels off. For layout, type and colour, [`search_sections`](https://docs.regards.design/tools#search_sections).

## Search

Describe the interaction in `q`, filter it, or both.

| Parameter | |
| - | - |
| `q` | The interaction you want, in any words: "a card hover that feels premium", "clip-path reveal", "a 60 ms stagger", "like Stripe's bento hover but softer". May be left out when a filter is given. |
| `trigger` | Only these triggers: `hover`, `click`, `focus`, `scroll-in` (plays once as it scrolls into view), `scroll-linked` (tied to the scroll), `loop`, `glide` (a highlight gliding along a menu). |
| `element` | Only these moving things: `card`, `button`, `link`, `nav`, `menu`, `tabs`, `hero`, `heading`, `text`, `image`, `logos`, `marquee`, `product-ui`, `canvas`, `section`… |
| `moves` | Only where one of these moves: `move`, `scale`, `rotate`, `fade`, `blur`, `filter`, `clip`, `color`, `gradient`, `background`, `shadow`, `radius`, `size`, `outline`, `text`, `morph`, `draw`, `drawn` (a canvas or WebGL). |
| `feel` | Only these curve families: `ease-out`, `ease-in-out`, `ease-in`, `linear`, `spring`, `out-and-back`, `steps`. |
| `min_ms`, `max_ms` | Only where the main move runs at least, or under, this long. |
| `look` | Only these looks of the whole: one accent colour, hairlines, monochrome, line work, glass, 3D render, grain… |
| `site_kind` | Only from these [kinds of site](https://docs.regards.design/tools.md#kinds-of-site). |
| `curve` | Only where the main move rides close to this curve, within 15% at every moment: a CSS easing (`cubic-bezier(0.16, 1, 0.3, 1)`, `ease-out`, `steps(4)`), a preset (`expo-out`, `ease-out`, `ease-in-out`, `spring`, `linear`) or a spring (`spring(170, 18)`: stiffness, then damping). |
| `limit` | How many results, 1 to 24 (default 10). |

Several values in one filter mean any of them; filters together mean all. With filters and no `q`, the results are everything the filters keep, the closest to `curve` first, and `kept` says how many there are.

```json theme={null}
{
  "q": "a navbar highlight that glides between items",
  "trigger": ["hover", "glide"],
  "feel": ["spring"]
}
```

## Results

Each result is one real interaction:

* `beats`: its timeline, as measured. Each beat says when it starts after the trigger (`atMs`), how long it runs (`durationMs`), what moves, how, and its curve (`easing`).
* `measured`: the main move's length (`mainMs`) and curve (`curve`, as CSS or `spring(stiffness, damping)`), the property families that move, a stagger, whether it moves by transforms alone, and what draws a canvas.
* `parts`, `feel`, `why`, `handles`: what each moving part does, how it feels, why it works, and short names for the technique.
* `small` and `clip`, MP4 recordings, and `picture`, a still at its peak.
* `link`, its page on ![](https://docs.regards.design/logo/mark.svg)
  regards.design, and `url`, the live page it was recorded on.

## How it counts

A search with `q` is one Instant search on your plan, from the same allowance as `search_sections`: Free's 10 a day, Pro's 1,000 and Studio's 2,500 a month cover both, on the site and through your agents. A search with filters alone counts nothing. Both are held to your plan's searches a minute. See [Instant and Deep](https://docs.regards.design/deep.md).

## The skill

Agents that read MCP resources get a skill with the tool, `skill://regards-design/interactions/SKILL.md`: how to search for motion work, read what was measured and turn an interaction into code. It is also at [regards.design/agents/interactions/SKILL.md](https://www.regards.design/agents/interactions/SKILL.md), and as `regards-interactions` in the [skill's repository](https://github.com/filipwojda/regards-skill).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.