Image Grid Distortion

Interactive tile-aperture matrix distortion that warps internal photographic textures under cursor motion.

Interactive Playground

Move cursor over canvas to interact

Sample Artwork

Custom URL

Grid Divisions11×11

Repulsion Radius120px

Distortion Strength0.3

Spring Relaxation0.04

Cursor Physics

Anatomy

import { ImageGridDistortion } from "@shavin/fx";

<div className="relative w-full h-80 rounded-[var(--radius-panel)] overflow-hidden">
  <ImageGridDistortion
    src="/assets/hq_marshall.jpg"
    grid={11}
    mouseRadius={120}
    strength={0.3}
    relaxation={0.04}
    className="w-full h-full"
  />
</div>

Examples

Standard Aperture Tile Distortion

Subdivides artwork into an 11×11 tile matrix with spring-damped internal displacement.

<div className="relative w-full h-72 rounded-[var(--radius-panel)] overflow-hidden border border-hairline">
  <ImageGridDistortion
    src="/assets/hq_marshall.jpg"
    grid={11}
    mouseRadius={120}
    strength={0.3}
    relaxation={0.04}
    className="w-full h-full"
  />
</div>

High Density Micro-Tile Matrix

Fine 18×18 tile aperture grid creating detailed mosaic wave distortions.

<div className="relative w-full h-72 rounded-[var(--radius-panel)] overflow-hidden border border-hairline">
  <ImageGridDistortion
    src="/assets/studio.jpg"
    grid={18}
    mouseRadius={220}
    strength={0.8}
    relaxation={0.12}
    className="w-full h-full"
  />
</div>

Props Reference

Prop	Type	Default	Description
src	string \| ThemedValue<string>	"/assets/hq_marshall.jpg"	Image source path or { light, dark } themed object.
grid	number	11	Number of grid divisions across the shorter dimension.
cellSize	number	undefined	Pixel cell size (alternative to grid prop).
mouseRadius	number	120	Cursor interaction influence radius in pixels.
strength	number	0.3	Displacement push force multiplier.
relaxation	number	0.04	Spring physics relaxation factor.
waveSpeed	number	0.0	Ambient wave speed (set > 0 for autonomous animation).
waveAmplitude	number	0.0	Ambient wave displacement height.
interactive	boolean	true	Enables pointer repulsion interaction.