Bug Report 🐛

The Learn button in the Template Playground interface has a continuously looping animation because the loop property is set to true in its configuration. This creates visual distraction and potential accessibility concerns for users.

Expected Behavior

The Learn button animation should play a limited number of times (e.g., 1-3 iterations) to draw initial user attention, then stop. This provides a better user experience and complies with WCAG 2.1 accessibility guidelines for motion.

Current Behavior

The Learn button continuously blinks/animates in an infinite loop because the loop property is configured as true. This causes:

• Persistent visual distraction for all users
• Reduced professional appearance of the interface
• Non-compliance with WCAG 2.1 Success Criterion 2.3.3 (Animation from Interactions)

Possible Solution

Change the loop: true property to loop: false in the relevant configuration file, or set it to a specific number of iterations (loop: 3). This will stop the infinite animation while still providing initial visual feedback to users.

Steps to Reproduce

1. npm run dev in project directory or visit playground
2. Observe the "Learn" button in the main interface
3. Notice the button continuously blinks/animates without stopping

Context (Environment)

This issue affects all users visiting the Template Playground by creating unnecessary visual distraction.

Desktop

• OS: [Linux]
• Browser: [Brave]