Developed with ❤️ by shoriful-dev
A premium, highly interactive web application for SPYLT, featuring smooth animations, glassmorphism, and a state-of-the-art design system. This project showcases the range of delicious protein-packed, caffeine-infused milk flavors with a focus on high-end UI/UX.
- Premium UI/UX: Modern, premium design with a Focus on HSL-tailored colors and smooth layouts.
- Dynamic Animations: Powered by GSAP (GreenSock) for high-performance scroll-driven animations and text splitting.
- Micro-interactions: Hover effects, smooth transitions, and engaging micro-animations.
- Fully Responsive: Optimized for Mobile, Tablet, and Desktop using
react-responsive. - Glassmorphism: Elegant use of blur effects and transparency for a modern fintech-inspired look.
- Performance Optimized: Lazy-loaded images and metadata-preloaded videos for lightning-fast speeds.
- Core: React 19, Vite
- Animation: GSAP (ScrollTrigger, ScrollSmoother, SplitText)
- Styling: Tailwind CSS v4
- Responsiveness: React Responsive
- Deployment: Configured for Netlify
To run this project locally, follow these steps:
-
Clone the repository:
git clone <repository-url>
-
Navigate to the project directory:
cd SPYLT-Flavors -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Build for production:
npm run build
SPYLT-Flavors/
├── public/ # Static assets (images, videos, fonts)
├── src/
│ ├── components/ # Reusable UI components
│ ├── sections/ # Main page sections (Hero, Flavor, etc.)
│ ├── constants/ # Project-wide constants and data
│ ├── App.jsx # Main application entry
│ ├── main.jsx # React entry point
│ └── index.css # Global styles and Tailwind configuration
├── netlify.toml # Netlify deployment configuration
└── package.json # Dependencies and scripts
This project is private and intended for promotional use for the SPYLT brand. All rights reserved.
This is a professional project. For major changes, please open an issue first to discuss what you would like to change.
Created with ❤️ by shoriful-dev