A high-performance, immersive landing page built with modern frontend and 3D technologies, featuring scroll-driven animations and dynamic content managed via a Headless CMS.
- Immersive 3D Scroll-Link: Leverages Three.js and React Three Fiber (R3F) for high-fidelity 3D scene rendering, tightly synchronized with native browser scroll using GSAP's ScrollTrigger.
- Next.js 14 Performance: Built on Next.js 14's App Router for optimized build times and server-side rendering benefits, ensuring fast loading and SEO.
- Decoupled Content Management: Utilizes Prismic as a Headless CMS, separating content from the presentation layer for easy updates.
- Type-Safe Development: Developed entirely with TypeScript, ensuring code reliability across the integration of GSAP, R3F, and Prismic.
| Category | Technology |
|---|---|
| 3D Rendering | Three.js / React Three Fiber (R3F) |
| Animation | GSAP (GreenSock) & ScrollTrigger |
| Framework | Next.js 14 (App Router) |
| Styling | Tailwind CSS |
| CMS | Prismic (Slice Machine) |
- Clone the repository:
git clone [https://github.com/digitalfairy/fizzi-soda-brand]
- Install dependencies:
npm install
- Run Dev Server: (Requires Prismic configuration to be set up locally)
npm run dev # Runs the Next.js dev server and Slice Machine UI - Navigate to
http://localhost:3000.
src/webgl/: Core logic for the 3D scene, R3F canvas setup, model handling, and lighting.- GSAP Integration: Advanced timeline choreography using
gsap.context()andScrollTriggerfor performance-friendly animations. src/slices/: Prismic Slices that generate dynamic UI components with linked CMS data.
For more projects and to discuss my skills:
- Website: anitacreativestudio.com
- Email: jelicanita7@gmail.com
The base structure of this project is adapted from a Prismic starter template, licensed under the Apache License, Version 2.0.
Copyright 2013-2022 Prismic (https://prismic.io) Licensed under the Apache License, Version 2.0.