⚡ Axen

A 3D Interactive Landing Experience built with Next.js, GSAP, and Tailwind CSS

---

🚀 Overview

Axen is a high-end 3D interactive landing page built with Next.js, GSAP, and Tailwind CSS.
The goal was to recreate an immersive, modern landing experience with scroll-triggered animations, parallax effects, and 3D motion interactivity — all optimized for performance and responsiveness.

This project is perfect for showcasing animation-heavy front-end capabilities and advanced UI design workflows.

---

🧠 Features

• 🎞️ Scroll-triggered animations powered by GSAP for cinematic transitions
• 🧩 3D hover and motion effects to add interactive depth
• 🌀 Clip-path transitions for geometric section reveals
• 💎 Next.js optimized build for smooth rendering and routing
• 📱 Fully responsive across all screen sizes
• 🧰 Clean, modular component structure with reusable utilities

---

⚙️ Tech Stack

• Next.js – Framework for hybrid rendering and routing
• GSAP – Animation engine for scroll-based and 3D motion effects
• Tailwind CSS – Utility-first styling for clean, fast development

---

🏗️ Getting Started

Prerequisites

Ensure you have these installed:

• Node.js (v18 or later)
• Git

Clone & Install

# Clone this repository
git clone https://github.com/yourusername/axen.git

# Navigate into the folder
cd axen

# Install dependencies
npm install

Run Locally

npm run dev

Then open http://localhost:3000 in your browser.

---

📂 Folder Structure

axen/
├── components/        # Reusable UI components
├── public/            # Assets (images, fonts, videos)
├── styles/            # Global and Tailwind styles
├── pages/             # Next.js routes
├── utils/             # Animation and helper functions
└── README.md

---

🎨 Preview

A modern, 3D-animated landing experience that demonstrates real-world GSAP + React motion design.

(Add a GIF or screenshot of your live demo here)

---

⚠️ Disclaimer

All design inspiration credits go to Zentry. This project was built solely for educational and portfolio purposes — not for commercial use.

---

🌐 Live Demo

🔗 View Deployment

---

💡 Inspiration

Built as a creative exploration of motion-driven web design, Next.js 3D integration, and GSAP ScrollTrigger performance tuning. If you’re a developer looking to master advanced front-end visuals — this is a solid reference point.

---

👨‍💻 Author

Syed Laeeq Ahmed Fullstack Developer | UI/UX Visionary | Motion Design Enthusiast

📩 laeeqahmed656@gmail.com 🌐 Portfolio

“Good design is intelligence made visible.” — Alina Wheeler Built with passion, precision, and pixels.