Extract a Website's Interaction Patterns

To extract a website's interaction patterns, review each important user action from trigger to result: what the visitor clicks, what changes on screen, what feedback appears, and how the visitor returns or continues. Capture the behavior as a short sequence rather than describing only the visual appearance.

Start with an interaction inventory

For every page section, look for:

• Navigation links, menus, tabs, and filters
• Buttons, text links, cards, and clickable images
• Hover, focus, pressed, loading, success, and error states
• Scroll-based reveals, sticky elements, progress indicators, and parallax
• Video controls, autoplay behavior, pause behavior, and poster states
• Modals, drawers, tooltips, accordions, and expandable content
• Form validation, disabled controls, confirmation messages, and redirects

For each pattern, write five facts: trigger, visible response, timing, result, and recovery. For example: “Selecting a tab changes the content panel, keeps the tab row visible, updates the active state, and lets the visitor switch without leaving the page.” That is more useful than “the tabs feel smooth.”

The examples below include captured marketing pages with video or illustration references: Pangram AI Detector, Refero, Bland, and Fin Apex. Compare them as examples of media-led presentation, then verify the actual interaction details before treating any one pattern as a reusable rule. A video appearing on a page does not by itself prove autoplay, looping, controls, or a specific scroll trigger.

Observe the full state change

A strong review follows the visitor's path. Open the page at the initial state, activate one control, wait for the response, and record what changed. Check whether the URL changes, whether focus moves, whether the old content remains available, and whether the action works again.

For a menu, document the closed state, opening trigger, panel position, outside-click behavior, escape behavior, and link result. For a form, document empty, editing, invalid, submitting, success, and retry states. For a video, document the first visible frame, play state, controls, captions if visible, mute state, and what happens when the visitor scrolls away.

Do not infer behavior from a still image. Mark unknown details as unknown and test them directly when possible. This keeps the extracted pattern honest and gives the implementer a clear list of follow-up checks.

Turn patterns into reusable notes

Use a compact format such as:

Group patterns by job rather than by page: navigation, discovery, media, forms, feedback, and content expansion. Note repeated behavior separately from one-off choreography. A repeated button state is a strong candidate for a shared component; a single hero animation may remain page-specific.

Check usability before copying

Test keyboard focus, reduced-motion behavior when observable, readable feedback, and whether the next action is clear. Check mobile layouts separately because a desktop hover pattern may need a tap state, and a wide menu may become a drawer. Also check whether motion helps visitors understand a change or merely decorates the page.

The final handoff should include screenshots or references, a step-by-step behavior description, state names, open questions, and a short acceptance checklist. It should describe what visitors can do and what they see, not claim ownership of the original site's private design system.

Use this in your AI agent

> Inspect the captured website and extract its interaction patterns. For navigation, buttons, forms, media, scrolling, menus, and expandable content, document the trigger, visible state change, timing, result, recovery path, and responsive behavior. Separate observed behavior from assumptions, group repeated patterns into reusable components, and finish with an implementation checklist and open questions.

Install Fudge for your AI agent to inspect captured pages and organize observed behavior into a practical review.

Describe the purpose of each animation before describing its mechanics. Ask what changed: did motion reveal new content, confirm an action, establish hierarchy, guide attention, or simply add atmosphere? Then record the trigger, affected element, direction, approximate duration, delay, repetition, and what happens if the visitor interrupts it.

Use a small table with columns for pattern, trigger, purpose, movement, timing, and fallback. For example, a section may enter as the visitor scrolls into it, move upward slightly, fade in once, and remain visible afterward. That is enough to recreate the behavior without pretending to know the original easing values.

Check whether the content is still understandable when motion is unavailable. Avoid making an animation the only way to discover text or controls. For videos and illustrated sections, inspect several moments and note whether the media carries information or acts as decoration. If the purpose is unclear, mark the animation as optional and prioritize the interaction state that remains when it finishes.

Give the developer a prioritized list, not a gallery of impressions. Start with the primary journey, such as opening navigation, choosing a plan, submitting a form, or starting a video. For each step, include the initial state, trigger, resulting state, content or URL change, keyboard expectation, mobile variation, and failure or retry path.

Add a component inventory for repeated patterns. Each entry can include a name, supported states, content rules, spacing or placement notes, motion notes, and a reference capture. Keep page-specific choreography separate from shared behavior. Include an acceptance checklist such as: the active state is visible, focus is not lost, loading feedback appears, errors explain the next action, and the same control can be used again.

Finish with open questions that need direct verification. Examples include autoplay policy, exact motion timing, whether outside clicks close a panel, and whether a sticky header changes height. This makes uncertainty visible while keeping the implementation moving.

Related questions

• Extract a Website's Media Styles
• Extract a Website's Page Layout
• Extract a Website's Design Tokens
• Extract a Website's Spacing Scale