Give Claude Code a Website's Motion and Interactions

If you want Claude Code to recreate a website's motion and interactions, give it an observed behavior brief rather than only a screenshot. The useful brief names what moves, when it moves, what triggers it, how long it lasts, and what the user should see before and after each action.

Start with a behavior inventory

Review the page in this order and record only visible behavior:

1. Page entry: Does content fade, slide, scale, or appear immediately when the page opens?
2. Scroll reveals: Do sections, cards, images, or headings animate as they enter the viewport?
3. Hover states: Do buttons change color, lift, underline, reveal an icon, or alter an image?
4. Navigation: Does the header stay fixed, shrink, change color, or open a menu?
5. Media: Does a video autoplay, loop, pause, scrub, or open in a larger view?
6. Click states: Do tabs, accordions, menus, carousels, or filters change the visible content?
7. Feedback: What happens after a form submission, copy action, or failed request?

For every behavior, write the trigger, the visible change, the approximate timing, and the state that remains after the interaction. This gives Claude Code something it can implement and test.

Open the examples below and compare their framing before borrowing a pattern. The Claude Code reference is a very wide capture, while the Notion Developer Platform and Exa MCP Server references show different ways a technical product can organize a long marketing page. Use them as visual prompts, not as proof that their exact interactions match your target.

Use a compact motion brief

A practical prompt can follow this format:

Replace every bracket with an observation. Avoid vague instructions such as "make it feel premium" or "add smooth animations." Claude Code can act on a specific transition, trigger, and end state.

Separate essential behavior from decoration

Mark each observation as essential, helpful, or optional. Essential behavior affects navigation, content visibility, feedback, or task completion. Helpful behavior improves clarity, such as a button hover or a section reveal. Optional behavior includes decorative parallax, cursor effects, or complex page-entry choreography.

Implement essential behavior first. Then check the page at a narrow viewport, with keyboard navigation, and with reduced motion enabled. If a motion effect delays access to important content, simplify it. If an interaction changes layout, describe the small-screen version separately instead of assuming the desktop behavior will scale down well.

Turn observations into an implementation checklist

Before sending the brief, confirm that it answers:

• What starts the interaction?
• Which element changes?
• What are the start and end states?
• Is the change reversible?
• Does it affect layout or only appearance?
• What happens on mobile?
• What happens with reduced motion?
• How can the result be checked without relying on a screenshot?

A useful final instruction is: "After implementing, list each interaction and the file or component responsible for it, then explain how to test it." That keeps the build tied to the observed page instead of leaving motion as an open-ended styling task.

Use this in your AI agent

> Inspect the saved website reference for motion and interactions. Create a behavior inventory covering page entry, scroll reveals, hover states, navigation, media, clicks, and feedback. For each item, record the trigger, visible start state, end state, timing, mobile behavior, and reduced-motion behavior. Then write an implementation plan for Claude Code, separating essential, helpful, and optional interactions. Do not invent behavior that is not visible in the reference. End with a concise manual test checklist.

Install Fudge for your AI agent

Describe scroll animation as a trigger and a range, not as a mood. State which element moves, when the motion begins, where it ends, and whether the element affects the surrounding layout.

For example:

> As the feature section enters the viewport, fade the heading from 0 to 1 opacity and move it upward about 16 pixels. Start when the section is about 20% from the bottom of the viewport and finish over the next 400 milliseconds. The section should keep its layout space throughout. On small screens, use the same fade but reduce the movement. Disable the movement when reduced motion is enabled.

For pinned effects, explain the boundaries:

> Keep the preview panel visible while the text steps beside it change. Begin pinning at the section top and release when the final step reaches the section bottom. On mobile, remove pinning and stack the preview above the steps.

Also distinguish one-time reveals from continuous effects. A one-time reveal needs an entry threshold and a completed state. A parallax effect needs a relationship between scroll position and movement. If you cannot measure exact values, provide a range and ask Claude Code to keep the values in one reusable configuration object.

Ask for a behavior review that checks the page as a visitor would use it, not only whether the animation appears in a screenshot. Have Claude Code verify the initial load, scroll sequence, hover and focus states, clicks, navigation, media controls, and any loading or error feedback.

A useful review prompt is:

> Test every interaction from the behavior inventory. Confirm that each trigger works with a mouse, keyboard, and touch where relevant. Check that focus remains visible, active states remain understandable, and controls have usable labels. Resize through narrow, medium, and wide layouts. Test with reduced motion enabled and confirm that content remains available without animation. Check that no reveal hides important content, no sticky element covers the next section, and no hover-only action is required to complete a task. Report each check as pass, fail, or needs review, with the component and a suggested fix.

Ask it to compare the implementation against the written states rather than claiming visual similarity from memory. If the page uses decorative effects, verify them last, after navigation and content access work correctly.

Related questions

• Give Claude Code a Website's Page Layout
• Give Claude Code a Website's Image and Video Use
• Give Claude Code a Website's Spacing Scale
• Give Claude Code a Website's Gradients and Backgrounds