# How to Discover UI Elements That Would Benefit From Motion: A Systematic Guide

> Discover UI elements that benefit from motion. Map your UI, sweep for seam classes, and validate candidates using the four Gate questions from the Find Animation Opportunities skill.

- Repository: [Emil Kowalski/skills](https://github.com/emilkowalski/skills)
- Tags: getting-started
- Published: 2026-07-28

---

**Discover UI elements that would benefit from motion by mapping your UI surface, sweeping for seven specific seam classes like feedback gaps and teleporting states, and validating each candidate through the four Gate questions (Frequency, Purpose, Speed, Function) defined in the Find‑Animation‑Opportunities skill.**

The emilkowalski/skills repository provides a disciplined framework for identifying animation opportunities without over‑animating interfaces. According to the source code in [`skills/find-animation-opportunities/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/find-animation-opportunities/SKILL.md), the process treats discovery as a strict filtering methodology rather than a creative wishlist. This ensures motion serves functional clarity rather than visual decoration.

## Map the UI Surface

Begin by determining your technical stack, motion library, and existing easing tokens. This establishes the design “personality” of your application—whether it is a crisp dashboard requiring snappy 100 ms feedback or a playful consumer app accommodating softer 400 ms transitions.

Document your current animation vocabulary and component boundaries. This baseline prevents proposing motion that conflicts with existing patterns or exceeds your performance budget.

## Sweep for the Seven Seam Classes

Search your codebase for the seven seam classes defined in the **“Where to Hunt”** section of [`SKILL.md`](https://github.com/emilkowalski/skills/blob/main/SKILL.md)【L71-L95】. These patterns indicate where motion can bridge gaps in the user experience.

### Feedback Gaps

Locate pressable elements lacking `:active` styles or visual response. These create uncertainty about whether an interaction registered.

### Teleporting State

Identify conditional renders and instant content swaps where elements appear or vanish without transition. Common in React components using `isOpen &&` patterns without exit animations.

### Missing Spatial Story

Find popovers, tooltips, and dropdowns that materialize out of thin air. These need entrance animations that communicate origin and direction.

### Group Entrances

Spot large grids or lists that load all at once, overwhelming the user. Staggered entrance animations can guide attention sequentially.

### Gesture Seam

Locate draggable elements or swipeable cards that lack spring physics or follow‑through. These interactions feel mechanical without velocity‑based motion.

### Delight Budget

Reserve motion for rare, first‑time moments such as onboarding celebrations or achievement unlocks. These high‑impact instances justify longer animation durations.

### Other Edge Cases

Review the full taxonomy in [`SKILL.md`](https://github.com/emilkowalski/skills/blob/main/SKILL.md)【L71-L95】 for additional patterns like skeleton screens and state‑change indicators.

## Run the Four Gate Questions

Each candidate must pass four sequential gates documented in [`SKILL.md`](https://github.com/emilkowalski/skills/blob/main/SKILL.md)【L27-L68】. Fail any gate and reject the candidate.

### Frequency Gate

Ask: *How often will the user see this animation?*

**Pass criteria:** Only **Occasional** or **Rare** moments survive. Daily high‑frequency interactions (like button presses) must complete within 100–160 ms to avoid fatigue【L27-L35】.

### Purpose Gate

Ask: *Does the motion provide Feedback, Spatial consistency, State indication, Preventing a jarring change, Explanation, or Delight?*

**Pass criteria:** The purpose must match one of these exact labels. Vague “polish” or “make it pop” justifications fail【L40-L48】.

### Speed Gate

Ask: *Can the animation stay within the standard budget?*

**Pass criteria:** Press feedback must resolve in 100–160 ms; modals and page transitions should not exceed 500 ms【L51-L61】. Exceeding these thresholds risks blocking user interaction.

### Function Gate

Ask: *Does motion help the user or merely decorate?*

**Pass criteria:** Motion must actively assist comprehension—such as showing causality or spatial relationships. Decorative motion on data‑dense interfaces is rejected【L65-L68】.

## Document and Hand Off

Surviving suggestions are reported in a concise table specifying location, purpose, frequency classification, and the exact CSS or JavaScript implementation recipe【L98-L104】. This documentation feeds into the *improve‑animations* workflow for prioritization and execution.

## Code Examples for Detecting Animation Opportunities

Use grep‑based sweeps to identify seam patterns in your source code before applying the Gate.

```bash

# Find conditional renders that lack a transition

rg "(isOpen &&|display:\s*none)" -g "*.tsx" --files-with-matches

# Locate pressable elements without an active style

rg "onClick|onPress" -g "*.tsx" | while read f; do
  if ! rg ":active" "$f" > /dev/null; then echo "$f"; fi
done

```

Implement a Gate‑compliant press feedback animation:

```css
/* file: Button.module.css */
.button {
  transition: transform 160ms var(--ease-out);
}
.button:active {
  transform: scale(0.97);   /* Feedback – occasional use, fast enough */
}

```

Create an occasional toast entrance that respects the speed budget:

```tsx
// file: Toast.tsx
export const Toast = ({children}) => (
  <div
    className="toast"
    style={{
      animation: "toastEnter 400ms var(--ease-out) forwards",
    }}
  >
    {children}
  </div>
);

```

```css
/* CSS */
@keyframes toastEnter {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

```

Both examples satisfy the **Speed** gate (≤ 400 ms) and are scoped to **Occasional** UI (toasts), ensuring they pass the Frequency criterion.

## Key Files in the Repository

| File | Purpose |
|------|---------|
| [`skills/find-animation-opportunities/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/find-animation-opportunities/SKILL.md) | Complete methodology, Gate criteria, and seam classification system【L1-L104】 |
| [`skills/improve-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/SKILL.md) | Workflow for converting discovered opportunities into implementation plans |
| [`skills/animation-vocabulary/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/animation-vocabulary/SKILL.md) | Terminology reference for naming proposed motion behaviors |
| [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) | Validation rules for auditing existing animations against the Gate |

## Summary

- **Discover UI elements that would benefit from motion** by treating it as a filtering process, not a brainstorming session.
- Sweep for seven specific seam classes including feedback gaps, teleporting states, and missing spatial stories【L71-L95】.
- Validate every candidate through the four Gate questions: Frequency (occasional/rare only), Purpose (must match defined categories), Speed (100–160 ms for feedback, ≤ 500 ms for modals), and Function (must help the user)【L27-L68】.
- Document survivors with precise technical recipes before handing off to implementation【L98-L104】.
- Use grep patterns to automate the detection of seam classes in React/TypeScript codebases.

## Frequently Asked Questions

### How do I decide if an animation is too frequent to add?

Check the interaction count. If a user encounters the motion dozens of times per day—such as button presses or navigation tabs—it likely fails the **Frequency** gate. According to [`SKILL.md`](https://github.com/emilkowalski/skills/blob/main/SKILL.md), only Occasional or Rare moments survive, and high‑frequency interactions must resolve in 100–160 ms to prevent cognitive fatigue【L27-L35】.

### What is the maximum duration allowed for UI animations in this methodology?

The **Speed** gate enforces strict budgets: micro‑interactions like press feedback should complete in 100–160 ms, while larger transitions such as modal entrances must stay under 500 ms【L51-L61】. Exceeding these thresholds risks interrupting user flow and failing the Gate.

### Can I use motion purely for decorative purposes?

No. The **Function** gate explicitly rejects decorative motion on data‑dense interfaces. Motion must help the user by providing feedback, explaining spatial relationships, or preventing jarring changes【L65-L68】. Decorative effects only pass if they fall under the **Delight** category in rare, first‑time moments.

### Where can I find the exact taxonomy of seam classes to hunt for?

The complete list of seven seam classes—including feedback gaps, teleporting state, and gesture seams—is documented in [`skills/find-animation-opportunities/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/find-animation-opportunities/SKILL.md)【L71-L95】. This file provides specific criteria for identifying each pattern in your codebase.