Overview

The Custom Cap BD website features a modern, interactive navigation system that responds to user scrolling. When you scroll down the page, the navbar elegantly shrinks to provide more screen space for content while maintaining easy access to navigation.

Features

Responsive Resize Animation

• Full Width on Load: Navbar starts at 100% width when you land on the page
• Smart Shrinking: Automatically reduces to 40% width after scrolling 100 pixels
• Smooth Transitions: Spring-based physics create natural, fluid animations

Visual Effects

• Backdrop Blur: Subtle blur effect applied when navbar is resized
• Depth Shadows: Professional shadow effects enhance the floating appearance
• Theme Aware: Works seamlessly with both light and dark themes

Preserved Functionality

All existing header features remain fully functional:

• User authentication and profile display
• Navigation menu with dropdown submenus
• Mobile-responsive hamburger menu
• Theme toggle
• Quick quote access
• Dashboard routing

How It Works

Scroll Detection

The navbar uses advanced scroll detection to monitor your position on the page:

1. Initial State: Page loads with navbar at full width
2. Scroll Threshold: When you scroll past 100px, animation triggers
3. Resize Animation: Navbar smoothly transitions to 40% width over ~500ms
4. Return to Top: Scrolling back up reverses the animation

Animation Technology

Built on Motion (Framer Motion v12), the navbar uses:

• Spring Physics: Natural acceleration and deceleration
• GPU Acceleration: Smooth 60fps animations
• Optimized Performance: Minimal impact on page performance

Technical Specifications

Animation Configuration

{
  type: "spring",
  stiffness: 200,  // Controls animation speed
  damping: 50,     // Controls bounce effect
}

Animated Properties

• Width: 100% → 40%
• Backdrop Filter: none → blur(10px)
• Box Shadow: none → complex shadow stack
• Y Position: 0 → 20px (vertical offset)

Browser Support

Fully Supported

• ✅ Chrome 90+
• ✅ Firefox 88+
• ✅ Safari 14+
• ✅ Edge 90+

Graceful Degradation

On older browsers:

• ✅ Navbar remains functional
• ⚠️ Blur effect may not appear
• ✅ Resize animation still works

Responsive Behavior

Desktop (>1024px)

Full resize behavior with all visual effects

Tablet (768px-1024px)

Maintains resize behavior, optimized spacing

Mobile (<768px)

Switches to hamburger menu, resize disabled for better UX

Customization Options

While the navbar is pre-configured for optimal user experience, developers can modify:

Scroll Threshold

Change when the resize triggers (default: 100px)

Animation Speed

Adjust spring stiffness (default: 200)

Resize Width

Modify target width percentage (default: 40%)

Visual Effects

Toggle blur, shadows, or positioning effects

Special Cases

Artwork Page

On /artwork/* pages, the navbar:

• Disables sticky positioning
• Remains at full width
• Provides unobstructed canvas access

Admin Dashboard

Maintains standard behavior across all dashboard routes

Performance

Optimization Features

• Debounced Scroll Events: Prevents excessive calculations
• GPU Acceleration: Uses CSS transforms for smoothness
• Minimal Re-renders: Only updates on threshold crossing
• Lightweight Library: Motion is tree-shakeable and optimized

Impact Metrics

• File Size: ~15KB gzipped (Motion library included)
• Animation Cost: <1ms per frame
• Memory Usage: Negligible impact

Accessibility

Keyboard Navigation

• ✅ All links remain keyboard accessible
• ✅ Focus states visible during animations
• ✅ Tab order preserved

Screen Readers

• ✅ No impact on content announcement
• ✅ Navigation structure remains semantic
• ✅ ARIA labels maintained

Motion Preferences

Respects prefers-reduced-motion for users who need it

Developer Notes

Component Structure

<Navbar>
  <NavBody>
    {/* Your header content */}
  </NavBody>
</Navbar>

Integration

The system is automatically integrated into the global header. No additional setup required for new pages.

Debugging

Use browser DevTools to inspect:

• Scroll position: Check scrollY value
• Animation state: Monitor visible boolean
• Motion values: Use Motion DevTools extension

Future Enhancements

Planned Features

• Configurable scroll thresholds via settings
• Multiple resize modes (left, center, right align)
• Hide-on-scroll option for immersive experiences
• Custom animation presets

Community Requests

Have ideas for navbar improvements? Submit feedback through our contact form!

Related Documentation

• Global Header System
• Motion Animations
• Responsive Design
• Theme System