A high-fidelity landing page clone of K72, built to demonstrate the intersection of performance and digital storytelling. This project focuses on fluid typography, custom cursors, and frame-perfect scroll animations.
- ReactJS - Component-based architecture.
- React-Router-DOM - For navigation
- Tailwind CSS - For rapid, utility-first styling.
- GSAP (GreenSock) - Powering all complex timelines and scroll triggers.
- Locomotive Scroll - For that signature high-end "smooth scroll" experience
To get this project running locally, follow these steps:
git clone https://github.com/your-username/k72-clone.gitcd k72-clone
npm installnpm run dev- Custom Cursor Interaction: A dynamic, physics-based cursor that reacts to different sections and hover states.
- Fluid Typography: Text that scales perfectly across all viewports without breaking the design intent.
- ScrollTrigger Timelines: Complex sequences that reveal content precisely as the user explores.
- Page Transitions: Seamless entry and exit animations to maintain the "premium" feel.
During this build, I focused on:
- Managing GSAP Context within React hooks (
useGSAP) to prevent memory leaks. - Calculating viewport-relative typography to ensure the "big text" aesthetic remains readable on mobile.
- Optimizing scroll performance to ensure 60fps animations even with multiple triggers active.
Ayeza Bashir
- Portfolio: ayeza-bashir-portfolio.vercel.app
- LinkedIn: in/ayezabashir
- Email: ayezabashir46@gmail.com
Made with ❤️ and a lot of GSAP Timelines.