(
Loading visualLoading visualLoading visualLoading visualLoading visualLoading visualLoading visualLoading visualLoading visual
)
loading.

Unlock Unlimited Access

Sign in for free to copy all GSAP components, remix full templates, and save your favorites.

Text Distortion

An interactive WebGL shader effect that transforms static typography into a fluid, morphing canvas. Moving the pointer over the text generates real-time velocity-based wave displacement coupled with warm chromatic aberration fringes across color channels. The underlying fragment shader synthesizes dynamic gradient dispersion with responsive inertia decay as cursor velocity settles. Built entirely with zero external dependencies, featuring high-DPI canvas supersampling and an automatic accessible HTML text fallback.

Text Distortion

An interactive WebGL shader effect that transforms static typography into a fluid, morphing canvas. Moving the pointer over the text generates real-time velocity-based wave displacement coupled with warm chromatic aberration fringes across color channels. The underlying fragment shader synthesizes dynamic gradient dispersion with responsive inertia decay as cursor velocity settles. Built entirely with zero external dependencies, featuring high-DPI canvas supersampling and an automatic accessible HTML text fallback.

CategoryTypography
TagWebGL, Shader, Typography, Distortion, Chromatic, Interactive
Guide: How to UseView Guide

API References

PropTypeDefault
textText string rendered onto the interactive morphing canvasGOODMOTION
textColorBase glyph fill color in hex format (e.g., #000000 or #FFFFFF)#000000
fontFamilyTypography font family string applied to the canvas textureImpact, sans-serif
fontWeightTypography font weight (e.g., 900 or 'bold')900
displacementForceStrength of fluid wave displacement driven by cursor velocity2.0
rgbShiftStrengthIntensity of chromatic aberration (RGB color dispersion)0.06
mouseRadiusInfluence radius surrounding the cursor in pixels140
decaySpeedInertia decay rate when cursor slows or exits (0.01 – 0.2)0.06
width / heightDimensions of the canvas container100% / 100%

Related components