jeka
/
utun2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
234 Commits
4 Branches
0 Tags
60 MiB
 
 
 
 
 
 
Tree: d10bddd1f7
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'd10bddd1f7'
${ noResults }
utun2/.opencode/context/ui/web/design/navigation.md

2.6 KiB
Raw Blame History

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