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

> Learn how to capture exact hover state transitions with the AI Website Cloner Template. Discover how it precisely records duration, easing, and delays for your web design needs.

- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: how-to-guide
- Published: 2026-07-03

---

**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:

```json
{
  "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:

```js
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:

```js
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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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:

```tsx
<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:

```js
// 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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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.