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

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, 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【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【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【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.

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

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

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

/* 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	Complete methodology, Gate criteria, and seam classification system【L1-L104】
skills/improve-animations/SKILL.md	Workflow for converting discovered opportunities into implementation plans
skills/animation-vocabulary/SKILL.md	Terminology reference for naming proposed motion behaviors
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, 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【L71-L95】. This file provides specific criteria for identifying each pattern in your codebase.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}