https://github.com/karimm1620/fizzi-gutsy
Landing Page responsive
https://github.com/karimm1620/fizzi-gutsy
dreidev fizzi-prismic gsap nextjs three-js zustand-state-management
Last synced: 10 days ago
JSON representation
Landing Page responsive
- Host: GitHub
- URL: https://github.com/karimm1620/fizzi-gutsy
- Owner: karimm1620
- License: apache-2.0
- Created: 2025-08-11T09:44:59.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-08-11T13:11:57.000Z (3 months ago)
- Last Synced: 2025-09-14T23:56:58.895Z (about 1 month ago)
- Topics: dreidev, fizzi-prismic, gsap, nextjs, three-js, zustand-state-management
- Language: TypeScript
- Homepage: https://fizzi-gutsy-xi.vercel.app
- Size: 2.87 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Fizzi Soda - Interactive 3D Animated Landing page
**Fizzi Soda** is an immersive and visually captivating 3D landing page built with modern web technologies. Crafted for both commercial appeal and creative exploration, it showcases smooth, scroll-based animations and engaging interactions that make browsing feel like a visual experience.
### Live Demo
[Try it yourself 😉 => ]
(https://fizzi-gutsy-xi.vercel.app/)
---
### Tech Stack
- **Frontend Framework**: Next.js (React + Typescript)
- **CMS**: Prismic for dynamic content management
- **3D Visualization**: Three.js + React Three Fiber + Drei + CLSX
- **Animation**: GSAP for high-performance motion control
- **State Management**: Zustand
---
### Highlight Features
- **Seamless 3D Animations**: Scroll-triggered and timeline-driven visual elements that bring the landing page to life.
- **Dynamic Content**: Manage content efficiently via Prismic, with reusable Slice components.
- **Performance-Centric Design**: Includes Three.js model optimization, Preloading, and smooth transitions.
- **Responsive Experience**: Works fluidly across devices, offering consistent visual storytelling and performance.
---
### Why It Matters
Fizzi Soda is more than just landing page-it's a digital showcase of how animation, interactivity, modern development practices can elevate a user experience. It's perfect for presentations, portofolios, or commercial use where that "wow" factor counts.
---
### How to Run Locally
1. Clone the Repo:
```bash
git clone git@github.com:karimm1620/fizzi-soda.git
cd fizzi-soda
2. Install dependencies:
```bash
npm install
3. Setup your Prismic environments (refer to project docs).
4. Start your dev server:
```bash
npm run dev
5. Open http://localhost:3000 in your browser and explore the animation magic!