ADVANCED INTERACTIVE DEVELOPMENT

ENGINEERING A MOTION-FIRST DIGITAL IDENTITY

Orchestrating a cinematic web experience: From starfield projections to character-driven storytelling.

Live Project

Experience It Live

See this project in action. Explore the full functionality and design in a live environment.

haleeftech.com/

Visit Live Site

Haleef Tech | Digital Identity & Motion Ecosystem preview

Live

•Click to explore

Haleef Tech | Digital Identity & Motion Ecosystem hero image

Overview

This project represents a masterclass in 'Creative Engineering', where code drives narrative. The core challenge was to build a 'Convergence Engine'—a complex sequence where two characters (A Saudi Man and a Robot) traverse a 3D starfield tunnel to meet. To achieve this, I built a custom 'Handshake Lab' (debug tool) to visually manipulate the X/Y/Rotation matrices of the assets in real-time, exporting the precise values to the GSAP timeline. The architecture uses a 'Dual-Mode' rendering system: Desktop experiences feature pinned, stacking cards and vertical infinite loops, while Mobile experiences gracefully fallback to natural touch-driven scrolls, guarded by a custom 'Landscape Protection' layer to ensure optimal viewing.

Key Achievements

Engineered a '3D Starfield Projection' engine: Utilizing HTML5 Canvas and RequestAnimationFrame, I built a depth-based particle system where stars propagate along the Z-axis (z -= speed), creating a warp-speed tunnel effect that reacts to the user's scroll position via GSAP. I implemented the perspective projection formula `x = (star.x / star.z) * width + width / 2` to simulate true depth.

Developed the 'Convergence Timeline' architecture: A complex GSAP implementation that synchronizes text blurring/scaling (3D fly-through effect) with character movements. The characters move based on calculated steps: `y: -180 + (i + 1) * (165 / texts.length)%` with alternating rotations `i % 2 === 0 ? 3 : -3`, ensuring perfect pacing regardless of content length.

Built a 'Handshake Lab' Debugger: To solve the alignment challenge of the Man/Robot handshake, I created a dedicated internal tool ([HandshakeTester.tsx](cci:7://file:///c:/Users/NV_USER/Desktop/haleef/app/components/HandshakeTester.tsx:0:0-0:0)) with GUI sliders. This allowed for real-time manipulation of translation and rotation values, exporting the final coordinates directly to the production code.

Implemented 'Dual-Mode Stacking' logic: The Solutions section uses `gsap.matchMedia()` to completely swap logic. On Desktop (>1024px), it calculates cumulative heights (`currentY += offsetHeight + gap`) to create a 'Pin & Stack' effect where cards slide over each other using calculated z-indexes. On mobile, it reverts to a 'Natural Flow' with simple scroll-triggered fade-ins.

Designed a 'Zero-Gravity' Navigation system: The interface features a floating capsule that 'bobs' using a continuous sine-wave animation (`yoyo: true`, `repeat: -1`). It includes velocity-aware visibility (hiding on fast scroll down) and utilizes Lenis for clean, custom-eased anchor scrolling: `Math.min(1, 1.001 - Math.pow(2, -10 * t))`.

Created a 'Conflict Resolution' visualizer: A split-screen architecture featuring opposing infinite marquees. The 'Problems' loop flows upwards (Red), while 'Solutions' flows downwards (Blue), visually representing the transformation of chaos into order. I added a responsive conditional layout where loops stack horizontally on mobile and vertically on desktop.

Integrated 'Landscape Guard' protection: To preserve the integrity of the vertical storytelling experience on mobile, a dedicated guard component detects `landscape` orientation via media queries (`hidden landscape:flex`) and renders a 'Please Rotate' overlay with a gyroscope animation.