From dylantarre-animation-principles
Use when animating form fields, inputs, textareas, selects, or interactive form elements to improve usability and feedback
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Apply Disney's 12 principles to forms for clear feedback and delightful interactions.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Apply Disney's 12 principles to forms for clear feedback and delightful interactions.
Input fields can subtly expand on focus (1-2px height). Submit button compresses on click. Checkboxes bounce on toggle.
Label floats up before user types. Focus ring appears before content entry. Prepares user for input action.
Focused input should be visually prominent: border color, shadow, label position. Other fields can slightly dim. Guide attention.
Define input states: default, focus, filled, valid, invalid, disabled. Clear poses for each state with smooth transitions.
Floating label settles after reaching final position. Validation icon can bounce slightly. Character counter updates with subtle motion.
Focus transitions: ease-out. Validation feedback: ease-in-out. Label float: cubic-bezier(0.4, 0, 0.2, 1).
Floating labels should arc slightly during upward movement, not straight line. Adds organic feel to mechanical action.
While border highlights (primary), label floats (secondary), helper text appears (tertiary). Coordinate without overwhelming.
Error states can shake (4-6px, 2-3 times). Success states can pulse green briefly. Invalid inputs deserve clear, noticeable feedback.
Maintain border-radius consistency. Label typography should stay crisp during transform. Icons should scale proportionally.
Responsive forms feel modern. Micro-animations guide users. Satisfying feedback reduces form abandonment. Worth the investment.
.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); }
}
transform: translateY (label), translateX (shake)border-color: state indicationbox-shadow: focus ringscolor: label/text statesopacity: helper text, icons