Click To Skip To Main Content

ux/ui , react , next.js , frontend

Fizzi

Bright. Bold. Gut-friendly. A 3D-enhanced motion website for a playful soda brand.

Fizzi is a vibrant beverage brand offering five fruit-flavored sodas enriched with prebiotics and probiotics, designed for people seeking a healthier alternative to traditional soft drinks. With a playful pop-art aesthetic and the motto “Live Gutsy,” the brand’s website needed to reflect its energetic personality while delivering a premium, motion-driven experience from the moment a user lands on the homepage.

View on Github

Key Features

  • Scroll-synced GSAP homepage animations
  • Interactive 3D soda can built with React Three Fiber
  • Prismic CMS with live preview
  • Responsive mobile experience with loading optimization
  • Screen-reader accessible hidden fields
  • Environment map rendering with .hdr files
  • Optimized assets and conditional animation loading

Role/Services

ux/ui , react , next.js , frontend

Date

Jun 12, 2025

View Project
Fizzi - live gutsy

The goal was to build a fully animated, interactive website from scratch that would combine 3D visuals, scroll-triggered motion design, and smooth CMS integration. The site had to feel dynamic and expressive while remaining performant and accessible, particularly for mobile users or slower networks.

fizzi - desktop view

The project was developed using modern frontend tooling, including Next.js 15, Tailwind CSS 4, GSAP, and React Three Fiber for 3D rendering. Content was managed through Prismic CMS, allowing for real-time previews and modular content editing.

Key contributions included:

  • Homepage Animation Flow: Built a fluid GSAP-powered scroll experience, syncing text and visuals to deliver a guided brand journey with playful transitions.
  • 3D Can Viewer: Created an interactive 3D soda can using React Three Fiber and @react-three/drei, rendered with optimized .hdr environment files for realistic lighting while keeping load times low.
  • Prismic CMS Integration: Integrated Prismic content types with full live preview support, enabling seamless content updates without developer input.
  • Mobile Optimization: Balanced animation richness with mobile responsiveness, using conditional rendering, asset size reduction, and fallbacks for older or slower devices.
  • Performance Enhancements: Included a loading state for low-bandwidth connections, optimized image and 3D assets, and followed best practices for HTML5, accessibility (including screen reader-only fields), and responsive design.

fizzi - mobile view

The final result is a smooth, immersive brand site that highlights Fizzi’s bold energy while maintaining excellent performance across devices. Animations are playful without being overwhelming, 3D interactions feel seamless, and the CMS structure empowers easy updates. Accessibility and best practices were respected throughout — making the site not only visually impressive, but also technically solid.