OpenAgentsControl/.opencode/context/ui/web/design/navigation.md

---

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	Scroll-synced image sequences (scrollytelling)	high

Examples

File	Description	Priority
scrollytelling-headphone.md	Full Next.js scroll animation example	high

Guides

File	Description	Priority
building-scrollytelling-pages.md	Complete implementation guide	high
premium-dark-ui-quick-start.md	Premium dark UI design system quick start	high
premium-dark-ui-visual-reference.md	Visual reference for premium dark UI	medium

Lookup

File	Description	Priority
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