Case Study
Weborama APTO

HUAWEI

Color Takes Over

Immersive color-interactive experience allowing users to explore device variants with 3D-like rotations and dynamic backgrounds

<150KB
Optimized Size
52%
Engagement Lift
78%
Viewability

>THE_CHALLENGE

Huawei wanted to showcase their new P30 Pro smartphone' vibrant color variants through an immersive digital campaign that would highlight the premium design and color technology.

The challenge was to create an engaging, interactive experience that would allow users to explore different color options while maintaining optimal file size for fast loading and high viewability rates across all devices.

Key Challenges

  • Showcase vibrant color variants effectively
  • Create 3D-like rotation experience
  • Maintain file size under 150KB
  • Cross-platform consistency

>THE_SOLUTION

Interactive Color Experience

Developed an immersive interactive experience using advanced SVG masking and CSS transforms to create a 3D-like rotation effect. Users could explore different color variants with smooth animations and dynamic background color transitions that matched the selected device.

▸Advanced SVG masking technique
▸3D CSS transforms
▸Dynamic color transitions
▸Interactive hotspots
▸Smooth GSAP animations
▸Mobile-optimized touch controls

Technical Innovation

Graphics
  • SVG Masking
  • Color Theory
  • Vector Graphics
  • Optimized Assets
Animation
  • 3D CSS Transforms
  • GSAP Timeline
  • WebGL Effects
  • Smooth Transitions
Optimization
  • File Size <150KB
  • Mobile First
  • Fast Loading
  • Cross-platform

>THE_RESULTS

Campaign Performance

400%
Product interaction increase
95%
Completion rate
78%
Viewability rate achieved

Technical Achievements

Optimized File Size
Under 150KB while maintaining quality
Advanced SVG Animations
Innovative masking techniques
Cross-Platform Consistency
Seamless experience across devices
52% Engagement Lift
Significantly above benchmarks

>TECH_STACK

[Design_Tokens][Interaction_Design][Micro_Animations][Scrollytelling][Color_Systems][Atomic_Design][Motion_UI][Performance_Tuning][Responsive_Design][Touch_Interactions]

SYSTEM_ARCHITECTURE_DIAGRAM

ASSET PREP
SVG PatternsPhone images embedded as SVG patterns. CSS masks define visibility regions.
ANIMATION
GSAP TimelineOrchestrates color transitions, gradient shifts, and opacity changes in sync.
INTERACTION
User ControlsMouse movement triggers dynamic gradient shifts and 3D phone rotations.
RENDERING
GPU AccelerationCSS transforms (rotate, scale) offloaded to GPU for 60fps performance.
GradientAnimation.js2.1kb
// GSAP3 Timeline with dynamic gradient shifts const tl = gsap.timeline({ delay: 0.5 }); // Animate gradient stops with stagger tl.to("#phone_gradient stop", { duration: 1.6, stopColor: (i) => { const colors = [ 'hsl(212, 30%, 8%)', 'hsl(219, 29%, 9%)', 'hsl(237, 30%, 12%)', 'hsl(248, 38%, 16%)', 'hsl(253, 45%, 22%)', 'hsl(240, 51%, 48%)', 'hsl(204, 95%, 60%)', 'hsl(197, 94%, 79%)' ]; return colors[i] || colors[0]; }, stagger: 0.2, ease: "sine.inOut" }); // Mouse interaction with 3D transforms const handleMouseMove = (e) => { const xPos = (e.clientX / banner.clientWidth) - 0.5; const yPos = (e.clientY / banner.clientHeight) - 0.5; gsap.to("#phone_back", { duration: 0.3, rotationY: 10 * xPos, rotationX: 10 * yPos, ease: "power2.inOut", transformPerspective: 600 }); };

AUTOMATION_ARTIFACT

The whole concept for interactive color started with this little experiment. I wanted to capture the iridescence quality of Huawei's phones, and to see what was possible with SVG in terms of masking, color and performance. It turns out you can do a LOT. Making use of SVG's masking properties, I was able to use optimized jpg images as transparent, add gradients with blending modes that shift colors, and finally, make the phone interact with the mouse.

./BACK_TO_HOME