A collection of premium interactive effects inspired by Spline community files. Each effect is a self-contained WebGL shader — drop it into any web project.
Each one is a single HTML file. Zero dependencies. WebGL2 with WebGL1 fallback. 60fps.
Text distorts as if viewed through a glass sphere. Chromatic aberration, ripple rings, and edge glow follow the cursor.
Text made of molten mercury. Metaball fluid simulation with specular highlights and rainbow iridescence at the edges.
Diffraction grating effect that shifts rainbow colors based on mouse position. Simulates light hitting a hologram surface.
12,000 particles form text at rest. Mouse proximity pushes them away with physics. Springs pull them back into shape.
Each effect follows the same architecture pattern
Typography is rendered to an offscreen Canvas2D with gradients, glows, and decorative elements. This becomes a WebGL texture.
A fullscreen quad runs a fragment shader that samples the texture with distorted UV coordinates. The distortion is computed per-pixel based on mouse position, time, and noise functions.
Vignette, film grain, scanlines, and color grading are applied in the same pass. No multi-pass needed — everything happens in one draw call.
Each effect is a single HTML file with zero dependencies. Copy the shader code, adapt the texture generation, and integrate into React, Vue, or vanilla projects.