||

Grid Distortion

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

Distort an image through a spring-like pointer-responsive displacement grid.

grid-distortion-demo

Overview

Grid Distortion turns pointer movement into a damped displacement texture over an image. Use it for editorial covers, product artwork, or a single interactive image that rewards exploration.

Installation
npm install honestui

Usage

 
import { GridDistortion } from "honestui/shaders"

<div className="h-80 overflow-hidden rounded-xl">
  <GridDistortion
    imageSrc="/images/cover.jpg"
    grid={18}
    strength={0.22}
    relaxation={0.92}
  />
</div>

Accessibility

The canvas does not expose the source image to assistive technology. If the image is meaningful, render an equivalent semantic image or description nearby. Do not make pointer distortion the only way to discover information.

API Reference
PropTypeDefaultDescription
imageSrc*string–URL of the image used as the texture.
gridnumber15Resolution of the displacement grid.
mousenumber0.1Radius of pointer influence.
strengthnumber0.15Strength of the pointer displacement.
relaxationnumber0.9Rate at which the image settles.
classNamestring–Class for sizing and positioning the container.