# Capture Interaction Patterns from a Live Website for Reuse

[Open the live Fudge conversation](https://design.withfudge.com/share/capture-interaction-patterns-from-a-live-website-for-reuse)

Last updated: 2026-08-25

Capture interaction patterns by documenting what changes after each user action, not just by saving a still image. Record the trigger, visible response, timing, layout change, content state, and return path so another designer or developer can rebuild the behavior without guessing.

## Start with the user's action and result

For every interaction, write a short sequence:

1. **Starting state:** what the visitor sees before acting.
2. **Trigger:** click, hover, focus, scroll, drag, keyboard input, video play, or another gesture.
3. **Immediate response:** what changes within the first moment.
4. **Completed state:** what the visitor sees when the action finishes.
5. **Exit or reset:** how the visitor closes, reverses, skips, or repeats it.
6. **Content purpose:** what the interaction helps the visitor understand or do.

This method works for navigation menus, accordions, filters, carousels, product demos, scroll reveals, video sections, and animated cards. A useful pattern is not simply "the page has motion." It is a clear relationship between an action and an outcome.

The examples below include captured video-led pages for Pangram AI Detector, Refero, Bland, and Fin Apex. Use them to compare how motion and video can support a marketing page. The available notes identify video or illustration presence, but they do not establish the exact triggers, timing, or implementation of every interaction. Open the examples and verify each behavior before borrowing it.

## Captured pages

[![Pangram AI Detector](https://pin.fontofweb.com/9687?format=jpg)](https://design.withfudge.com/share/pin-9687)

[Pangram AI Detector](https://design.withfudge.com/share/pin-9687)

[![Refero](https://pin.fontofweb.com/9683?format=jpg)](https://design.withfudge.com/share/pin-9683)

[Refero](https://design.withfudge.com/share/pin-9683)

[![Bland](https://pin.fontofweb.com/9666?format=jpg)](https://design.withfudge.com/share/pin-9666)

[Bland](https://design.withfudge.com/share/pin-9666)

[![Fin Apex](https://pin.fontofweb.com/9645?format=jpg)](https://design.withfudge.com/share/pin-9645)

[Fin Apex](https://design.withfudge.com/share/pin-9645)

## Capture every meaningful state

A reliable interaction reference should cover more than the default view. Check:

- initial load and loading behavior
- hover and focus states
- open, expanded, selected, and active states
- keyboard navigation where the control allows it
- narrow and wide viewport behavior
- paused, playing, muted, and ended video states
- empty, error, and completed states when they exist
- reduced-motion behavior if the page provides it

For each state, note what stays fixed and what moves. Record whether the layout shifts, whether content is revealed in place, and whether the visitor keeps enough context to understand the change. If an animation is important, note its approximate duration, delay, easing feel, and whether it can be interrupted. These observations are more useful than saying that an experience feels smooth or polished.

## Separate the pattern from the surface style

When adapting a pattern, split your notes into behavior and appearance. Behavior might be "selecting a tab replaces the content panel while the heading remains in place." Appearance might be "the active tab uses a green accent and a short underline." This separation lets you reuse the interaction without copying a site's visual identity.

Keep a comparison table for each candidate:

| Question | Pattern A | Pattern B |
|---|---|---|
| What starts it? | Scroll | Click |
| What changes? | Media and caption | Content panel |
| Can it be reversed? | Scroll back | Close or select another item |
| Best use | Storytelling | Choice and comparison |
| Main risk | Visitor misses content | State becomes unclear |

Use the pattern only when it improves comprehension or reduces effort. Video-led marketing references can inspire pacing and emphasis, but motion should not hide important text, delay access to a key action, or make the page difficult to use with a keyboard or reduced motion.

## Validate before rebuilding

Before implementation, create a small test plan: identify the trigger, confirm the expected state change, check the layout at two widths, test keyboard focus, pause or disable motion, and verify that the visitor can return to the starting point. If the behavior depends on video, check what happens when playback is delayed or unavailable.

A specific Fudge action that helps is inspecting a captured page's structure, components, viewport, video, motion, overlays, and clipping together. That turns a visual reference into a behavior checklist. Adapt the useful pattern to your product; do not treat the observed page as proof of an official internal design system.

## Use this in your AI agent

> Capture the interaction patterns on this website. For each pattern, document the starting state, trigger, immediate response, completed state, reset or exit path, affected components, motion timing, responsive behavior, keyboard behavior, and reduced-motion fallback. Separate behavior from visual styling, compare repeated patterns, and return an implementation-ready checklist with any observations that still need verification.

[Install Fudge for your AI agent](/mcp) to inspect captured references while you work.

---

Choose the pattern that makes the visitor's next decision easier, not the one with the most motion. Score each candidate against four questions: does the trigger feel obvious, does the response explain something, can the visitor recover from a mistake, and does the pattern still work without animation or video?

Prefer a pattern that keeps important content available in the page flow and makes its state visible through text, focus, selection, or layout. A scroll reveal may suit a short narrative sequence, while tabs or an accordion may suit content visitors need to compare or revisit. A video-led treatment may support demonstration, but it should not be the only way to discover the message.

Run the same checks at narrow and wide widths. If the pattern needs many exceptions, hides content, or becomes unclear when paused, simplify it before reuse. Document the reason for choosing it alongside the behavior notes so the team can protect the purpose during implementation.

---

Ask for a structured inventory rather than a general critique. For every interaction, request a name, location, starting state, trigger, visible state changes, timing, affected content, reset path, responsive behavior, keyboard behavior, and fallback when motion or media is unavailable.

Have the agent group repeated patterns and point out meaningful differences. For example, several video sections may share autoplay and pause behavior but differ in whether the video is decorative or carries essential information. Ask it to separate confirmed observations from items that need manual testing, especially hover-only behavior, timing, and hidden states.

The most useful final output is an implementation brief: a short behavior description, a state table, accessibility checks, content requirements, and a recommendation to reuse, adapt, or avoid the pattern. That gives a developer a clear next step without copying the site's surface styling or assuming access to its private design rules.

## Related questions

- [Capture Media Styles From a Live Website for Reuse](/share/capture-media-styles-from-a-live-website-for-reuse)
- [Capture a Website Typography System for Reuse](/share/capture-typography-system-from-a-live-website-for-reuse)
- [Extract a Website's Border Radius Scale](/share/extract-a-website-s-border-radius-scale)
- [Capture Gradient Styles from a Live Website for Reuse](/share/capture-gradient-styles-from-a-live-website-for-reuse)