Dinkify is a high-end, immersive 3D showcase for premium pickleball gear. Designed for the modern athlete, it combines cutting-edge web technology with a sleek, professional aesthetic to bring the court to your screen.
🚀 Live Demo: dinkify.vercel.app
- 🛍️ Dynamic Shopping Experience: A fluid "Add to Bag" interaction with a real-time flying animation that visually tracks items as they enter your cart.
- 🛒 Intelligent Cart Panel: A sophisticated, responsive side panel for managing your premium gear, featuring automatic tax and shipping calculations.
- 🎮 Immersive 3D Showcase: Interact with high-fidelity 3D models of our flagship paddles and balls, powered by React Three Fiber.
- 🎨 Customization Lab: Tailor your gear in real-time. Our dynamic theme engine updates both the UI and 3D assets instantly.
- 🌑 Premium Aesthetic: A bold, dark-mode interface with high-contrast accents, designed for maximum visual impact.
- 🎭 Fluid Animations: Silky-smooth transitions and micro-interactions powered by Framer Motion.
- 📱 Fully Responsive: A seamless experience across all devices, from ultra-wide monitors to mobile screens.
- 📜 Intuitive Navigation: Effortless scroll-based item selection with synchronized background typography.
- 📈 Real-time Analytics: Performance and usage tracking powered by Vercel Analytics.
- Framework: Next.js (App Router)
- 3D Rendering: React Three Fiber & Three.js
- Styling: Tailwind CSS
- Animations: Framer Motion
- Icons: Lucide React
- Analytics: Vercel Analytics
- Deployment: Vercel
To get a local copy up and running, follow these simple steps:
- Node.js (v18 or higher)
- npm or yarn
- Clone the repository:
git clone https://github.com/JimmyWu7/dinkify.git
- Navigate to the project directory:
cd dinkify - Install dependencies:
npm install
- Start the development server:
npm run dev
Open http://localhost:3000 with your browser to see the result.
Distributed under the MIT License. See LICENSE for more information.
Built with ⚡ by Jimmy Wu