The Garden
A high-performance premium promotional website for a luxury lounge, focused on delivering a cinematic user experience and smooth 60fps animations.
Tech Stack
React 19
Leveraged Concurrent Rendering to prioritize task execution and prevent UI freezes during heavy interface updates.
GSAP (GreenSock)
Used for building complex scroll-driven animations and providing full control over synchronized animation timelines.
Tailwind CSS v4
Enabled zero-runtime styling, reduced the final CSS bundle size, and minimized browser main-thread workload.
Features
- Advanced scroll-triggered animation timelines synchronized with user interactions.
- Premium visual experience designed from scratch around the brand identity and aesthetic inspired by Instagram.
- Clean architecture with a clear separation between animation logic and UI components.
Results
- Built the MVP version of the project independently within 2–3 days.
- Optimized rendering performance to maintain a stable 60 FPS under heavy animation workloads.
- 100% self-directed development, including project structure, branding, and product positioning.
Challenges & Solutions
- Challenge
- Performance degradation and layout thrashing caused by multiple heavy animations running simultaneously during scroll interactions.
- Solution
- Profiled performance using Chrome DevTools and replaced layout-affecting properties with GPU-accelerated transforms and opacity-based animations.
What I Learned
- Gained hands-on experience with advanced browser rendering performance profiling.
- Learned how to translate the atmosphere of a physical business into a compelling digital brand experience.
- Improved my ability to rapidly build and launch viable MVPs under tight deadlines.