mcpField
F
forms-inputs

forms-inputs

github.com/dylantarreDesign & UI132513 installsUpdated 43w ago
Repository

About forms-inputs

A form-animation skill for UI designers and frontend developers that applies animation principles to input states and feedback. It covers floating labels, validation cues, transition timing, and CSS properties.

Key features

  1. 01Define multiple input states
  2. 02Animate floating labels and focus feedback
  3. 03Design validation and error motion
  4. 04Reference CSS properties and timings

Use cases

  1. 01Signal focus and input states visually
  2. 02Animate form validation and error feedback
  3. 03Add motion to checkbox toggles and success states

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/dylantarre/animation-principles --skill forms-inputs

After installing, type/forms-inputsin Claude Code to confirm it loaded.

Details

From the project README

Form & Input Animation Principles

Apply Disney's 12 principles to forms for clear feedback and delightful interactions.

Principles Applied to Form Elements

1. Squash & Stretch

Input fields can subtly expand on focus (1-2px height). Submit button compresses on click. Checkboxes bounce on toggle.

2. Anticipation

Label floats up before user types. Focus ring appears before content entry. Prepares user for input action.

3. Staging

Focused input should be visually prominent: border color, shadow, label position. Other fields can slightly dim. Guide attention.

4. Straight Ahead & Pose to Pose

Define input states: default, focus, filled, valid, invalid, disabled. Clear poses for each state with smooth transitions.

5. Follow Through & Overlapping Action

Floating label settles after reaching final position. Validation icon can bounce slightly. Character counter updates with subtle motion.

6. Ease In & Ease Out

Focus transitions: ease-out. Validation feedback: ease-in-out. Label float: cubic-bezier(0.4, 0, 0.2, 1).

7. Arcs

Floating labels should arc slightly during upward movement, not straight line. Adds organic feel to mechanical action.

8. Secondary Action

While border highlights (primary), label floats (secondary), helper text appears (tertiary). Coordinate without overwhelming.

9. Timing
  • Focus border: 100-150ms
  • Label float: 150-200ms
  • Validation feedback: 200ms
  • Error shake: 300ms (3-4 cycles)
  • Success check: 250ms
  • Checkbox toggle: 150ms
10. Exaggeration

Error states can shake (4-6px, 2-3 times). Success states can pulse green briefly. Invalid inputs deserve clear, noticeable feedback.

11. Solid Drawing

Maintain border-radius consistency. Label typography should stay crisp during transform. Icons should scale proportionally.

12. Appeal

Responsive forms feel modern. Micro-animations guide users. Satisfying feedback reduces form abandonment. Worth the investment.

CSS Implementation

.input-field {
  transition: border-color 150ms ease-out,
              box-shadow 150ms ease-out;
}

.floating-label {
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
              font-size 200ms ease-out,
              color 150ms ease-out;
}

.input-field:focus + .floating-label {
  transform: translateY(-24px) scale(0.85);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

Key Properties

  • transform: translateY (label), translateX (shake)
  • border-color: state indication
  • box-shadow: focus rings
  • color: label/text states
  • opacity: helper text, icons

Comments

Markdown supported