---
title: Interaction Design
category: product
entity_type: skill
price: $15
canonical: https://forgehouse.ai/skills/interaction-design/
lang: en
hreflang_alt: https://forgehouse.ai/tr/skiller/interaction-design/
last_updated: 2026-06-20
---

# Interaction Design

> Design and implement microinteractions, motion design, transitions, and user feedback patterns.

A practical toolkit for designing microinteractions, motion, transitions, and user feedback that communicate rather than decorate. It pairs ready React and CSS patterns with timing scales, easing curves, and accessibility rules so every animation has purpose and stays at 60fps.

## Use cases
- Adding microinteractions like button taps and ripple effects for instant feedback
- Building skeleton screens and progress indicators for loading states
- Designing smooth page and component transitions
- Creating gesture interactions such as swipe-to-dismiss cards
- Implementing accessible toggle, dropdown, and notification animations
- Respecting reduced-motion preferences across an entire app

## Benefits
- Make interfaces feel polished and trustworthy with purposeful motion
- Avoid janky animation by sticking to GPU-friendly transform and opacity
- Reduce abandonment with loading states that communicate progress, not anxiety
- Stay accessible by default with built-in reduced-motion handling

## What’s included
- Timing scale and easing-function reference for consistent motion
- Framer Motion patterns for buttons, toggles, page transitions, and swipe gestures
- Skeleton screen and progress bar components for loading states
- Ripple-effect and feedback interaction code
- Reduced-motion CSS and JavaScript handling
- Anti-pattern list covering janky layout-triggering animations and over-animation

## Who it’s for
Front-end developers and UI designers adding motion and feedback polish to web interfaces without sacrificing performance or accessibility.

## How it runs
Every animation must earn a job: feedback, orientation, focus, or continuity. Decorative motion gets cut, durations come from a fixed timing scale, and any frame over 16ms counts as jank to be fixed.
1. Assigns each animation a job before it is written: feedback (confirming an action happened), orientation (where elements come from and go), focus (directing attention) or continuity. Decorative motion with no job gets cut.
2. Sets durations from a fixed timing scale: 100-150ms for micro feedback like hovers and clicks, 200-300ms for toggles and dropdowns, 300-500ms for modals and page changes, with ease-out on entry and ease-in on exit.
3. Implements the core interaction patterns: skeleton screens that preserve layout while loading, spring-physics toggles and buttons, AnimatePresence page transitions, ripple click feedback, swipe-to-dismiss gestures with a 100px threshold.
4. Enforces the 60fps performance budget: only GPU-accelerated transform and opacity are animated; width, height, top and left are off limits because they trigger layout recalculation and visible jank.
5. Wires prefers-reduced-motion at both CSS and JS level, so every animation collapses to an instant state change for users who disable motion, with color or icon swaps carrying the same information.
6. Profiles the result in the browser Performance panel: any frame over 16ms counts as jank and gets a root-cause fix before the interaction ships.

## FAQ
### We don't use Framer Motion, just plain CSS. Still useful?
Yes. Most patterns ship with both Framer Motion and CSS variants, and the timing scale plus easing-function reference is library-agnostic. Skeleton screens, progress indicators, and reduced-motion handling all work in plain CSS.

### How does it keep animations at 60fps?
By restricting motion to GPU-friendly transform and opacity, and explicitly flagging layout-triggering properties in the anti-pattern list. Reduced-motion preferences are handled in both CSS and JavaScript by default, so accessibility never becomes an afterthought.

### Will it design a motion identity for my brand?
No. This is a toolkit of microinteractions, transitions, and feedback patterns whose job is communication, not decoration. Brand-specific motion language and art direction are a separate design effort.

## Price
$15, one-time, no subscription. VAT included.

Related guide: [Building a design system with Claude Design](https://forgehouse.ai/guides/claude-design-design-system/)