https://github.com/bernietv/three.js-example

Interactive 3D project created with Three.js and Prismic 🍹🔥🏆🌟
https://github.com/bernietv/three.js-example

drei fiber nextjs react threejs

Last synced: 3 months ago
JSON representation

Interactive 3D project created with Three.js and Prismic 🍹🔥🏆🌟

• Host: GitHub
• URL: https://github.com/bernietv/three.js-example
• Owner: BernieTv
• License: mit
• Created: 2024-11-10T13:39:23.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-01-27T15:15:03.000Z (over 1 year ago)
• Last Synced: 2025-03-24T07:47:28.620Z (over 1 year ago)
• Topics: drei, fiber, nextjs, react, threejs
• Language: TypeScript
• Homepage: https://fizzi-demo.vercel.app/
• Size: 2.42 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Fizzi 3D Landing Page 🎉🍹🌟

Welcome to the **Fizzi 3D Landing Page**, a cutting-edge, **scroll-animated e-commerce landing page** designed to provide a captivating and interactive user experience. Developed using **Next.js 14** ⚡, **GSAP** 💨, **Prismic CMS** 📖, **Three.js** 🌍, **Tailwind CSS** 🌸, and **TypeScript** ✨, this project brings a fictional soda brand, *Fizzi*, to life with dynamic content, smooth animations, and immersive 3D visuals. 🚀🎨

### Overview 🏆

The **Fizzi 3D Landing Page** is an innovative approach to modern e-commerce web design. By combining **scroll-driven animations** 🖱️, **interactive 3D elements** 🎮, and **dynamic content fetching** from **Prismic CMS** 📡, the page delivers an engaging experience for users. The integration of **react-three-fiber** 🎮 and **Three.js** 🌐 empowers the page with rich 3D models and immersive animations, while **Tailwind CSS** 💅 ensures a responsive and stylish layout across devices 📱. With the use of **TypeScript** 🖋️, the development process is streamlined, offering a smooth, type-safe coding experience.

### Key Features 🚀

- **Next.js 14** ⚡: A modern, React-based framework for building fast, optimized web applications with powerful SSR (Server-Side Rendering) and static generation. 🛠️

- **GSAP (GreenSock Animation Platform)** 🎬: Utilized for advanced, smooth scroll-driven animations and seamless transitions that bring the page to life. 🌈

- **Prismic CMS** 📖: A headless content management system for flexible, dynamic content fetching, ensuring up-to-date data management. 🔄

- **react-three-fiber & Three.js** 🎮🌍: Integrates 3D graphics into the React environment, allowing interactive 3D models and animations powered by **Three.js**. 🕹️

- **Tailwind CSS** 💅: A utility-first CSS framework that provides a modern and responsive design approach with minimal overhead. 💻

- **TypeScript** 🖋️: A statically typed superset of JavaScript, enabling safer and more reliable development. 🔧

- **Vercel Hosting** 📡: Deployed on **Vercel** for fast and seamless hosting with automatic scaling and continuous integration. 🌍

### Technologies Used 🧑‍💻💡

- **Next.js 14** ⚡: Full-stack framework for React with server-side rendering and static site generation.

- **GSAP** 💨: JavaScript library for high-performance animations.

- **Prismic** 📚: Headless CMS for content management and dynamic data fetching.

- **react-three-fiber & Three.js** 🎮: React bindings for Three.js, enabling powerful 3D rendering.

- **Tailwind CSS** 🌸: A utility-first CSS framework for building responsive and customizable UIs.

- **TypeScript** ✨: A type-safe, modern JavaScript superset for better code quality and developer experience.

- **Vercel** 🌍: Hosting platform that allows for optimized deployment and scaling.

### Installation Instructions 📥

To get started with the Fizzi 3D Landing Page locally, follow these steps:

1. **Clone the repository** 👇:

   ```bash

   git clone https://github.com/BernieTv/Three.js-Example.git

   ```

2. **Install dependencies** 🔧:

   ```bash

   cd Three.js-Example

   npm install

   ```

3. **Start the development server** 💻:

   ```bash

   npm run dev

   ```

4. **Navigate to** `http://localhost:3000` 🖥️ to view the project in your browser 🌐.

### Future Enhancements 🌱

- Integration with **e-commerce APIs** 🛒 for a fully functional online store.

- Implementation of **advanced animations** 💫 for product showcases.

- Optimization for better performance 🚀 and SEO 📈.

### License 📜

This project is licensed under the **MIT License** 🎓 - see the [LICENSE](LICENSE) file for details. 📝