113 lines
3.2 KiB
Markdown
113 lines
3.2 KiB
Markdown
# 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 |