neo
76c4c5b4fe
- 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
1.1 KiB
1.1 KiB
name, title, description, tags, source
| name | title | description | tags | source | |||||
|---|---|---|---|---|---|---|---|---|---|
| media/animated-illustration | Animated Illustrations & Icons | Lottie animations, CSS illustrations, motion graphics. |
|
raycast.com, linear.app, amppz.com, brad.co |
Animated Illustrations
1. Lottie Integration
<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
.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 |
Уважать настройки |