feat: add subtle animated dot pattern to agent builder background

[amikofalvy]

Summary

• Adds a gentle floating animation to the ReactFlow dot pattern background (20s cycle)
• Adds a subtle pulsing opacity effect to the dots (4s cycle)
• Creates a more polished and dynamic visual experience in the agent builder

Test plan

• Navigate to any agent in the agent builder UI
• Observe the background dots gently drifting and pulsing
• Verify the animation is subtle and not distracting during normal use

[changeset-bot]

⚠️ No Changeset found

Latest commit: a94d109

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
agents-manage-api	Ready	Preview, Comment	Dec 18, 2025 9:11am
agents-manage-ui	Ready	Preview, Comment	Dec 18, 2025 9:11am
agents-run-api	Ready	Preview, Comment	Dec 18, 2025 9:11am

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
agents-docs	Skipped		Dec 18, 2025 9:11am

[claude]

Claude finished @amikofalvy's task —— View job

---

Code Review: Animated Dot Pattern Background

Overview

This PR adds subtle animated effects to the ReactFlow dot pattern background by:

1. Adding a 20-second floating animation to the pattern container
2. Adding a 4-second pulsing opacity effect to individual dots
3. Staggering animation delays to create a wave effect

The implementation is clean and minimal, requiring only one line change in the React component and ~40 lines of CSS animations.

---

⚠️ Critical Issues

1. Accessibility Violation - Motion Sensitivity

Severity: High | Impact: Compliance & User Experience

The animations do not respect users' motion preferences, which violates WCAG accessibility guidelines and can cause discomfort or vestibular disorders for motion-sensitive users.

Issue: Missing prefers-reduced-motion media query support.

Fix:

@media (prefers-reduced-motion: reduce) {
  .react-flow__background.animated-dots pattern,
  .react-flow__background.animated-dots pattern circle {
    animation: none;
  }
}

2. Performance Concerns - Continuous Animation

Severity: Medium | Impact: Performance & Battery

• Continuous GPU Usage: Long-running animations (20s + 4s infinite loops) keep the GPU active even when the page is idle
• Battery Impact: Particularly problematic on mobile/laptop devices
• Compositing Layer: CSS transforms may create unnecessary compositing layers

Recommendations:

• Add will-change: transform, opacity to optimize for animation performance
• Consider pausing animations when the page is not visible using Page Visibility API
• Use transform3d(0,0,0) to ensure hardware acceleration

---

🔧 Code Quality & Design Issues

3. Animation Values Could Be More Systematic

Severity: Low | Impact: Maintainability

The hardcoded animation values (20s, 4s, 2px, 4px) don't follow the existing design system patterns in globals.css.

Suggestion: Consider using CSS custom properties:

:root {
  --dot-float-duration: 20s;
  --dot-pulse-duration: 4s;
  --dot-float-distance: 4px;
}

4. Missing Animation Documentation

Severity: Low | Impact: Maintainability

The animations lack inline comments explaining their purpose and interaction, making future maintenance more difficult.

---

🏗️ Architectural Considerations

5. Animation Control Strategy

Severity: Medium | Impact: Scalability

Currently no centralized way to control animations across the application. Consider:

• User Preference: Allow users to disable decorative animations
• Performance Mode: Disable animations in low-performance scenarios
• Context Awareness: Pause animations during intensive operations

6. CSS Organization

Severity: Low | Impact: Organization

The animations are placed at the end of globals.css but could benefit from being co-located with other ReactFlow styles or in a dedicated animations section.

---

✅ What's Done Well

1. Minimal Implementation: Clean, focused changes with clear separation of concerns
2. Non-Intrusive: Subtle animations that don't interfere with functionality
3. CSS-Only Approach: No JavaScript overhead, leveraging native browser optimizations
4. Consistent Naming: Uses existing ReactFlow class naming conventions
5. Staggered Effects: Nice touch with the wave effect using :nth-child(odd)

---

📋 Action Items

Must Fix (Before Merge):

• Add prefers-reduced-motion support for accessibility compliance
• Add performance optimizations (will-change, transform3d)

Should Consider:

• Add animation pausing for non-visible pages
• Consider adding user preference controls
• Add inline documentation for the animation keyframes

Nice to Have:

• Extract magic numbers to CSS custom properties
• Organize CSS into dedicated sections

---

🔬 Technical Deep Dive

Animation Performance Analysis:

• dot-float: Uses translate() which is GPU-accelerated ✅
• dot-pulse: Uses opacity which is GPU-accelerated ✅
• Potential Issue: Missing transform3d hint for compositing layer creation

Browser Compatibility: The animations use standard CSS properties with excellent browser support.

Impact Assessment: This is a UI enhancement that improves visual polish without affecting core functionality, making it relatively low-risk.

---

Overall Assessment: Good implementation with critical accessibility issue that must be addressed. The code quality is solid, but accessibility compliance is non-negotiable.

---