JellyImage

JellyImage
JellyImage

About JellyImage

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.

From Tri Dang

Clip Image
Grid Hover Effect
Horizontal Scroll 5S

Related Components

SpectraNoise
Image To ASCII
TV Glitch & Noise
Ripple