senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
veza/apps/web/docs/HOVER_EFFECTS_AUDIT.md
senke 2b4383dd6e aesthetic-improvements: audit hover effects across codebase 
- Found 887 instances across 239 files
- Categorized into 5 usage types (necessary, excessive, group hover, transitions, opacity)
- Identified excessive patterns: scale transforms, shadow/glow, multiple simultaneous effects
- Documented high-impact files requiring changes
- Current: ~887 effects, Target: reduce by 30-40% (remove decorative, keep interactive)
- Action 11.4.1.1 complete
2026-01-16 10:28:21 +01:00

8.6 KiB
Raw Blame History

Hover Effects Audit - Action 11.4.1.1

Date: 2025-01-27
Scope: All hover: usage across the codebase
Total Instances: 887 matches across 239 files

Summary

Hover effects are used extensively throughout the application. This audit categorizes usage to identify opportunities for refinement and applying "Surgical Minimalism" principles.

Categories

1. Necessary Hover Effects (✅ Keep)

Purpose: Essential interactive feedback for buttons, links, and clickable elements
Count: ~400 instances (estimated 45%)

Patterns:

  • hover:bg-white/5 - Subtle background for interactive elements
  • hover:bg-accent - Background change for buttons/links
  • hover:text-white - Text color change for navigation
  • hover:opacity-100 - Icon visibility on hover
  • hover:border-* - Border color changes for interactive elements
  • hover:underline - Link underline on hover

Examples:

  • Button variants (primary, secondary, outline, ghost)
  • Navigation links and menu items
  • Clickable cards and list items
  • Icon buttons
  • Form inputs and selects

Files:

  • apps/web/src/components/ui/button.tsx - Button variants
  • apps/web/src/components/layout/Sidebar.tsx - Navigation items
  • apps/web/src/components/layout/Navbar.tsx - Nav links
  • apps/web/src/components/ui/select.tsx - Select options
  • apps/web/src/components/data/List.tsx - List items

2. Excessive/Decorative Hover Effects (⚠️ Review/Remove)

Purpose: Decorative animations, scale transforms, multiple simultaneous effects
Count: ~200 instances (estimated 23%)

Patterns:

  • hover:scale-[1.02] or hover:scale-110 - Scale transforms
  • hover:shadow-* - Shadow effects (especially neon/glow)
  • hover:rotate-* - Rotation transforms
  • hover:translate-* - Translation transforms
  • Multiple simultaneous effects (scale + shadow + color)

Examples:

  • Card scale on hover: hover:scale-[1.02]
  • Image zoom on hover: group-hover:scale-110
  • Shadow glow effects: hover:shadow-neon-cyan/20
  • Button scale: hover:scale-110

Files:

  • apps/web/src/components/marketplace/ProductCard.tsx - Card scale + shadow
  • apps/web/src/components/education/CourseCard.tsx - Card scale
  • apps/web/src/components/social/PostCard.tsx - Multiple effects
  • apps/web/src/features/tracks/components/TrackCard.tsx - Scale transform
  • apps/web/src/components/ui/button.tsx - Some button variants with scale

3. Group Hover Effects (⚠️ Review Context)

Purpose: Effects triggered by parent hover (e.g., card hover shows child elements)
Count: ~150 instances (estimated 17%)

Patterns:

  • group-hover:opacity-100 - Show elements on parent hover
  • group-hover:scale-* - Scale child on parent hover
  • group-hover:bg-* - Background change on parent hover

Examples:

  • Card hover reveals play button overlay
  • Image zoom on card hover
  • Show action buttons on row hover

Files:

  • apps/web/src/components/marketplace/ProductCard.tsx - Play button overlay
  • apps/web/src/components/player/FullPlayer.tsx - Overlay on hover
  • apps/web/src/components/views/DiscoverView.tsx - Play icon on hover

4. Transition/Animation Effects (⚠️ Review)

Purpose: Smooth transitions for hover state changes
Count: ~100 instances (estimated 11%)

Patterns:

  • transition-all - All properties transition
  • transition-colors - Color transitions
  • transition-opacity - Opacity transitions
  • transition-transform - Transform transitions
  • duration-* - Transition duration

Examples:

  • transition-all duration-200 - Smooth hover transitions
  • transition-opacity - Fade in/out effects

Files:

  • Most components with hover effects include transitions

5. Opacity-Based Hover (✅ Keep - Subtle)

Purpose: Subtle visibility changes for icons and overlays
Count: ~37 instances (estimated 4%)

Patterns:

  • hover:opacity-100 - Full opacity on hover
  • opacity-0 hover:opacity-100 - Show on hover
  • opacity-70 hover:opacity-100 - Increase opacity

