Forms Inputs

Applies Disney's 12 animation principles to form elements with specific timing guidance and state transitions. You get concrete values like 150ms for focus borders, 200ms for floating labels, and shake animations at 300ms. The approach treats each input state (default, focus, filled, valid, invalid) as distinct poses with smooth easing between them. What stands out is the secondary action coordination, like timing label floats against border highlights without creating visual chaos. The CSS examples are minimal but show the cubic-bezier curves and transforms you actually need. This is most useful if you're building custom form components and want deliberate motion design rather than guessing at durations or just slapping transitions everywhere.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill forms-inputs --agent claude-code