generated sotries

2025-12-20 21:04:23 +02:00
parent d889b24f12
commit 8f95089814
65 changed files with 9501 additions and 0 deletions
@@ -0,0 +1,131 @@
+# 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