Soch AI is an immersive landing page promoting a chatbot app similar to ChatGPT. Built with Three.js and Matter.js, it features dynamic 3D visuals and interactive physics-based animations where cards fall from the sky and scatter on impact. The layout emphasizes modern UI principles, responsive design, and playful interactivity. This project combines stunning visuals, practical performance, and real-time user engagement, encouraging downloads with an entertaining and highly creative interface that mimics real-world physics while delivering a futuristic digital experience. Every element was crafted with user behavior and experience in mind to maximize user retention and interactivity.

Tech Stack

• Three.js
• React.js
• Matter.js
• Tailwind CSS

Key Features

• Interactive physics-based cards fall and scatter dynamically.
• Three.js renders imported 3D models with precision.
• Responsive UI optimized for desktop and mobile.
• Landing page built to maximize user downloads.

My Role

I designed and developed the front-end of this project from scratch. I handled layout structure, animation logic, component integration, and responsive design. I also worked with designers to translate wireframes into pixel-perfect UI.

Challenges & Solutions

I faced a serious issue with capsule collisions. Despite trying many solutions, nothing worked. After posting on GitHub and StackOverflow, a senior engineer from San Francisco offered help. Together, we debugged and solved the physics problem, making the animations behave correctly. It taught me how to approach collaborative debugging and strengthened my problem-solving skills in real-world animation issues.