🥤 Fizzi - 3D Soda Can Experience with Prismic + Next.js

Welcome to Fizzi, an interactive, animated soda can experience built with Next.js, Three.js (via React Three Fiber), and Prismic.
This project leverages the Prismic + Next.js Minimal Starter and adds custom 3D components, smooth animations, and CMS-powered content management.

🌟 Live Demo is Now Available!

👉 Click Here to Explore Fizzi 🍹 – A Soda Experience Like No Other!

---

⚡ Quick Start

1. Create a Prismic Repo:

   • Go to Prismic Dashboard
   • Click Create New Repository
   • Choose Next.js + Minimal Starter
   • Complete setup steps

2. Clone this Project:

   git clone https://github.com/Itssanthoshhere/Fizzi.git
   cd fizzi

3. Install Dependencies:

   npm install

4. Start the Development Server:

   npm run dev

---

🧱 Project Structure & Custom Components

File/Component	Description
Bounded.tsx	Responsive layout wrapper with consistent padding
Button.tsx	Prismic-connected styled button
FizziLogo.tsx	Custom animated SVG logo with masking
CircleText.tsx	Animated spinning circular text SVG
TextSplitter.tsx	Splits and animates text character by character
SodaCan.tsx	3D soda can rendered with Three.js (supports flavor textures)
FloatingCan.tsx	Floating soda can using Drei’s <Float> wrapper
Header.tsx	Top navigation bar with logo
Footer.tsx	Footer with rotating SVG and branding
ViewCanvas.tsx	Canvas for rendering 3D elements using React Three Fiber

---

✨ Features

• ✅ Realistic 3D soda can (multiple flavors)
• ✅ Floating animations with Drei
• ✅ Content managed via Prismic
• ✅ Slice-based editable pages
• ✅ Fully responsive design
• ✅ Animated SVG and text effects

---

📝 Customization

Create Pages with Slices

1. Go to your Prismic Dashboard
2. Click the ✏️ icon to create a Page
3. Add slices like rich text, images, or custom slices
4. Publish to view the page live at /your-page-slug

Preview Content

This project supports Prismic’s Preview Mode locally. For preview setup in production, see: 🔗 Preview Drafts in Next.js

---

📂 Important Files

File	Purpose
prismicio.ts	Prismic client setup
app/page.tsx	Homepage rendering with UID "home"
app/[uid]/page.tsx	Dynamic page rendering based on UID
app/layout.tsx	Layout wrapper and providers
slices/*/index.tsx	Slice component renderers

---

📦 Built With

• Next.js
• Prismic CMS
• React Three Fiber
• Drei
• Slice Machine

---

🌐 Deployment

Deploy easily with Vercel or any cloud provider: 📘 Deploy a Next.js App

---

🧠 Learn More

• Prismic + Next.js Guide
• Slice Machine Docs
• React Three Fiber Docs

---

📬 Connect With Me

Feel free to connect if you enjoyed the project or have feedback!

---

📄 License

This project is for educational purposes only and is not affiliated with or endorsed by Prismic, Next.js, or any other third-party tools mentioned.

🎥 Inspired by the tutorial:

• How I Built a 3D Soda Can Website Using Three.js & Prismic by Prismic

📺 Watch on YouTube

All trademarks and assets belong to their respective owners.

---

Created with ❤️ using Prismic, Next.js & Three.js – customized by Santhosh VS

---