0bb1bcc5f9
Built a complete Netflix-style streaming interface for IndeeHub's decentralized media platform with real film content. Features: - Vue 3 + TypeScript + Vite setup with hot module reloading - Netflix-inspired UI with hero section and horizontal scrolling content rows - Glass morphism design system with custom Tailwind configuration - 20+ real IndeeHub films organized into 6 categories (Bitcoin, Documentaries, Drama, etc.) - Full-featured video player component with custom controls - Mobile-responsive design with bottom navigation - Nostr integration ready (nostr-tools, relay pool, NIP-71 support) - Pinia state management for content - MCP tools configured (Filesystem, Memory, Nostr, Puppeteer) Components: - Browse.vue: Main streaming interface with hero and content rows - ContentRow.vue: Horizontal scrolling film cards with navigation arrows - VideoPlayer.vue: Custom video player with play/pause, seek, volume, fullscreen - MobileNav.vue: Bottom tab navigation for mobile devices Tech Stack: - Frontend: Vue 3 (Composition API), TypeScript - Build: Vite 7 - Styling: Tailwind CSS with custom theme - State: Pinia 3 - Router: Vue Router 4.6 - Protocol: Nostr (nostr-tools 2.22) Design: - 4px grid spacing system - Glass morphism UI components - Netflix-style hero section with featured content - Smooth animations and hover effects - Mobile-first responsive breakpoints - Dark theme with custom color palette Content: - 20+ IndeeHub films with titles, descriptions, categories - Bitcoin documentaries: God Bless Bitcoin, Dirty Coin, Searching for Satoshi - Independent films and documentaries - Working Unsplash CDN images for thumbnails and backdrops Ready for deployment to Umbrel, Start9, and Archy nodes. Co-authored-by: Cursor <cursoragent@cursor.com>
70 lines
1.9 KiB
Plaintext
70 lines
1.9 KiB
Plaintext
---
|
|
description: Animation timing, easing, stagger patterns, and motion design principles
|
|
alwaysApply: false
|
|
globs: **/*.{ts,tsx,js,jsx,vue,css,scss}
|
|
---
|
|
|
|
# Animation Principles & Motion Design
|
|
|
|
## Core Philosophy
|
|
|
|
Every animation should serve one of these purposes:
|
|
- **Guide Attention**: Direct user focus to important elements
|
|
- **Provide Feedback**: Confirm actions and state changes
|
|
- **Show Relationships**: Reveal spatial and hierarchical connections
|
|
- **Enhance Perception**: Make loading and transitions feel faster
|
|
- **Add Delight**: Create memorable micro-interactions
|
|
|
|
## Duration Guidelines
|
|
|
|
```javascript
|
|
const durations = {
|
|
instant: 100, // Micro-feedback (hover states)
|
|
fast: 200, // Small elements (tooltips, dropdowns)
|
|
moderate: 300, // Standard UI transitions (modals, cards)
|
|
normal: 500, // Page sections, complex components
|
|
slow: 600, // Hero animations, page transitions
|
|
};
|
|
```
|
|
|
|
## Easing Functions
|
|
|
|
- **ease-out**: 90% of entrance animations (fade in, slide in)
|
|
- **ease-in**: Exit animations (fade out, slide out)
|
|
- **ease-in-out**: Position changes, transforms
|
|
- **spring**: Playful interactions, emphasis
|
|
- **linear**: Progress bars, loading spinners
|
|
|
|
## Staggered Animation Pattern
|
|
|
|
```javascript
|
|
// Delay calculation
|
|
const staggerDelay = (index, baseDelay = 100) => index * baseDelay;
|
|
```
|
|
|
|
Guidelines:
|
|
- Delay increment: 50-150ms between items
|
|
- Max items: Limit to 6-8 visible items
|
|
- Direction: Top-to-bottom or left-to-right
|
|
|
|
## Reduced Motion Accessibility
|
|
|
|
Always respect `prefers-reduced-motion` settings:
|
|
|
|
```css
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
```
|
|
|
|
## Performance
|
|
|
|
- ✅ Animate `transform` and `opacity` only
|
|
- ✅ Use `will-change` sparingly
|
|
- ✅ Limit simultaneous animations
|
|
- ❌ Don't animate `width`, `height`, `top`, `left`
|