Experience the future of athletic movement with this premium Nike landing page. This project showcases advanced 3D scrolling animations and a modern, high-fidelity design system.
- 🌀 3D Image Sequence Scrolling: A smooth, high-performance 240-frame 3D animation perfectly synchronized with your scroll position.
- 🚀 Ultra-Modern UI: Built with the latest tech stack (Next.js 15, React 19, and Tailwind CSS 4) for unmatched speed and styling flexibility.
- ✨ Framer Motion Integrations: Seamless micro-animations and physics-based transitions for a premium interactive experience.
- 📱 Fully Responsive: Optimized for every device, from mobile to ultra-wide displays.
- 🛒 E-Commerce Ready: Includes a mini-cart system, interactive shop sections, and detailed product modals.
- Framework: Next.js 15+ (App Router)
- Animation: Framer Motion
- Styling: Tailwind CSS 4
- Icons: Lucide React
- Language: TypeScript
- Node.js 18.x or later
- npm or yarn
-
Clone the repository:
git clone [your-repo-url] cd nike-web -
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open http://localhost:3000 with your browser to see the animation in action!
The core of the experience lies in the HeroCanvas component, which uses high-performance canvas rendering with high-DPI (Retina) support to ensure the Nike swoosh looks sharp on all screens.
Using Framer Motion's useScroll, we map the scroll progress directly to the image frame index, providing a tactile, 3D-like feel as you navigate the page.
Created with ❤️ by Antigravity AI for Nike enthusiasts.