Interactions - regards.design

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.

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

{
  "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 , 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.

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, and as regards-interactions in the skill’s repository.