---

╔══════════════════════════════════════════════════════════════════╗
║  "The arc reactor. A miniature version of the same               ║
║   technology that powers my suit."  — Tony Stark 🦾              ║
╚══════════════════════════════════════════════════════════════════╝

---

⚛️ About

A high-performance, visually stunning 3D-animated landing page built with Next.js, Framer Motion, and Canvas. This project features a scroll-driven "exploded view" of a cinematic Arc Reactor core.

As you scroll down — the reactor assembles piece by piece. Scroll back up — it disassembles. All powered by 240+ hand-crafted Canvas frames and a real-time Iron Man HUD.

🎯 This isn't just a project. It's a statement.

---

🖼️ Preview

---

✨ Features

🔥 Feature	📖 Description
🎞️ Scroll-Synchronized 3D Animation	240+ high-quality frames rendered via HTML5 Canvas for buttery smooth "ping-pong" disassembly and reassembly
📡 Dynamic HUD	Real-time data overlays — Core Temp, RPM, Power Output — that react to user scroll position
🔮 Glassmorphism UI	Modern, translucent interface built with Tailwind CSS 4
🖱️ Smooth Scrolling	Integrated with Lenis for an elegant, cinematic scrolling experience
📱 Fully Responsive	Pixel-perfect on both desktop and mobile viewing
⚡ Ping-Pong Effect	Reactor assembles scrolling down, disassembles scrolling up

---

🛠️ Tech Stack

Layer	Technology
Framework	Next.js 15+ (App Router)
Animation	Framer Motion
Rendering	HTML5 Canvas (240+ frames)
Styling	Tailwind CSS 4
Icons	Lucide React
Scroll	Lenis
Language	TypeScript
Deployment	GitHub Pages (Static Export)

---

🚀 How It Works

User Scrolls Down
      ↓
Scroll Position mapped to Frame Index (0 → 240+)
      ↓
HTML5 Canvas renders correct frame
      ↓
HUD overlays (Temp / RPM / Power) update in real-time
      ↓
Arc Reactor assembles piece by piece
      ↓
⚛️ Reactor Online — Full Power

---

📦 Installation & Setup

1. Clone the repository

git clone https://github.com/Tcode-Motion/animated-ark-riacter.git
cd animated-ark-riacter

2. Install dependencies

npm install

3. Run the development server

npm run dev

Open http://localhost:3000 to see it live 🎉

4. Build for production

npm run build

---

📜 Deployment

This project is configured for GitHub Pages with static export. To deploy your own version:

npm run deploy

---

📁 Project Structure

animated-ark-riacter/
├── app/                  # Next.js App Router pages
├── public/               # Static assets & animation frames
│   └── screenshot.png    # Preview screenshot
├── next.config.ts        # Next.js configuration
├── tailwind.config.ts    # Tailwind CSS config
├── tsconfig.json         # TypeScript config
└── README.md

---

🤝 Contributing

Contributions, issues, and feature requests are welcome!

• ⭐ Star the repo if you like it — it helps a lot!
• 🐛 Open an issue for any bugs you find
• 🔧 Submit a pull request for improvements

---

👨‍💻 Author

Tanmoy — Tcode-Motion

"Predict the future by coding it." ⚡

---

📄 License

This project is licensed under the MIT License.

---