Displacement Filter

Reusable animated SVG displacement that can wrap text, icons, or any component.

Components / Displacement Filter

Filtersfilterdisplacementmotioncomposition

Reusable SVG turbulence displacement for text, icons, and component content.

Preview

Loading preview…

Usage

Reusable animated SVG displacement that can wrap text, icons, or any component.

<DisplacementFilter intensity="subtle">
  <KineticGlyph>D</KineticGlyph>
</DisplacementFilter>

<DisplacementFilter scale={10} trigger="hover">
  <Button>Distorted action</Button>
</DisplacementFilter>

Files

components/steez/DisplacementFilter.tsxcomponent

components/steez/DisplacementFilter.module.cssstyle

Install package

pnpm add @steez-ui/theme @steez-ui/icons @steez-ui/ui

import { DisplacementFilter } from "@steez-ui/ui";

Install from registry

pnpm dlx shadcn@latest add https://steez-ui-6v5.pages.dev/r-steez/displacement-filter.json

Source files install at your project root. Import styles/steez/tokens.css once in your global stylesheet or root layout. No Steez packages needed.

import { DisplacementFilter } from "<project-root>/components/steez/DisplacementFilter";

Replace <project-root> with a relative path from your file.

Copy standalone file

/copy/steez/displacement-filter.tsxLoading…

Copy the entire generated TSX file into your React project. It embeds CSS, local helpers, icons, and theme fallbacks, so no Steez npm packages are required.

Open standalone source

Kinetic Glyph

Nested contour animation for a letter, number, or icon with a soft displacement ripple.

Boiling Lines

Hand-drawn motion for artwork, SVG lines, and decorative borders.

Kinetic Swipe Text

Bold display type that snaps through a quick horizontal or vertical split.