About this Component
Create cinematic, high-end transitions with a WebGL-powered image expansion effect.
This component transforms any image into a fullscreen experience using smooth GSAP animation combined with real-time WebGL rendering. As the image expands, a subtle wave distortion adds depth and fluidity, making the interaction feel premium and immersive.
You can trigger the transition in two ways:
Click Mode for direct interaction
Scroll Trigger Mode for storytelling-based layouts
Everything is fully responsive by design, adapting seamlessly across desktop, tablet, and mobile without breaking layout or performance.
No complex setup. No external configuration.
Just drop it in, upload your image, and it works.
Perfect For
Hero image transitions
Portfolio highlights
Case study reveals
Product showcases
Storytelling websites
Luxury or premium UI experiences
Key Features
Fully responsive across all breakpoints
WebGL-powered fullscreen image transition
Smooth GSAP-based animation
Click-to-open and click-to-close interaction
Scroll-triggered open and close states
Custom trigger frame targeting (Framer layer names)
Wave distortion effect during transition
Adjustable animation speed and easing
High-performance rendering with pixel ratio control
How to Use
Drop the component into your layout
Upload your image
Enable Click Mode or Scroll Trigger Mode
Assign trigger frame names (for scroll mode)
Adjust speed, easing, and distortion strength
Important Note
This component uses WebGL for rendering. Performance may vary depending on device capability, but it has been optimized for smooth behavior across modern browsers.
Fully responsive and tested across breakpoints, making it suitable for production use.
Questions? Reach out at hasanwali6890@gmail.com
Refund Policy
All sales are final upon purchase as this is a non-tangible digital product. A refund is offered only if the component suffers a critical technical failure that prevents its core function and cannot be resolved within a reasonable timeframe. Refunds are not issued for buyer's remorse, aesthetic preference, or modifications made after purchase. Report confirmed technical failures with evidence within 14 days of purchase.
Hasan Wali
