132 lines
2.9 KiB
Markdown
132 lines
2.9 KiB
Markdown
# Story 9.11: Animations & Micro-interactions
|
|
|
|
## Epic Reference
|
|
**Epic 9:** Design & Branding Implementation
|
|
|
|
## User Story
|
|
As a **user**,
|
|
I want **subtle, professional animations**,
|
|
So that **the interface feels polished and responsive**.
|
|
|
|
## Acceptance Criteria
|
|
|
|
### Transitions
|
|
- [ ] Button hover: 150ms ease
|
|
- [ ] Card hover: 200ms ease
|
|
- [ ] Modal open/close: 200ms
|
|
- [ ] Page transitions (optional)
|
|
|
|
### Loading States
|
|
- [ ] Skeleton loaders for content
|
|
- [ ] Spinner for actions
|
|
- [ ] Progress indicators
|
|
|
|
### Feedback Animations
|
|
- [ ] Success checkmark
|
|
- [ ] Error shake
|
|
- [ ] Toast slide-in
|
|
|
|
### Hover Effects
|
|
- [ ] Links: Color transition
|
|
- [ ] Cards: Lift effect
|
|
- [ ] Buttons: Background transition
|
|
|
|
### Requirements
|
|
- [ ] All animations subtle, professional
|
|
- [ ] Under 300ms duration
|
|
- [ ] Respect prefers-reduced-motion
|
|
|
|
## Technical Notes
|
|
|
|
```css
|
|
/* Base transitions */
|
|
.transition-default {
|
|
@apply transition-all duration-150 ease-in-out;
|
|
}
|
|
|
|
.transition-slow {
|
|
@apply transition-all duration-200 ease-in-out;
|
|
}
|
|
|
|
/* Button hover */
|
|
.btn {
|
|
@apply transition-colors duration-150;
|
|
}
|
|
|
|
/* Card lift */
|
|
.card-hover {
|
|
@apply transition-all duration-200;
|
|
}
|
|
.card-hover:hover {
|
|
@apply -translate-y-0.5 shadow-md;
|
|
}
|
|
|
|
/* Skeleton loader */
|
|
.skeleton {
|
|
@apply animate-pulse bg-charcoal/10 rounded;
|
|
}
|
|
|
|
/* Toast animation */
|
|
.toast-enter {
|
|
@apply transform translate-x-full opacity-0;
|
|
}
|
|
.toast-enter-active {
|
|
@apply transform translate-x-0 opacity-100 transition-all duration-200;
|
|
}
|
|
|
|
/* Success checkmark */
|
|
@keyframes checkmark {
|
|
0% { stroke-dashoffset: 100; }
|
|
100% { stroke-dashoffset: 0; }
|
|
}
|
|
|
|
.checkmark-animated path {
|
|
stroke-dasharray: 100;
|
|
animation: checkmark 0.3s ease-in-out forwards;
|
|
}
|
|
|
|
/* Error shake */
|
|
@keyframes shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
25% { transform: translateX(-5px); }
|
|
75% { transform: translateX(5px); }
|
|
}
|
|
|
|
.shake {
|
|
animation: shake 0.3s ease-in-out;
|
|
}
|
|
```
|
|
|
|
```blade
|
|
<!-- Skeleton loader component -->
|
|
@props(['lines' => 3])
|
|
|
|
<div class="space-y-3">
|
|
@for($i = 0; $i < $lines; $i++)
|
|
<div class="skeleton h-4 {{ $i === $lines - 1 ? 'w-2/3' : 'w-full' }}"></div>
|
|
@endfor
|
|
</div>
|
|
|
|
<!-- Loading spinner -->
|
|
<div wire:loading class="flex items-center gap-2">
|
|
<svg class="animate-spin h-5 w-5 text-gold" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
|
|
</svg>
|
|
<span>{{ __('common.loading') }}</span>
|
|
</div>
|
|
```
|
|
|
|
## Definition of Done
|
|
- [ ] Button transitions work
|
|
- [ ] Card hover effects work
|
|
- [ ] Skeleton loaders work
|
|
- [ ] Spinners work
|
|
- [ ] Toast animations work
|
|
- [ ] All animations subtle
|
|
- [ ] Reduced motion respected
|
|
- [ ] Tests pass
|
|
|
|
## Estimation
|
|
**Complexity:** Medium | **Effort:** 4 hours
|