This repository contains the code for a streaming platform UI inspired by Netflix, built using Next.js, Tailwind CSS, and GSAP for animations. The project includes cinematic transitions, interactive video sections, and modern design elements that showcase short movie clips, making it ideal for demonstrating a streaming-style interface and user experience.
👉 Cinematic Interface: A Netflix-inspired UI with smooth transitions and immersive layout.
👉 Responsive Design: Seamlessly adapts to desktop and mobile devices.
👉 Animated Transitions: GSAP-powered animations enhance user flow between video interactions.
👉 Custom Player Integration: Plays short MP4 clips using a lightweight custom video component.
👉 Content Switching: Easily toggle between featured clips using in-app controls.
👉 Loader Experience: Intelligent video loading with a fallback spinner for smooth UX.
👉 Typography & Styling: Clean, bold fonts and modern Tailwind-based UI design.
- Next.js – Full-stack React framework for building fast, scalable web apps
- TypeScript – Strongly typed superset of JavaScript
- Tailwind CSS – Utility-first CSS framework for rapid UI development
- Shadcn UI – Accessible, customizable component library built with Tailwind
- GSAP – Powerful animation library for performant, timeline-based animations
To get started with this project, follow these steps:
- Clone the repository:
git clone https://github.com/Mubassim-Khan/Clypp.git-
Open the project in your preferred code editor.
-
Install the project dependencies using npm:
npm install- Run the project
npm run dev- Set Up Environment Variable by creating a new file named
.envin the root of the project, add the variable, and it's key from TMDB Website:
NEXT_PUBLIC_API_KEY=- Open http://localhost:3000 to view it in your browser.
This project is licensed under the MIT License.
Contributions to this project are welcome. If you find any issues or have suggestions for improvements, please open an issue or submit a pull request.
- Copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
If you have any questions, suggestions, or feedback, you can reach out to the project maintainer:
- LinkedIn : Mubassim Ahmed Khan
- Email: [email protected]