How to Capture Exact Hover State Transitions Including Duration and Easing with the AI Website Cloner Template

The AI Website Cloner Template automatically captures precise hover transition data—including duration, easing curves, and delays—by probing the live DOM with getComputedStyle during its reconnaissance phase.

When you run the /clone-website skill on a target site, the template doesn’t just screenshot the hover state; it records exactly how the animation behaves. This guide explains how the system extracts transition timing functions and durations, where that data lives in the codebase, and how you can verify or extend these capabilities.

How the Template Captures Hover Transitions

During the Reconnaissance phase, the cloning agents execute a scripted hover over each interactive element. Immediately after triggering the hover state, the system calls the browser’s native window.getComputedStyle API to read the computed CSS transition values. This approach captures the final resolved values after all CSS cascades, including Tailwind utilities and custom stylesheets, have been applied.

The Four CSS Transition Properties Extracted

The reconnaissance script specifically targets these computed properties to capture exact hover state transitions including duration and easing:

• transition-property – Identifies which CSS properties animate (e.g., background-color, transform, opacity).
• transition-duration – Records the exact time in milliseconds (e.g., 200ms, 0.3s).
• transition-timing-function – Captures the easing curve, including complex cubic-bezier(0.4, 0, 0.2, 1) definitions.
• transition-delay – Notes any start delay before the animation begins.

Where Hover Transition Data Is Stored

The extracted values are serialized into component-spec files located under docs/research/components/. These specification files contain structured JSON blocks that define the interaction behavior for each cloned component.

For example, a captured Button component might generate the following specification:

{
  "hover": {
    "transition": {
      "property": "background-color, border-color",
      "duration": "200ms",
      "timingFunction": "cubic-bezier(0.4,0,0.2,1)",
      "delay": "0s"
    }
  }
}

This data drives the generated React components, ensuring the cloned website replicates not just the visual state but the exact timing and feel of the original interactions.

Technical Implementation: From Hover Simulation to Spec Generation

The capture process occurs in three distinct steps implemented within the cloning pipeline defined in scripts/sync-skills.mjs.

Step 1: Hover Simulation

The clone skill injects a JavaScript snippet that programmatically triggers the hover state:

element.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));

This event bubbles through the DOM exactly like a real user interaction, ensuring pseudo-classes like :hover are applied by the browser engine.

Step 2: Style Extraction with getComputedStyle

Immediately after the hover event fires, the script extracts the computed styles:

const styles = window.getComputedStyle(element);
const transition = {
  property: styles.transitionProperty,
  duration: styles.transitionDuration,
  timingFunction: styles.transitionTimingFunction,
  delay: styles.transitionDelay,
};
// send `transition` back to the agent

Because getComputedStyle returns the final computed values, this technique captures duration and easing even when they originate from complex CSS inheritance or Tailwind configurations.

Step 3: Spec Generation

The agent writes the extracted transition object into the component’s specification file. Later stages of the pipeline read these specs to generate React components in src/components/ui/ that replicate the exact hover behavior.

Working with Tailwind v4 Transitions

The AI Website Cloner Template uses Tailwind v4, which means most UI components already include transition utilities. For instance, in src/components/ui/button.tsx at line 9, the base class list includes transition-all. This utility tells the browser to animate all animatable properties using Tailwind’s default timing: 200ms duration with cubic-bezier(0.4, 0, 0.2, 1) easing.

The reconnaissance tool reads these computed values, so even if a developer overrides Tailwind defaults, the exact easing curve and duration are captured.

To implement a custom transition in a generated component, modify the Tailwind class string:

<Button
  className="transition-[background-color] duration-300 ease-out"
>
  Custom Hover
</Button>

The next time you run the clone skill, the recon tool will detect the new duration-300 (300ms) and ease-out curve.

Manual Verification and Debugging

You can verify hover transition capture manually using your browser console. This replicates exactly what the cloning agents execute:

// Assume `el` is the element you want to inspect
el.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));

// Let the browser apply the hover styles, then read them
const cs = window.getComputedStyle(el);
const hoverTransition = {
  property: cs.transitionProperty,
  duration: cs.transitionDuration,
  timingFunction: cs.transitionTimingFunction,
  delay: cs.transitionDelay,
};

console.log('Hover transition:', hoverTransition);

For components using the template’s utility functions, the cn() helper in src/lib/utils.ts ensures that transition classes are merged correctly without conflicts.

Summary

• The Reconnaissance phase uses getComputedStyle to read exact transition values after simulating hover events.
• Four key properties are captured: transition-property, transition-duration, transition-timing-function, and transition-delay.
• Data is stored in docs/research/components/ as JSON specifications that drive code generation.
• Tailwind v4 utilities like transition-all are automatically resolved to their computed values (e.g., 200ms and cubic-bezier(0.4,0,0.2,1)).
• The capture script is managed through scripts/sync-skills.mjs and can be manually verified using browser DevTools.

Frequently Asked Questions

How does the template handle custom cubic-bezier easing curves?

The template captures any easing curve defined in the source CSS, including complex cubic-bezier() values. When getComputedStyle reads the transition-timing-function, it returns the exact mathematical curve (e.g., cubic-bezier(0.34, 1.56, 0.64, 1)), which is stored in the component spec and can be reapplied via inline styles or Tailwind’s arbitrary value syntax.

Can I override the captured transition values in the generated code?

Yes. After the clone completes, you can modify the generated components in src/components/ui/ directly. Edit the Tailwind classes (e.g., changing duration-200 to duration-500) or add custom CSS. The cn() utility in src/lib/utils.ts helps merge these overrides with the base classes without specificity conflicts.

What happens if an element has no transition properties defined?

If an element lacks CSS transitions, getComputedStyle returns "all 0s ease 0s" or equivalent default values. The reconnaissance script records these defaults in the spec file, resulting in instantaneous state changes (0ms duration) in the generated React component, which accurately reflects the original site’s non-animated hover behavior.

Where is the hover capture script defined in the codebase?

The logic that regenerates the capture capability resides in scripts/sync-skills.mjs, which maintains the /clone-website skill. The actual hover simulation and style extraction code is injected at runtime by the cloning agents, but the skill definition and reconnaissance pipeline configuration are stored in the repository’s skill manifests referenced by that script.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}