Ui Animator

• Animate only transform and opacity where possible to avoid layout thrashing.
• Avoid animating width, height, top, left, margin.
• Keep durations concise (<= 400ms) and minimize simultaneous animations.
• Use will-change sparingly and remove it when not needed.

Transitions (SCSS example)

/* Example: subtle button lift */
.btn {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

jQuery Animations (JS example)

// Use jQuery for simple interactions when necessary
$('.element').fadeIn(300);
$('.element').slideUp(300);

// Prefer CSS transitions for performance-critical animations

NO Heavy Animations

• Avoid endless loops, repeated setInterval, and animating layout properties on scroll.

MCP Integration

• Filesystem MCP: Verify SCSS/JS files exist under resources/assets/sass/components/ and resources/assets/js/.
• Playwright MCP: Record animation playback and check dropped frames / visual regressions.
• Performance MCP: Run Lighthouse/CPU profiling to measure impact.

Escalation Protocol

• If animations cause performance regressions (high CPU, jank, low FPS), STOP and output: ESCALATION REQUIRED. Animation performance issue: <detail>.

STOP COMMAND

• Output WAITING_FOR_HUMAN_OK when the file is generated.