Skip to content

component

JellyImage

By Tri Dang

Details

Summary

Adaptive WebGL Image Distortion

Description

1. Animation Toggle Purpose : The master switch for the WebGL engine. Usage : Turn it OFF on mobile breakpoints or low-end devices to instantly fallback to a standard static image, saving 100% of GPU resources. 2. Performance Mode (Optimization) High Perf (Recommended) : Uses smart "Intersection Sensing." The animation only runs when the image is visible on the screen. Best for long landing pages with multiple distorted images. Ultra Smooth : Keeps the engine active at all times. Ideal for hero sections where you want an instantaneous reaction to the very first pixel of scrolling. 3. Start Delay (s) Purpose : Prevents "Animation Lag" during page load. Usage : If your site has a loading screen or entry animations, set this to 1.5s - 2.0s . The component will stay as a static image during the delay (keeping your loader smooth) and then elegantly fade into the WebGL effect. Set to 0 for instant activation. 4. Intensity & Fluidity Intensity : Controls how much the image "bends" or "warps" during the scroll. Higher values create a more dramatic liquid effect. Fluidity (Speed) : Adjusts the physics of the distortion. Lower values make the warp feel heavy and viscous, while higher values make it feel light and reactive. If you need any help with your purchased component, please contact me at dn.tri106@gmail.com or My X account.

Introduction

Adaptive WebGL Image Distortion

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600163938/148/228/309/79/15
  • All · #6319