Data

Tools

Indexes

Applications

Experiments

Open Source Science

https://github.com/aderinsolabamidele/fizzi

Fizzi is a vibrant 3D interactive landing page built with Next.js, React Three Fiber, and GSAP animations. This project is a visually immersive web experience that combines slick motion design with custom 3D soda can models, ideal for showcasing modern web animation skills.

https://github.com/aderinsolabamidele/fizzi

Science Score: 26.0%

This score indicates how likely this project is to be science-related based on various indicators:

  • ○
    CITATION.cff file
  • ✓
    codemeta.json file
    Found codemeta.json file
  • ✓
    .zenodo.json file
    Found .zenodo.json file
  • ○
    DOI references
  • ○
    Academic publication links
  • ○
    Academic email domains
  • ○
    Institutional organization owner
  • ○
    JOSS paper metadata
  • ○
    Scientific vocabulary similarity
    Low similarity (8.6%) to scientific vocabulary
Last synced: 10 months ago · JSON representation

Repository

Fizzi is a vibrant 3D interactive landing page built with Next.js, React Three Fiber, and GSAP animations. This project is a visually immersive web experience that combines slick motion design with custom 3D soda can models, ideal for showcasing modern web animation skills.

Basic Info
  • Host: GitHub
  • Owner: aderinsolabamidele
  • License: apache-2.0
  • Language: TypeScript
  • Default Branch: main
  • Size: 18.2 MB
Statistics
  • Stars: 0
  • Watchers: 0
  • Forks: 0
  • Open Issues: 0
  • Releases: 0
Created 11 months ago · Last pushed 11 months ago
Metadata Files
Readme License

README.md

Fizzi - Interactive 3D Landing Page

Project Overview

Fizzi is an innovative web application showcasing an interactive landing page with advanced 3D animations, built using cutting-edge web technologies.

front

Links

Visit the Website -

notes and blog -

Notion Article

Tech Stack

  • Frontend Framework: Next.js
  • 3D Graphics: React Three Fiber, Three.js
  • Animation: GSAP (GreenSock Animation Platform)
  • Styling: Tailwind CSS
  • CMS: Prismic

Key Features

1. Dynamic Content Management

  • Utilizes Prismic CMS with Slice Machine
  • Modular, reusable content blocks
  • Automatic TypeScript type generation for content slices

2. 3D Visualization

  • Interactive 3D soda can models
  • Custom 3D scenes with floating and animated elements
  • Responsive canvas rendering across devices

3. Performance Optimizations

  • Next.js font optimization
  • Tailwind CSS purging unused styles
  • Efficient 3D model loading with preloading techniques

Technical Deep Dive

Content Architecture

  • Prismic Slice Machine enables dynamic content creation
  • Each slice represents a reusable, flexible content block
  • Automatic TypeScript type generation for robust type-checking

Animation Techniques

  • GSAP Timeline for sequenced animations
  • Scroll-triggered animations
  • Text and character-level animations
  • 3D object transformations

3D Rendering

  • React Three Fiber for declarative 3D graphics
  • Custom GLTF model rendering
  • Advanced texture and material management
  • Performance monitoring with r3f-perf

State Management

  • Zustand for lightweight state control
  • Tracking asset loading and scene readiness

Development Workflow

  1. Local development with Prismic Slice Machine
  2. Content creation in Prismic dashboard
  3. Automatic type generation
  4. Responsive design implementation
  5. Animation and interaction layer

Performance Considerations

  • Single WebGL context using React Drei's View component
  • Optimized 3D model loading
  • Suspense for asset management
  • Tailwind CSS performance optimization

Key Components

3D Scene Components

  • SodaCan.tsx: Custom 3D soda can model renderer
  • FloatingCan.tsx: Animated floating can component
  • HeroScene.tsx: Main landing page 3D scene

Slice Components

  • Hero: Initial landing page slice
  • SkyDive: Animated scrolling slice
  • Carousel: Interactive flavor selection slice

Animations and Interactions

GSAP Animations

  • Intro timeline with staggered element appearances
  • Scroll-triggered animations
  • 3D object transformations
  • Character and text animations

Scroll Interactions

  • Smooth scrolling effects
  • Parallax-like 3D object movements
  • Dynamic content reveal

Optimization Techniques

  • Preloading 3D models with useGLTF.preload()
  • Efficient WebGL context management
  • Lazy loading with React Suspense
  • Performance monitoring with r3f-perf

Getting Started

Prerequisites

  • Node.js
  • npm or yarn
  • Prismic account

Installation

```bash npm install npm run dev

Owner

  • Login: aderinsolabamidele
  • Kind: user

GitHub Events

Total
  • Push event: 3
  • Create event: 3
Last Year
  • Push event: 3
  • Create event: 3

Dependencies

package-lock.json npm
  • 630 dependencies
package.json npm
  • @slicemachine/adapter-next ^0.3.51 development
  • @types/node ^20.14.2 development
  • @types/react ^18.3.3 development
  • @types/react-dom ^18.3.0 development
  • autoprefixer ^10.4.20 development
  • concurrently ^8.2.2 development
  • eslint ^8.57.0 development
  • eslint-config-next ^14.2.4 development
  • postcss ^8.4.47 development
  • prettier ^3.3.3 development
  • prettier-plugin-tailwindcss ^0.6.8 development
  • r3f-perf ^7.2.2 development
  • slice-machine-ui ^2.8.1 development
  • tailwindcss ^3.4.13 development
  • typescript ^5.4.5 development
  • @gsap/react ^2.1.1
  • @prismicio/client ^7.11.0
  • @prismicio/next ^1.7.0
  • @prismicio/react ^2.9.0
  • @react-three/drei ^9.114.4
  • @react-three/fiber ^8.17.10
  • @types/three ^0.169.0
  • clsx ^2.1.1
  • gsap ^3.12.5
  • next ^14.2.4
  • react ^18.3.1
  • react-dom ^18.3.1
  • three ^0.169.0
  • zustand ^5.0.1