96 lines
2.9 KiB
Markdown
96 lines
2.9 KiB
Markdown
<!-- Context: ui/navigation | Priority: critical | Version: 1.0 | Updated: 2026-02-15 -->
|
|
|
|
---
|
|
description: "Advanced web UI patterns - scroll animations, visual effects, and interactive design"
|
|
---
|
|
|
|
# Web Design Patterns
|
|
|
|
**Purpose**: Advanced web UI patterns - scroll animations, visual effects, and interactive design
|
|
|
|
**Last Updated**: 2026-01-31
|
|
|
|
---
|
|
|
|
## Quick Navigation
|
|
|
|
### Concepts
|
|
| File | Description | Priority |
|
|
|------|-------------|----------|
|
|
| [navigation.md](concepts/navigation.md) | Concepts navigation | high |
|
|
| [scroll-linked-animations.md](concepts/scroll-linked-animations.md) | Scroll-synced image sequences (scrollytelling) | high |
|
|
|
|
### Examples
|
|
| File | Description | Priority |
|
|
|------|-------------|----------|
|
|
| [navigation.md](examples/navigation.md) | Examples navigation | high |
|
|
| [scrollytelling-headphone.md](examples/scrollytelling-headphone.md) | Full Next.js scroll animation example | high |
|
|
|
|
### Guides
|
|
| File | Description | Priority |
|
|
|------|-------------|----------|
|
|
| [navigation.md](guides/navigation.md) | Guides navigation | high |
|
|
| [building-scrollytelling-pages.md](guides/building-scrollytelling-pages.md) | Complete implementation guide | high |
|
|
| [premium-dark-ui-visual-reference.md](guides/premium-dark-ui-visual-reference.md) | Visual reference for premium dark UI | medium |
|
|
|
|
### Lookup
|
|
| File | Description | Priority |
|
|
|------|-------------|----------|
|
|
| [navigation.md](lookup/navigation.md) | Lookup navigation | high |
|
|
| [scroll-animation-prompts.md](lookup/scroll-animation-prompts.md) | AI prompts for generating animation sequences | medium |
|
|
|
|
### Errors
|
|
| File | Description | Priority |
|
|
|------|-------------|----------|
|
|
| _(No error files yet)_ | | |
|
|
|
|
---
|
|
|
|
## Loading Strategy
|
|
|
|
**For scroll animation work**:
|
|
1. Load `concepts/scroll-linked-animations.md` (understand technique)
|
|
2. Load `lookup/scroll-animation-prompts.md` (generate image sequences)
|
|
3. Load `examples/scrollytelling-headphone.md` (see full code)
|
|
4. Reference `guides/building-scrollytelling-pages.md` (step-by-step)
|
|
|
|
**For premium dark UI design**:
|
|
1. Load `guides/premium-dark-ui-visual-reference.md` (visual patterns and implementation)
|
|
|
|
---
|
|
|
|
## Scope
|
|
|
|
This subcategory covers:
|
|
- ✅ Scroll-linked animations (scrollytelling)
|
|
- ✅ Canvas-based rendering
|
|
- ✅ Framer Motion patterns
|
|
- ✅ Image sequence generation
|
|
- ✅ Premium dark UI design system
|
|
- ✅ Glassmorphism patterns
|
|
- ⏳ CSS animations (future)
|
|
- ⏳ SVG animations (future)
|
|
- ⏳ WebGL effects (future)
|
|
|
|
---
|
|
|
|
## Related Categories
|
|
|
|
- `ui/web/` - Core web UI patterns (parent directory)
|
|
- `ui/web/animation-patterns.md` - CSS animations and transitions
|
|
- `development/` - General development patterns
|
|
|
|
---
|
|
|
|
## Used By
|
|
|
|
**Agents**: frontend-specialist, design-specialist, animation-expert
|
|
|
|
## Statistics
|
|
- Concepts: 1 + navigation
|
|
- Examples: 1 + navigation
|
|
- Guides: 6 + navigation
|
|
- Lookup: 1 + navigation
|
|
- Errors: 0
|
|
- **Total**: 13 files
|