iPhone 15 landing page

iPhone 15 Pro landing page built using React, GSAP and Three.js.

Links

Features

Core features

Key features include 3D iPhone models, animated carousel and a stunning hero-section.

Additionally, the landing-page is fully-responsive and has smooth animations and transitions .

Stack

Primary stack

I used React.js with TypeScript for this project, Tailwind CSS for styling, GSAP for animations and React Three Fiber for 3D development.

Problems

The implementation of the Animated Video Carousel was very challenging. Ensuring seamless transitions between videos while tracking each video's progress required meticulous planning and execution. Leveraging multiple refs, effects, and hooks proved instrumental in achieving the desired outcome.

Rendering the 3D iPhone models presented its own set of challenges, encompassing aspects such as lighting, camera angles, and animation.

Lessons

Key takeaways

This project helped me learn modern technologies like GSAP and React Three Fiber, and provided an opportunity to explore the creation of dynamic web experiences and captivating animations.

Connect

If you're looking for a developer or just want to connect, reach out on any of my socials.