Shavin UI Docs & Component Gallery

Interactive Playground

Move cursor over canvas to interact

Grid Style

Color Token

Cell Size36px

Repulsion Radius180px

Repulsion Strength0.6

Spring Relaxation0.08

Ambient Wave Speed0.2x

Cursor Physics

Anatomy

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

<div className="relative w-full h-80 rounded-[var(--radius-panel)] overflow-hidden">
  <GridDistortion
    gridStyle="lines"
    cellSize={36}
    mouseRadius={180}
    strength={0.6}
    relaxation={0.08}
    waveSpeed={0.2}
    interactive={true}
    color="theme"
    className="w-full h-full"
  />
</div>

Examples

Technical Blueprint Crosshairs

High-precision CAD-style coordinate grid with glowing accent response upon vertex displacement.

<div className="relative w-full h-64 rounded-[var(--radius-panel)] overflow-hidden border border-hairline bg-surface">
  <GridDistortion
    gridStyle="crosshairs"
    cellSize={40}
    mouseRadius={160}
    strength={0.7}
    relaxation={0.09}
    waveSpeed={0.15}
    color="theme"
    className="w-full h-full"
  />
</div>

Isometric Matrix Mesh

3D tilted diamond perspective mesh with harmonic ambient wave ripple.

<div className="relative w-full h-64 rounded-[var(--radius-panel)] overflow-hidden border border-hairline bg-surface">
  <GridDistortion
    gridStyle="isometric"
    cellSize={32}
    mouseRadius={200}
    strength={0.5}
    relaxation={0.06}
    waveSpeed={0.3}
    waveAmplitude={8}
    color="theme"
    className="w-full h-full"
  />
</div>

Dotted Coordinate Matrix

Minimal high-density dot lattice with smooth spring-damped pointer repulsion.

<div className="relative w-full h-64 rounded-[var(--radius-panel)] overflow-hidden border border-hairline bg-surface">
  <GridDistortion
    gridStyle="dots"
    cellSize={28}
    mouseRadius={160}
    strength={0.8}
    relaxation={0.09}
    color="accent"
    className="w-full h-full"
  />
</div>

Props Reference

Prop	Type	Default	Description
gridStyle	"lines" \| "crosshairs" \| "dots" \| "isometric"	"lines"	Visual layout style of grid geometry.
cellSize	number	36	Grid step spacing in pixels.
color	"theme" \| "accent" \| "fg" \| "subtle" \| string	"theme"	Color token or custom hex string.
mouseRadius	number	180	Radius of cursor repulsion field in pixels.
strength	number	0.6	Displacement shift force multiplier.
relaxation	number	0.08	Spring return stiffness factor (0.01 to 0.25).
waveSpeed	number	0.2	Speed of ambient background sinusoidal ripple (0 disables).
waveAmplitude	number	6	Height of ambient wave displacement in pixels.
interactive	boolean	true	Enables pointer interaction.