Homepage showcase of the Jazzicreates Clone project
A faithful recreation of jazzicreates.tv showcasing modern web animation techniques and interactive design patterns.
This project is a clone of jazzicreates.tv created for educational purposes only. All original designs, animations, and creative concepts belong to the talented developer behind jazzicreates.tv. This implementation serves as a learning exercise in advanced web animation techniques.
Experience the clone at:
https://lavanyaportfolio-web.vercel.app
- Pixel-perfect Recreation: Faithfully replicates the original site's animations and interactions
- Advanced Animations: GSAP-powered timeline animations with ScrollTrigger
- Physics-based Interactions: Matter.js integration for realistic physics simulations
- Responsive Design: Flawless experience across all device sizes
- Performance Optimized: Efficient animation rendering and smooth scrolling
- Modern Development Stack: Next.js 15 with TypeScript and TailwindCSS
- Framework: Next.js 15 (App Router)
- Language: TypeScript
- Styling: TailwindCSS
- Animations: GSAP + ScrollTrigger + SplitText
- Physics: Matter.js
- Package Manager: Bun (npm/yarn compatible)
- Deployment: Vercel
The project implements a sophisticated animation system featuring:
- Timeline-based scroll-triggered animations
- Line-by-line text reveals using SplitText
- Custom cursor interactions
- Physics-based element movements
- Smooth page transitions
- Parallax scrolling effects
- Node.js 18.17 or later
- Bun (recommended) or npm/yarn
- Clone the repository:
git clone https://github.com/mkhoirulwafa18/lavanyaportfolio.git
cd lavanyaportfolio- Install dependencies:
bun install- Start the development server:
bun dev- Open http://localhost:3000 in your browser
bun buildjazzicreates-clone/
├── apps/
│ └── web/ # Next.js application
│ ├── src/
│ │ ├── app/ # Next.js app router pages
│ │ ├── components/ # Reusable React components
│ │ ├── sections/ # Page section components
│ │ ├── lib/ # Utilities & constants
│ │ └── hooks/ # Custom React hooks
│ ├── public/ # Static assets
│ └── styles/ # Global styles
├── package.json
└── README.md
-
bun dev- Start development server -
bun build- Build for production -
bun start- Start production server -
bun lint- Run ESLint -
bun check-types- Validate TypeScript types
-
Components are organized by functionality and section
-
Animation logic is abstracted into custom hooks for reusability
-
GSAP contexts are properly cleaned up to prevent memory leaks
-
Responsive breakpoints follow Tailwind's mobile-first approach
While this is primarily an educational project, suggestions and improvements are welcome. Please ensure that any contributions respect the original creator's work and adhere to the educational purpose of this clone.
This project is created for educational purposes only. All rights to the original design and concept belong to the creator of jazzicreates.tv.
This project demonstrates advanced web animation techniques and serves as a learning resource for developers interested in interactive web experiences.