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>
167 lines
3.0 KiB
Plaintext
167 lines
3.0 KiB
Plaintext
---
|
|
description:
|
|
alwaysApply: true
|
|
---
|
|
|
|
# Visual Design System Principles
|
|
|
|
## Typography Philosophy
|
|
|
|
### Bold, Statement Typography
|
|
|
|
Large, confident typography that dominates visual hierarchy. Text is a design element, not just content.
|
|
|
|
**Scale Guidelines**:
|
|
- Hero Text: 6-9rem (96-144px)
|
|
- Page Titles: 3-4rem (48-64px)
|
|
- Section Headers: 2-3rem (32-48px)
|
|
- Body Text: 1-1.125rem (16-18px)
|
|
- Small Text: 0.875rem (14px)
|
|
|
|
```css
|
|
.hero-text {
|
|
font-size: clamp(4rem, 10vw, 9rem);
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
}
|
|
```
|
|
|
|
## Gradient-Based Visual Hierarchy
|
|
|
|
Use gradients strategically to create visual interest without clutter.
|
|
|
|
```css
|
|
/* Text gradient */
|
|
.gradient-heading {
|
|
background: linear-gradient(to right, #ffffff, #9ca3af);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
```
|
|
|
|
## Glass Morphism
|
|
|
|
Create depth through semi-transparent layers with backdrop blur.
|
|
|
|
```css
|
|
.glass-card {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
```
|
|
|
|
### Usage Guidelines
|
|
|
|
- ✅ Cards and containers over complex backgrounds
|
|
- ✅ Navigation bars with fixed positioning
|
|
- ✅ Modal overlays and dialogs
|
|
- ❌ Body text containers (readability issues)
|
|
- ❌ Form inputs (confusing UX)
|
|
|
|
## Color System Architecture
|
|
|
|
**Semantic Color Tokens** - Define colors by purpose, not appearance:
|
|
|
|
```javascript
|
|
const colors = {
|
|
brand: {
|
|
primary: '#F7931A',
|
|
secondary: '#8E44AD',
|
|
},
|
|
neutral: {
|
|
50: '#FAFAFA',
|
|
900: '#171717',
|
|
},
|
|
semantic: {
|
|
success: '#22C55E',
|
|
error: '#EF4444',
|
|
},
|
|
};
|
|
```
|
|
|
|
## Shadow & Glow Systems
|
|
|
|
Use shadows sparingly for depth perception:
|
|
|
|
```css
|
|
.shadow-card {
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
|
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.glow-on-hover:hover {
|
|
box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
|
|
}
|
|
```
|
|
|
|
## Spacing System
|
|
|
|
**8px Base Grid** - All spacing follows 8px increments:
|
|
|
|
```javascript
|
|
const spacing = {
|
|
1: '0.25rem', // 4px
|
|
2: '0.5rem', // 8px
|
|
4: '1rem', // 16px
|
|
8: '2rem', // 32px
|
|
16: '4rem', // 64px
|
|
32: '8rem', // 128px
|
|
};
|
|
```
|
|
|
|
## Border Radius System
|
|
|
|
```css
|
|
rounded-lg /* 8px - buttons */
|
|
rounded-2xl /* 16px - cards */
|
|
rounded-3xl /* 24px - modals */
|
|
rounded-full /* 9999px - circles/pills */
|
|
```
|
|
|
|
## Responsive Breakpoints
|
|
|
|
Mobile-first progressive enhancement:
|
|
|
|
```javascript
|
|
const breakpoints = {
|
|
sm: '640px', // Mobile landscape
|
|
md: '768px', // Tablets
|
|
lg: '1024px', // Laptop
|
|
xl: '1280px', // Desktop
|
|
};
|
|
```
|
|
|
|
## Dark Mode
|
|
|
|
Design with both modes from the start:
|
|
|
|
```css
|
|
:root {
|
|
--bg-primary: #ffffff;
|
|
--text-primary: #171717;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--bg-primary: #171717;
|
|
--text-primary: #fafafa;
|
|
}
|
|
```
|
|
|
|
## Hover State Patterns
|
|
|
|
All interactive elements provide immediate feedback:
|
|
|
|
```css
|
|
.interactive {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.interactive:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
|
|
}
|
|
```
|