FIX VISION: HIGH-OCTANE CREATIVE ENGINEERING FOR THE ARAB WORLD
Engineering an Awwwards-level interactive web experience — from zero-layout-shift sequential pinning and 3D card fan flipping to trigonometric SVG path scrubbing and touch-aware auto-carousels.
The problem worth engineering
Fix Vision is an interactive digital agency web experience engineered Arabic-first for modern commerce leaders. Built with Next.js 16 (React 19) and TypeScript, the platform combines award-level motion design with rigorous engineering standards: sequential zero-flicker ScrollTrigger pinning, 3D perspective card-fanning animations, trigonometric SVG circumference scrubbing, and custom text-splitting algorithms that honor complex Arabic typography and cursive connections.
The hard problems were not basic layout styling — they were solving sequential GSAP pinning jumps where multiple pinned sections interact, eliminating Flash of Unstyled Content (FOUC) during mobile 3D rotations, synchronizing multi-curve SVG path draw animations directly within viewport entry bounds, and orchestrating touch-resilient auto-sliders with proximity opacity gradients. I architected the platform around mathematical precision (percentage-based circle nodes, debounced refresh observers) and uncompromising performance (60fps animation budgets, GPU-accelerated compositing, zero layout shifts).
- Crafted an Arabic-First Hero with Cinematic 3D Presence: Large IBM Plex Sans Arabic headline, constellation mesh background, and a stylized architectural 3D core with a glowing red vertical accent — engineered so typography and motion never fight each other on first paint.
- Designed Stacking Deck Physics for Problem Cards: Desktop cards stack over each other like physical playing cards using a scrubbed timeline with custom scale degradation (1.0 → 0.94 → 0.88 → 0.82) and opacity steps (1.0 → 0.6 → 0.3 → 0.1), paired with a seamless 4-phase snap mechanism that locks onto the active card smoothly.
- Built Viewport-Synchronized SVG Laser Convergence Animation: In the methodology section, 3 SVG laser paths converge into a pulsing concentric glow circle. I bound the ScrollTrigger directly to the diagram element with a top 75% trigger to guarantee curves draw in full view in front of the user instead of firing prematurely above the fold, followed by a back.out(1.6) target pop-in and infinite ambient pulse.
How it was built, system by system
Interface documentation
Click any screen to inspect it full size.
Related Projects
Explore more of my work
Goods&U | Full-Stack Bilingual (Arabic-RTL) E-Commerce Platform
Polary | Cinematic 3D Narrative Landing Experience
Diagnostics Elite | Cinematic Bilingual MedTech Platform (WebGL + Sanity)
IQ Academy | Full-Stack Arabic EdTech Learning Platform
TMT Eye | Enterprise Intelligent Transport Operating System
BioBlob | Real-Time Bio-Inspired Simulation Engine
Goods&U | Full-Stack Bilingual (Arabic-RTL) E-Commerce Platform
Polary | Cinematic 3D Narrative Landing Experience
Diagnostics Elite | Cinematic Bilingual MedTech Platform (WebGL + Sanity)
IQ Academy | Full-Stack Arabic EdTech Learning Platform
TMT Eye | Enterprise Intelligent Transport Operating System
