---
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 |
|------|-------------|----------|
| [scroll-linked-animations.md](concepts/scroll-linked-animations.md) | Scroll-synced image sequences (scrollytelling) | high |

### Examples
| File | Description | Priority |
|------|-------------|----------|
| [scrollytelling-headphone.md](examples/scrollytelling-headphone.md) | Full Next.js scroll animation example | high |

### Guides
| File | Description | Priority |
|------|-------------|----------|
| [building-scrollytelling-pages.md](guides/building-scrollytelling-pages.md) | Complete implementation guide | high |
| [premium-dark-ui-quick-start.md](guides/premium-dark-ui-quick-start.md) | Premium dark UI design system quick start | 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 |
|------|-------------|----------|
| [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-quick-start.md` (implementation guide)
2. Reference `guides/premium-dark-ui-visual-reference.md` (visual patterns)

---

## 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
- Examples: 1
- Guides: 3
- Lookup: 1
- Errors: 0
- **Total**: 6 files