Calb Space

Calb Space is a digital branding platform for a gamified Qur'an learning application. The project aims to redefine traditional religious education by merging modern tech aesthetics with an engaging, character-driven narrative.

The website serves as the primary touchpoint to introduce "Nura" and the "Calblings," guiding users through a seamless journey of spiritual growth through a minimalist yet highly interactive digital presence.

The core challenge was to present a comprehensive feature set without overwhelming the user. Standard long-form landing pages often suffer from "scroll fatigue." The objective was to maintain high retention by transforming the landing page into an interactive scrollytelling experience, where every scroll movement provides instant visual feedback and highlights a specific value proposition.

Before jumping into high-fidelity designs, I started with raw sketches and structural wireframes. This phase was crucial for mapping out the user journey and determining the optimal placement for each "scroll trigger."

By visualizing the grid system and content hierarchy on paper, I could experiment with different scrollytelling flows quickly, ensuring that the transition from mobile to desktop would feel completely natural and maintain the editorial aesthetic.

To establish a premium and futuristic feel, I curated a visual moodboard that focused on architectural textures and high-contrast dark themes. The goal was to move away from typical "educational" tropes and create a digital environment that feels sophisticated and focused.

This visual direction informed every decision—from the deep charcoal color palette to the choice of clean, sans-serif typography. By establishing these visual principles early, I ensured that the technical execution would perfectly align with the intended brand emotion.

To achieve high engagement, I moved away from a standard static layout and focused entirely on scroll-driven animations. My goal was to make the act of scrolling feel deeply satisfying and informative.

I engineered a seamless user journey by implementing an editorial scrollytelling approach. By treating the viewport as a stage, I ensured that every feature highlight—from the character introductions to the level progression system—was delivered with surgical precision, preventing cognitive overload and keeping the user curious about the next "unlocked" section.

To achieve a premium, high-performance feel, I implemented a combination of advanced frontend techniques:

• 1. Sticky Section Stacking: Utilized sticky positioning and Z-index layering to create a "card-pulling" effect, where new content sections slide over the previous ones, maintaining context while introducing new information.
• 2. Scroll-Driven Horizontal Motion: Integrated a viewport-locked horizontal scroll mechanism. By mapping vertical scroll progress to horizontal transforms, I transformed a traditional vertical journey into a dynamic 2D exploration.
• 3. Progressive Disclosure: Leveraged Framer Motion to orchestrate entry animations that only trigger when elements enter the viewport, ensuring the user's focus is always on the active feature.

The final solution is a high-performance branding site that functions as more than just a digital brochure. Calb Space effectively communicates its value proposition through a gamified interaction model, resulting in an interface that is both functionally efficient and emotionally resonant.

By prioritizing interaction design over static presentation, Calb Space successfully bridges the gap between functionality and engagement. I engineered an editorial scrollytelling experience to eliminate scroll fatigue, transforming a static branding site into an interactive journey with surgical precision.

This process taught me to transform the act of "reading a brochure" into "experiencing a brand." The frontend execution effectively solves the user boredom problem and creates a memorable first impression that translates into higher user interest, proving that interaction is the key to emotional resonance.