MVp

SCROLL_SETUP.md

@@ -0,0 +1,113 @@
+# 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