aknuth
/
michaelpeskov
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
michaelpeskov/SCROLL_SETUP.md

3.2 KiB
Raw Permalink Blame History

Immersive Scroll Experience Setup

Installation

First, install the required dependencies for the scroll experience:

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

npm run dev

Then visit:

Production Checklist

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