Kraften came to us with a design system that demanded precision every spacing, every curve, every interaction mapped out exactly how it should feel. Our job was to translate that into a performant, responsive site that matched the prototype pixel-for-pixel, while keeping the codebase clean and maintainable.
GSAP-driven text swapping that cycles through "Strategy", "Growth", and "Capital" on a loop, paired with parallax background effects using Framer Motion. The parallax only activates after the entrance animations finish, so the first load stays clean and focused.
A brand story told through a custom Lottie animation synced to scroll the animation progresses frame-by-frame as you move down the page, paired with text blocks that slide in at precise moments. We used lottie-web for the animation and GSAP ScrollTrigger for the scroll syncing, with a max scroll speed control to keep the experience deliberate and premium.
A scroll-locked section that pins itself to the viewport as you scroll, revealing cards one by one with custom scroll timing and magnetic snap behavior. We implemented this with requestAnimationFrame-driven scroll interpolation, so the cards glide smoothly even on high-refresh-rate displays.
Built on Remix with React 18, leveraging both CSS and JavaScript animations strategically to keep performance high.
