# How to Analyze Motion and Interactions on a Live Website [Open the live Fudge conversation](https://design.withfudge.com/share/analyze-motion-and-interactions-from-a-live-website) Last updated: 2026-08-25 To analyze motion and interactions from a live website, review each visible state, record what changes, and connect every movement to the user's action. The most useful result is an interaction inventory that explains the trigger, response, timing, affected elements, and purpose of each behavior. ## Start with an interaction inventory Work through the page in a fixed order so small details do not disappear from memory. For every section, check: 1. **Entry state:** What is visible before the visitor does anything? 2. **Trigger:** Does the behavior begin on page load, scroll, hover, focus, click, drag, or video playback? 3. **Change:** Which element moves, fades, expands, swaps, sticks, reveals, or changes color? 4. **Timing:** Is the response instant, gradual, delayed, or tied to another animation? 5. **Purpose:** Does it explain content, confirm an action, guide attention, or add atmosphere? Use a simple table with columns for section, trigger, response, timing, and user benefit. This keeps the review practical instead of turning it into a list of visual effects. Open the examples below and compare the first screen before borrowing a pattern. The Pangram AI Detector, Refero, Bland, and Fin Apex references are useful starting points for noticing how illustration, video, and marketing content share attention. They are examples to study, not proof that every motion choice on those pages works for every project. ## 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) ## Review motion by page moment Analyze motion in four passes: - **On load:** Look for entrance fades, staggered text, moving illustrations, autoplay video, and changes that happen before scrolling. - **During scroll:** Note pinned sections, parallax movement, cards entering the viewport, progress indicators, and transitions between sections. - **On interaction:** Test navigation, buttons, cards, menus, tabs, accordions, forms, and media controls. Record both the immediate response and the resulting page state. - **At rest:** Pause after each action. A good review includes the final state, not just the animation that led to it. For each behavior, ask whether the motion preserves context. A menu should make its open state obvious. A card should reveal enough information to explain why it changed. A video overlay should not hide the control needed to pause or replay it. If an effect looks impressive but does not clarify an action or relationship, mark it as decorative rather than functional. ## Check interaction quality, not just style A motion review should include a short usability checklist: - Can you tell what is interactive before trying it? - Does hover have a keyboard or focus equivalent where needed? - Does the page communicate loading, success, failure, and completion? - Are controls still understandable when animation is disabled or skipped? - Does a transition move attention to the right place? - Does the interaction work at a slower pace, on a small screen, and after returning to the page? - Do repeated animations become distracting? Separate **feedback motion** from **attention motion**. Feedback confirms an action, such as a button changing after a click. Attention motion attracts interest, such as a looping illustration or background video. Feedback usually deserves consistency and clarity. Attention motion should be restrained enough that it does not compete with the main task. ## Turn observations into reusable direction End your analysis with three short lists: patterns worth keeping, behaviors that need testing, and effects to avoid. Then write implementation notes in plain language, such as: - "Reveal the next card as the visitor scrolls into the section." - "Keep the title visible while the supporting diagram changes." - "Use a short color change on focus, not only on hover." - "Pause background video when it leaves the viewport." This gives a designer or developer a usable brief rather than a vague statement that the site feels polished. If you are comparing several references, score each behavior from 1 to 5 for clarity, usefulness, restraint, and consistency. The score is less important than explaining the reason behind it. ## Use this in your AI agent > Analyze the motion and interactions on this captured website. Review page-load effects, scroll behavior, hover and focus states, clicks, menus, video, overlays, transitions, and final resting states. Return an interaction inventory with section, trigger, visible change, timing, purpose, usability concern, and a practical recommendation. Separate functional feedback from decorative motion, and flag behaviors that need testing on keyboard, mobile, and reduced-motion settings. Compare the result with the visible examples only where they provide a relevant pattern. [Install Fudge for your AI agent](/mcp) to run this kind of review from your saved website references. --- Use one row per interaction and describe the behavior as a sequence of states. A useful row includes location, starting state, trigger, transition, ending state, timing, responsive behavior, and implementation note. For example: "Hero preview, still image, hover over play control, control gains contrast and preview starts, 150 ms ease-out, control remains visible on mobile, pause when the preview leaves the viewport." This is clearer than "make the hero feel interactive." Capture screenshots or short recordings for important states, but keep the written description independent of the image. Record what happens before and after the action, including whether the page scrolls, locks, resizes, or changes focus. For menus and dialogs, document how the visitor closes them and where focus returns. Mark each row as required, supporting, or decorative. Required behaviors communicate navigation, status, or completion. Supporting behaviors improve orientation. Decorative effects can be reduced or removed if they compete with the task. Finish with a small test list for desktop, mobile, keyboard navigation, slow connections, and reduced motion. --- Test the behaviors that affect navigation and comprehension before reviewing visual polish. Start with the header, primary call to action, menus, forms, tabs, accordions, and any section where content appears only after scrolling. Confirm that every action has a visible result and that the visitor can recover from a mistaken click. Next, test media. Check whether autoplay has a clear purpose, whether sound is controlled, whether video pauses when it is no longer useful, and whether overlays leave essential controls accessible. Try the page with a slow connection and with media blocked. Important information should still have a readable fallback. Then test motion settings and input methods. Use keyboard focus, touch, a narrow viewport, and reduced-motion preferences. Watch for elements that move too quickly, hide labels, shift the layout, or trap focus. A practical priority order is: broken task, unclear state, inaccessible control, distracting repetition, then aesthetic refinement. ## Related questions - [Analyze Page Layout from a Live Website](/share/analyze-page-layout-from-a-live-website) - [Analyze Image and Video Use From a Live Website](/share/analyze-image-and-video-use-from-a-live-website) - [How to Analyze a Website Spacing Scale](/share/analyze-spacing-scale-from-a-live-website) - [Analyze Gradients and Backgrounds from a Live Website](/share/analyze-gradients-and-backgrounds-from-a-live-website)