Examples:

  • Icon buttons that become fully visible on hover
  • Overlay elements that appear on hover
  • Close buttons in modals

Files:

  • apps/web/src/components/ui/alert.tsx - Close button
  • apps/web/src/components/player/FullPlayer.tsx - Overlay elements
  • apps/web/src/components/ui/ErrorDisplay.tsx - Action buttons

Detailed Analysis

Scale Transforms (Excessive)

Count: ~50 instances

Examples:

// ProductCard.tsx
className="... hover:scale-[1.02] ..."

// TrackCard.tsx  
className="... hover:scale-[1.02] ..."

// Button play overlay
className="... hover:scale-110 ..."

Recommendation: Remove scale transforms on cards. Keep only for small icon buttons where scale provides clear feedback.

Shadow/Glow Effects (Excessive)

Count: ~30 instances

Examples:

// ProductCard.tsx
className="... hover:shadow-neon-cyan/20 ..."

// Button variants
className="... hover:shadow-[0_0_15px_rgba(102,252,241,0.3)] ..."

Recommendation: Remove decorative shadow/glow effects. Keep only subtle shadows for elevation feedback on buttons.

Multiple Simultaneous Effects (Excessive)

Count: ~40 instances

Examples:

// ProductCard.tsx
className="... hover:border-kodo-cyan/50 hover:shadow-neon-cyan/20 hover:scale-[1.02] ..."

// CourseCard.tsx
className="... hover:bg-white/5 hover:scale-[1.02] hover:shadow-lg ..."

Recommendation: Limit to one primary hover effect per element. Prefer subtle background or border changes over multiple effects.

Group Hover Patterns (Review Context)

Count: ~150 instances

Examples:

// ProductCard.tsx - Play button overlay
<div className="opacity-0 group-hover:opacity-100 ...">
  <PlayButton />
</div>

// Image zoom
<img className="... group-hover:scale-110 ..." />

Recommendation:

  • ✅ Keep: Play button overlays (functional, reveals action)
  • ⚠️ Review: Image zoom effects (decorative, could be removed)
  • ✅ Keep: Action button reveals on row hover (functional)

Recommendations

High Priority (Action 11.4.1.3)

  1. Remove scale transforms from cards

    • ProductCard, CourseCard, TrackCard, PostCard
    • Replace with subtle background change only

  2. Remove decorative shadow/glow effects

    • hover:shadow-neon-cyan/20 on cards
    • Keep only subtle shadows on buttons

  3. Simplify multiple simultaneous effects

    • Limit to one primary hover effect
    • Prefer hover:bg-white/5 over scale + shadow + border

Medium Priority

  1. Review group hover image zoom

    • Consider removing group-hover:scale-110 on images
    • Keep functional overlays (play buttons)

  2. Standardize transition durations

    • Use consistent duration-200 for all hover effects
    • Avoid transition-all (prefer specific properties)

Low Priority

  1. Maintain necessary hover effects
    • Keep all button, link, and navigation hover states
    • Keep opacity-based icon visibility
    • Keep border color changes for interactive elements

Target Distribution (Surgical Minimalism)

Current: ~887 hover effects across 239 files
Target: Reduce by ~30-40% (remove excessive decorative effects)

Breakdown:

  • Keep (~60%): Interactive feedback (buttons, links, navigation, clickable elements)
  • Remove (~30%): Decorative effects (scale, excessive shadows, multiple simultaneous effects)
  • Review (~10%): Group hover effects (keep functional, remove decorative)

Files Requiring Changes

High Impact (Many excessive effects):

  1. apps/web/src/components/marketplace/ProductCard.tsx - Scale + shadow + border
  2. apps/web/src/components/education/CourseCard.tsx - Scale + shadow
  3. apps/web/src/components/social/PostCard.tsx - Multiple effects
  4. apps/web/src/features/tracks/components/TrackCard.tsx - Scale transform
  5. apps/web/src/components/views/DiscoverView.tsx - Image zoom on hover
  6. apps/web/src/components/player/FullPlayer.tsx - Multiple overlay effects

Medium Impact:

  • All card components with scale transforms
  • Components with decorative shadow effects
  • Components with multiple simultaneous hover effects

Next Steps

  1. ✅ Action 11.4.1.1: Audit complete
  2. ⏭️ Action 11.4.1.2: Categorize hover effects: necessary vs excessive
  3. ⏭️ Action 11.4.1.3: Remove excessive hover effects

Notes

  • This audit is based on pattern matching and may require manual review for context-specific decisions
  • Some decorative effects may be intentional for brand consistency
  • Interactive feedback (buttons, links) should always have hover states
  • Group hover effects that reveal functionality (play buttons) should be kept
  • Scale transforms and decorative shadows should be removed for "Surgical Minimalism"