The Challenge
Black Box Research needed a digital flagship that could house three distinct business divisions (Alfa, Beta, Omega) while maintaining a singular, elite brand identity. The goal was to move away from traditional corporate layouts and create an immersive, high-motion journey that established immediate authority in the Mexican e-commerce market.
Technical Execution & Animation
The site's backbone is built on custom GSAP (GreenSock Animation Platform) and Webflow Interactions. I implemented a "Preloader-to-Hero" transition that syncs background video layers with SVG masking, creating a seamless entry experience.
Key technical highlights include:
- Custom SVG Grid System: A dynamic, responsive SVG background that reacts to page state.
- Sticky Camera Interactions: A multi-layered "Sticky Box" section for the divisions that uses scroll-progress to transform scale, rotation, and opacity across nested elements.
- Timeline Visualization: A custom-coded horizontal timeline tracking the founder’s journey, utilizing scroll-jacking logic for a narrative-driven experience.
- Responsive Motion: Ensuring that complex animations remain performant on mobile devices through careful asset optimization and media-query-specific motion triggers.



