Crazzy : Interactive 3D Notebook
A highly interactive, creative developer portfolio built with Next.js and GSAP that simulates a physical, scrollytelling notebook with buttery-smooth animations and 3D page-turning effects.
Tech Stack
Next.js 14Technology
TypeScriptTechnology
Tailwind CSSTechnology
GSAP 3Technology
LenisTechnology
ReactTechnology
Project Details
A highly interactive, creative developer portfolio built with Next.js and GSAP that simulates a physical, scrollytelling notebook with buttery-smooth animations and 3D page-turning effects.
- Unique Notebook Interface Design: The entire portfolio is modeled after a notebook. Instead of standard web sections, the UI simulates pages, complete with a custom cursor and a hand-drawn aesthetic. The layered architecture consists of a static open book frame, content on the right page, and a dynamic front cover flap rotating in 3D space.
- Scrollytelling Hero Section: As the user scrolls from the top, the notebook asset dynamically responds by straightening its rotation and scaling up, mapped directly to the scroll progress using GSAP's scrub feature.
- Complex 3D Book Opening Sequence: The cover opening utilizes advanced CSS 3D capabilities with preserve-3d and Y-axis rotation to simulate a spine hinge. A GSAP timeline seamlessly handles fading the interior frame, swinging the cover, and elastically popping in custom stickers.
- Interactive Tap to Play State Management: The right page of the book manages state dynamically. After the initial opening animation, users are greeted with floating stickers and must click to smoothly transition the DOM state out before React renders the LibraryGrid component.
Technical Overview
Engineered with a powerful animation engine driven by GSAP 3, ScrollTrigger, and Lenis smooth scrolling, all orchestrated within Next.js for maximum performance and fluid scrollytelling.
- Advanced Text Reveals: Implements a dynamic text reveal where specific filler characters are masked. As the user scrolls, ScrollTrigger calculates the progress percentage and animates individual wrapped characters up along the Y-axis sequentially based on scroll depth.
- Performance & UX Optimizations: GSAP plugins (ScrollTrigger, CustomEase) are registered exactly once in a global client wrapper to prevent memory leaks or re-registration errors during Next.js client-side navigations.
- Scroll Synchronization: The requestAnimationFrame loop is perfectly synced between the Lenis smooth scroller and the GSAP ScrollTrigger timeline updater to eliminate jittering during heavy DOM manipulations.
- Asset & CSS Optimization: Utilizes automatic WebP conversion for heavy 3D assets, CSS Modules for complex scoped animations, and a robust design system with CSS Custom Properties to maintain a consistent aesthetic.