design-systems: add 74 brand DESIGN.md files (VoltAgent/awesome-design-md)
- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc. - 147 files: DESIGN.md + README.md per brand (~2.1 MB) - Each DESIGN.md contains structured brand analysis (colors, typography, components) - Updated 00-overview.md with new design-systems directory
This commit is contained in:
1 parent
e3738f2b3e
commit
76c4c5b4fe
233 files changed
+54886
-1
No files matched your search
@@ -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` | Уважать настройки |
|
||||
Reference in new issue
Block a user