# Immersive Scroll Experience Setup

## Installation

First, install the required dependencies for the scroll experience:

```bash
npm install @studio-freight/lenis gsap @types/gsap
```

## Features Implemented

### 🎭 Dogstudio-Inspired Scroll Experience
- **Smooth Scroll**: Lenis integration with custom easing
- **Pinned Storytelling**: Problem → Promise → Solution narrative
- **Split Text Animations**: Character-by-character reveals
- **Parallax Layers**: Multi-depth background elements
- **Magnetic Buttons**: Cursor-following interactive elements
- **Video Showcase**: Scroll-triggered media with play overlay
- **Count-up Stats**: Animated numbers on scroll
- **Feature Cards**: 3D perspective reveals with clip-mask animations

### 🎨 Visual Effects
- **Noise Texture**: Subtle grain overlay for premium feel
- **Gradient Backgrounds**: Dynamic color transitions
- **Glass Morphism**: Backdrop blur effects on cards
- **Hover Animations**: Tilt and scale effects
- **Scroll Hints**: Animated scroll indicators

### ♿ Accessibility
- **Reduced Motion**: Respects `prefers-reduced-motion`
- **Keyboard Navigation**: Full keyboard support
- **Focus Management**: Visible focus states
- **Screen Reader**: Proper ARIA labels and live regions

### 📱 Performance
- **Optimized Animations**: RequestAnimationFrame-based
- **Lazy Loading**: Images load on demand
- **Code Splitting**: Dynamic imports for heavy components
- **Smooth 60fps**: Optimized for mobile devices

## Usage

1. **Install dependencies** (see above)
2. **Visit the experience**: Navigate to `/scroll` in your browser
3. **Enjoy the journey**: Scroll through the immersive experience

## Routes

- `/` - Original premium homepage
- `/scroll` - New immersive scroll experience

## Components

### Core Animation Components
- `ScrollProvider` - Lenis smooth scroll integration
- `ParallaxLayer` - Multi-depth parallax effects
- `PinnedStory` - Scroll-triggered narrative sections
- `MagneticButton` - Cursor-following interactive buttons

### Content Components
- `ScrollHero` - Animated hero with split text
- `FeatureCards` - 3D perspective card reveals
- `VideoShowcase` - Scroll-triggered video player
- `SocialProof` - Animated stats and logos

### Animation Utilities
- `animateSplit()` - Character-by-character text reveals
- `animateWords()` - Word-by-word text animations

## Customization

### Colors
The experience uses a dark theme with accent colors:
- Background: `#0f1220` (slate-900)
- Text: `#ffffff` (white)
- Accent: `#7c5cff` (purple) to `#7cf4e2` (cyan)

### Animation Timing
- Split text stagger: `0.015s`
- Card reveals: `0.8s` duration
- Parallax speed: `0.5x` to `1.5x`
- Magnetic strength: `0.3` to `0.4`

### Performance Settings
- Mobile pixel ratio: Capped at `1.25`
- Animation budget: `<8ms` per frame
- Bundle size: `<220KB` gzipped

## Browser Support

- Chrome 90+
- Safari 14+
- Firefox 88+
- Edge 90+

## Development

```bash
npm run dev
```

Then visit:
- http://localhost:3000 - Original homepage
- http://localhost:3000/scroll - Immersive experience

## Production Checklist

- [ ] Lighthouse score >90 on mobile
- [ ] Core Web Vitals passing
- [ ] Reduced motion tested
- [ ] Cross-browser compatibility
- [ ] Touch device optimization