25+ Landing Pages & Gamification Campaigns

Project Overview

During my tenure as a front end and full stack developer at Harmony Advertising Agency, I engineered and deployed more than 25 high-traffic interactive landing pages and gamification marketing initiatives for leading national consumer brands, including Snappfood, Kalleh, Snowa, Asan Pardakht (AP), and Divar. These digital campaigns were designed to drive viral customer engagement, boost promotional voucher redemption, and capture high-intent consumer leads during major retail shopping seasons and product launches.

The Challenge: High-Frequency Interactivity Under Millions of Concurrent Hits

Consumer marketing campaigns for tier-one brands pose rigorous engineering demands that differ fundamentally from standard web development:

• Sudden, massive traffic spikes: Campaigns were broadcasted simultaneously across nationwide television ads, SMS marketing blasts, in-app push alerts, and high-reach influencer channels. Landing pages had to handle massive concurrent visitor surges without crashing or degrading user experience.
• Mobile hardware constraints: Gamified mechanics (including 3D visualizers, rotating fortune wheels, particle celebrations, and interactive physics) had to run smoothly at 60 FPS across consumer mobile devices, including older mid-range and budget smartphones with limited WebGL and GPU capacity.
• Conversion-critical responsiveness: In promotional marketing, any rendering lag, slow asset download, or unresponsive touch trigger directly translates to abandoned sessions and lost lead capture.

Interactive Gamification Mechanics & Motion Architecture

We engineered an array of tailored gamification concepts that transformed passive marketing pages into rewarding interactive experiences:

• Spin-to-win fortune wheels: Engineered mathematical deceleration algorithms using GSAP timeline tweens, creating realistic mechanical wheel-spinning physics with randomized yet server-validated promotional reward outcomes.
• Interactive 3D product visualizers: Integrated Three.js to render interactive 3D product models (such as 360-degree home appliance interactive models for Snowa and packaging reveals for Kalleh), allowing consumers to rotate, zoom, and inspect product details in real-time WebGL.
• Marketing diagnostic quizzes: Built step-by-step interactive questionnaire funnels with Framer Motion spring physics, diagnosing user preferences to deliver personalized product selections and targeted discount vouchers.
• Time-sensitive promotional countdowns: Developed synchronized countdown modules with instant voucher copying, gamified scratch cards, and real-time remaining coupon counters to foster purchase urgency.

Performance Optimization: Three.js Memory Management & 60 FPS Mobile Execution

To ensure complex WebGL and motion graphics maintained smooth 60fps framerates without causing device thermal throttling:

• Low-poly geometry & texture compression: 3D models were aggressively decimate-modeled and baked with optimized UV maps. Textures were compressed into modern WebP formats and texture atlases to fit strictly within constrained mobile VRAM limits.
• Strict WebGL memory lifecycle: Implemented rigorous cleanup routines across all Three.js scenes. When users navigate between game steps or close modal states, geometries (geometry.dispose()), materials (material.dispose()), and textures are explicitly purged from GPU memory to prevent memory leaks during repeated game plays.
• GPU-accelerated CSS transforms: All 2D motion timelines were restricted to composite-only properties (transform and opacity) with translate3d GPU hardware acceleration, eliminating layout recalculations and browser paint thrashing.

High-Concurrency Infrastructure & Asset Delivery

To guarantee rock-solid uptime during nationwide marketing blitzes, asset delivery was engineered for zero bottlenecks:

• Decoupled static edge delivery: Landing page bundles, vector graphics, and 3D assets were distributed via global CDN edge caches. Visitors interacted with pre-built static assets, eliminating web server load.
• Lightweight API communication: Game outcome validation, telephone lead registration, and discount code generation communicated through lightweight, cached micro-endpoints designed for sub-100ms response times.
• Asset preloading & dynamic code splitting: Critical game graphics were preloaded during the initial splash view, while non-critical assets and congratulatory celebration modules were asynchronously imported on demand.

Key Measured Outcomes

• 25% to 30% increase in CTR & engagement: Gamified interactive elements delivered an average 25% to 30% higher click-through and form completion rate compared to static promotional pages.
• Rock-solid campaign uptime: Successfully sustained traffic bursts exceeding tens of thousands of concurrent visitors during nationwide marketing broadcasts.
• Butter-smooth 60 FPS across mobile: Low-poly optimization and strict GPU memory disposal guaranteed fluid animations even on low-tier mobile hardware.
• 25+ successful brand rollouts: Established a battle-tested, modular interactive framework that enabled rapid turnarounds for subsequent brand campaigns with zero regressions.