Initial commit: 79+ design patterns, LLM prompts, and assets

media/animated-illustration.md

@@ -0,0 +1,43 @@
+---
+name: media/animated-illustration
+title: Animated Illustrations & Icons
+description: Lottie animations, CSS illustrations, motion graphics.
+tags: [media, animation, illustration, lottie, motion]
+source: raycast.com, linear.app, amppz.com, brad.co
+---
+
+# Animated Illustrations
+
+## 1. Lottie Integration
+
+```html
+<div id="animation" data-src="animation.json"></div>
+<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
+<script>
+  document.getElementById('animation').innerHTML = `
+    <lottie-player src="animation.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
+  `;
+</script>
+```
+
+## 2. CSS Animated Illustration
+
+```css
+.illustration {
+  width: 200px;
+  height: 200px;
+  background: conic-gradient(from 0deg, #6366f1, #ec4899, #6366f1);
+  border-radius: 50%;
+  animation: spin 4s linear infinite;
+}
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+```
+
+## Anti-patterns
+
+| ❌ Плохо | ✅ Хорошо |
+|----------|-----------|
+| Без fallback | SVG fallback |
+| Без `prefers-reduced-motion` | Уважать настройки |