Overview
Kafu is Oman's first digital bank, designed to provide a modern, fast, and user-friendly banking experience entirely online. The design was crafted by a Ukrainian company, and the development was handled by Codevative. As a frontend developer on this project, I built the website using Next.js with server-side rendering for performance and SEO, and integrated a headless CMS (Strapi) to enable the marketing team to easily manage content. For enhanced visual appeal, I implemented scroll-based and interactive animations using GSAP, Framer Motion, and Lottie, ensuring smooth transitions and engaging motion effects. The website is fully responsive, supports English and Arabic with RTL layout, and is optimized for a modern fintech audience.
Challenge & Solution
Challenges
- Animating complex SVG vertical lines with a flat base using GSAP ScrollTrigger (the line growing effect)
- Ensuring responsive design consistency across devices and screen sizes
- Integrating Strapi CMS for seamless marketing content updates
- Delivering a fully functional, animated, and CMS-powered site within a 1-month deadline
Solution
I delivered a Next.js application with SSR and App Router for performance and SEO, Strapi headless CMS for content management, and Tailwind CSS for styling. GSAP ScrollTrigger was used to create the distinctive vertical line growth animations, while Framer Motion and Lottie added interactive and micro-animations throughout the site. i18n with RTL support ensured a smooth bilingual experience for English and Arabic users.
Server-side rendering for performance and SEO.
Scroll-triggered and interactive motion effects.
Headless CMS for marketing content management.
Full English and Arabic with RTL layout.
Screens
Preview of the Kafu website (not yet live). Hover to scroll through each screen.
Key Features
- Server-side rendering for performance and SEO
- Headless CMS integration with Strapi
- Scroll-triggered animations with GSAP
- Interactive motion effects with Framer Motion and Lottie
- Full English and Arabic support with RTL layout
- Responsive design for all devices
- Dynamic API-driven content management
- Optimized for fast loading and smooth user experience
My Role
- Built the Kafu website as frontend developer using Next.js with SSR and App Router.
- Integrated Strapi headless CMS for content management.
- Implemented scroll-triggered animations with GSAP ScrollTrigger, including the complex vertical line growth effect.
- Added interactive motion effects with Framer Motion and Lottie.
- Styled with Tailwind CSS for a modern, responsive layout.
- Implemented i18n localization (English & Arabic) with RTL support.
- Optimized performance for animation-heavy pages.
Tech Stack
Key Learnings
- Advanced GSAP ScrollTrigger animation techniques
- Best practices for RTL support in Next.js
- Headless CMS integration with Next.js and API-driven workflows
- Performance optimization for animation-heavy websites
Deliverables
- Next.js website with SSR and App Router
- Strapi CMS integration
- GSAP, Framer Motion, and Lottie animations
- i18n localization (English & Arabic RTL)
- Responsive design
- Deployment on AWS/Vercel
Project: Kafu Website | Industry: Fintech / Digital Banking | Duration: 1.5 months | Status: Development
