An immersive digital experience for professional motocross rider Lorenzo Cardoso, built with the latest web technologies. Inspired by the Lando Norris website. This project is a high-performance landing page that combines bold design with sophisticated interactions, creating a unique visual narrative about the athlete's journey and personality. Developed with Next.js 16, React 19, Framer Motion, Tailwind CSS v4, and Canvas API, the application explores the limits of the modern web to deliver fluid animations and memorable interactive experiences. This architecture creates a "progressive reveal" effect inspired by premium Lando Norris website, using framer-motion to control scale, opacity, and positioning with millimeter precision. 🛠 Innovative Interactions - Interactive Portrait (Hero): WebGL liquid effect with THREE.js that reveals textured layers on mouseover, with persistent trail and gradual decay - Interactive Clean: Simulation of "cleaning" the rider's mud using Canvas 2D API, with jagged brush mask and trail that persists for 45 seconds before disappearing - Adaptive Header: Intelligent logo color change based on `IntersectionObserver`, ensuring readability on light and dark backgrounds ⚡ Performance and Technical Stack - Next.js 16 (App Router, React Server Components, caching with `cacheLife`) - React 19.2 (including `useEffectEvent` and `<Activity>` for state optimization) - Framer Motion 11 (orchestration of complex animations with `AnimatePresence`) and `motion.div`) - Canvas API + WebGL (THREE.js) (mask and real-time rendering effects) - Tailwind CSS v4 (inline token design system, no `tailwind.config.js`) - TypeScript (full type-safety) This project demonstrates how to combine advanced front-end engineering with experimental design to create digital experiences that transcend the conventional, ideal for athlete portfolios, premium brands, or products that require impactful visual narratives.
Last Updated 22 hours ago
