Feedback Indicators
This handles all the confirmation animations users expect after they do something: success checkmarks, error shakes, form validation feedback, save confirmations. It applies Disney animation principles to make feedback feel responsive and polished. You get timing recommendations for different scenarios (inline validation at 150ms, error toasts at 6 seconds), ready to use CSS for checkmark draws and error shakes, and auto-dismiss patterns. The timing tables are solid reference material. One thing to note: it leans heavily on animation, so you'll want to implement the prefers-reduced-motion fallbacks it mentions or risk annoying users who've disabled animations system-wide.
- skills.sh installs
- 539
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill feedback-indicators --agent claude-codeInstalls into .claude/skills of the current project.
Files
Feedback Indicator Animations
Apply Disney's 12 principles to action confirmation animations.
Principle Application
Squash & Stretch: Success checkmarks can scale with overshoot. Compress on draw, expand on complete.
Anticipation: Brief gather before feedback appears. 50ms of preparation before the confirmation.
Staging: Feedback appears at the action location. Button shows checkmark, field shows validation.
Straight Ahead vs Pose-to-Pose: Define feedback states: neutral → processing → success/error.
Follow Through & Overlapping: Icon animates, then label appears. Stagger confirmation elements.
Slow In/Slow Out: Success: ease-out (confident arrival). Error: ease-in-out (shake settles).
Arcs: Checkmarks draw in arcs, not straight lines. Error X's cross naturally.
Secondary Action: Checkmark draws + color shifts + scale bounces for rich feedback.
Timing:
- Instant feedback: 100-200ms (form validation)
- Success confirmation: 300-500ms (checkmark draw)
- Error indication: 400ms (shake + message)
- Auto-dismiss: 2000-4000ms after appearance
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/dylantarre/animation-principles
- Categories
- Debugging, Design & UI/UX
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Universal Patterns539
- Continuous Infinite535
- Emotional Disconnect534
- Problem Diagnosis534
- Responsive Adaptive534
- State Changes534
- Popmotion533
- Professionalism Credibility533
- Comfort Safety532
- Implementation Debugging532
- Technical Constraints532
- Friendliness Approachability531
- Motion Sickness531
- Large 500 800ms530
- Medium 300 500ms530
- Universal Industry530
- Trust Reliability529
- Deliberate 1200 2000ms528
- Product Manager528
- Small 200 300ms528
- Universal Elements528
- Universal Practitioner527
- Universal Solutions527
- Universal Tool527
Recommended
More Debugging
project-structurewshaddix/dotnet-skillsGuidelines for organizing .NET projects, including solution structure, project references, folder conventions, .slnx format, centralized build properties, and c539skills.sh installs
amazon-teneoteneoprotocolai/teneo-skillsThe Amazon Agent is a high-performance tool designed to turn massive e-commerce datasets into structured, usable intelligence. Use this skill when the user need538skills.sh installs
agent-tool-builderdavila7/claude-code-templatesTools are how AI agents interact with the world. A well-designed tool is the difference between an agent that works and one that hallucinates, fails silently, o537skills.sh installs
setup-timescaledb-hypertablestimescale/pg-aiguideUse this skill when creating database schemas or tables for Timescale, TimescaleDB, TigerData, or Tiger Cloud, especially for time-series, IoT, metrics, events,537skills.sh installs
grpc-service-developmentaj-geddes/useful-ai-promptsBuild high-performance gRPC services with Protocol Buffers, bidirectional streaming, and microservice communication. Use when building gRPC servers, defining se532skills.sh installs
wasm-wasmtimemohitmishra786/low-level-dev-skillsWebAssembly runtime skill using wasmtime. Use when running WASM modules with wasmtime CLI, working with WASI preview2, using the component model, embedding wasm532skills.sh installs