🎬 Cinematic Architecture V2

A High-Performance React Bento Grid with 3D Physics & Canvas Interactions

🌐 Live Project & Demonstration

🚀 Live Deployment: Click Here to View the Live Site

Interactive Demonstration:

---

⚡ What I Did (Key Features & Architecture)

I engineered this project from the ground up to move beyond standard web design and incorporate interactive, app-like physics.

• Interactive Canvas Scratch-to-Reveal: Engineered a custom HTML5 Canvas component that allows users to physically "scratch off" the UI layer with their cursor (using globalCompositeOperation) to reveal the underlying technology stack.
• 3D Bento Grid Physics: Replaced standard hover effects with mathematical cursor-tracking. The media cards calculate the mouse coordinates relative to their bounding box and tilt dynamically in 3D space.
• Flawless Scroll Staggering: Implemented dual-nested framer-motion wrappers to decouple scroll animations from hover physics, ensuring cards gracefully drop into the viewport every single time the user scrolls.
• Global Particle System: Developed a highly optimized, infinitely rendering particle canvas (snow/ash physics) that anchors to the viewport and intelligently adapts opacity based on the active theme.
• Asymmetrical Responsive Grids: Utilized Tailwind's grid-flow-dense alongside dynamic col-span logic to transition seamlessly from a massive desktop cinematic block to a perfectly packed, 2-column mobile layout.
• Persistent State Management: Built a custom React Hook for the Watchlist that instantly synchronizes saved UI states to browser localStorage.

---

🧠 What I Learned

Building this architecture pushed my MERN stack frontend skills to the next level. Here are my core technical takeaways:

1. Advanced React Refs & DOM Manipulation: I learned how to effectively use useRef to directly interact with the HTML5 Canvas API without triggering unnecessary React re-renders. This was crucial for building the high-performance Scratch-to-Reveal and particle systems.
2. Complex Motion State Decoupling: I discovered that mixing viewport scroll triggers (whileInView) and interactive animations (animate) on the same motion.div causes state conflicts. I solved this by learning how to use nested animation wrappers.
3. 3D Mathematics in CSS/JS: I learned how to translate 2D mouse coordinates (clientX, clientY) into rotational degrees (rotateX, rotateY) based on element dimensions to create convincing 3D perspective transforms.
4. Mastering CSS Grid: I learned how to break out of standard rigid layouts using grid-flow-dense, allowing irregularly sized "Bento Box" cards to automatically pack together tightly without leaving empty whitespace.
5. Deployment Routing: I learned how to configure Vercel's Root Directory settings to successfully deploy nested Vite/React applications directly from a monorepo structure.

---

🛠️ Technology Stack

• Frontend Framework: React 18
• Build Engine: Vite
• Styling: Tailwind CSS
• Animations: Framer Motion
• Iconography: React Icons
• Deployment: Vercel

---

💻 Local Development Setup

To run this project locally on your machine:

1. Clone the repository:

   git clone [https://github.com/shikharcode-dev/cinematic-react.git](https://github.com/shikharcode-dev/cinematic-react.git)