interaction-physics
Interaction Design
Overview
Interactions are the moments when your interface comes alive. They're the transitions between states, the feedback when users take action, the animations that guide attention. When done well, interactions are invisible—they feel natural and right. When done poorly, they distract or confuse.
This skill teaches you to think about interactions systematically: understanding animation principles, designing intentional microinteractions, providing clear feedback, and ensuring performance and accessibility.
Core Methodology: Microinteractions
A microinteraction is a small, contained interaction that accomplishes a specific task. Examples: button hover state, form validation feedback, loading spinner, success notification, menu open/close.
The Anatomy of a Microinteraction
Every microinteraction has four parts:
More from sanky369/vibe-building-skills
social-graphics
Generate platform-optimized social media graphics and posts. Use when creating content for Instagram, Twitter, LinkedIn, TikTok, or other social platforms.
358direct-response-copy
Write persuasive sales copy that converts using proven direct response principles. Use when writing landing pages, sales emails, ads, or any copy designed to drive action.
251tweet-writer
Write viral, persuasive, engaging tweets and threads. Uses web research to find viral examples in your niche, then models writing based on proven formulas and X algorithm optimization. Use when creating tweets, threads, or X content strategy.
205remotion-script-writer
Writes detailed video scripts for Remotion based on input requirements and codebase analysis
126product-video
Create animated product videos with reveals and animations. Use when creating product demos, promotional videos, or dynamic visual content.
110typography-system
Master typography design with font selection, type scales, hierarchy, readability, and accessibility. Create consistent, beautiful typography that works across all devices and contexts. Includes modular scales, fluid typography, variable fonts, and accessibility best practices.
104