Prax
Premium brand experience website
The Challenge
The studio needed a digital presence that matched the premium, artistic nature of their hair work. Standard templates couldn't capture the precision and craftsmanship that defines their brand. They wanted an immersive experience that would leave visitors with a lasting impression.
The Solution
I designed and built a highly animated website using GSAP for scroll-driven animations, Three.js for 3D elements, and Lenis for buttery smooth scrolling. The custom cursor system responds contextually to different content types, and carefully orchestrated animations guide users through the brand story.
Key Features
Scroll-Driven Animations
GSAP ScrollTrigger powers parallax effects, horizontal scroll galleries with section pinning, and staggered reveals.
Custom Cursor System
Context-aware cursor with multiple variants (hover, text, view, drag) using mix-blend-difference for layered visibility.
3D Elements
Three.js integration via React Three Fiber for immersive brand storytelling and visual depth.
Smooth Scrolling
Lenis smooth scroll synchronized with GSAP ticker for frame-perfect scroll-driven animations.
The Outcome
The site delivers a memorable, immersive experience that has become a key differentiator for the brand. Comprehensive animation tokens ensure consistent motion design, while prefers-reduced-motion support maintains accessibility. The fluid typography system provides responsive text at all breakpoints.
Engineering Highlights
- Built comprehensive animation system with organized tokens for easing, duration, and orchestration
- Implemented prefers-reduced-motion checks for all animations
- Designed fluid typography scale using CSS clamp() for responsive text at all breakpoints
- Created Zustand stores for cursor state, preloader progress, and navigation state