Components / SVG Filters

SVG Filters

A component that applies SVG filters to images. Features turbulence and displacement map filters.

Preview

Hover over the images to see the filter effects.

Note:The light theme is not supported in this component. Please check in dark mode for a better experience.

Hover to see the turbulence distortion effect animate smoothly.

Explore

College Dropout

Kanye West

2004

A different scale creates a more subtle wave-like effect.

Explore

Good Kid

Kendrick Lamar

2012

Displacement map creates a liquid-like distortion pattern.

Explore

Blonde

Frank Ocean

2016

Turbulence type with displacement creates organic movement.

Explore

MBDTF

Kanye West

2010

Usage

tsx

import SvgFilters from "@/components/svg-filters"

const items = [
  {
    filterType: 'turbulence',
    imageSrc: '/images/my-image.jpg',
    title: 'Hover to see the effect',
    counter: '01',
    metaTitle: 'My Title',
    location: 'Location',
    year: '2024',
    turbulenceProps: {
      type: 'fractalNoise',
      baseFrequency: '0',
      numOctaves: '1',
      scale: '250'
    }
  },
  {
    filterType: 'displacementMap',
    imageSrc: '/images/another-image.jpg',
    title: 'Different distortion effect',
    counter: '02',
    metaTitle: 'Another Title',
    location: 'Another Location',
    year: '2024',
    displacementProps: {
      type: 'fractalNoise',
      baseFrequency: '0.01 0.005',
      numOctaves: '5',
      seed: '2',
      xChannelSelector: 'R',
      yChannelSelector: 'B'
    }
  }
]

export function Example() {
  return <SvgFilters items={items} />
}

Props

Prop	Type	Default	Description
items	SvgFilterItemProps[]	required	Array of filter items to display
className	string	-	Custom class for container
contentClassName	string	-	Custom class for content grid

Item Props

Prop	Type	Description
filterType	'turbulence' \| 'displacementMap'	Type of SVG filter effect
imageSrc	string	Image URL to apply effect to
title	string	Caption title shown on hover
counter	string	Item counter/number
metaTitle	string	Title below the image
location	string	Location or subtitle text
year	string	Year or additional info
turbulenceProps	object	Configuration for turbulence filter
displacementProps	object	Configuration for displacement map

Filter Configuration

Turbulence Props

type - 'fractalNoise' or 'turbulence'
baseFrequency - Base frequency for noise
numOctaves - Number of noise octaves
scale - Displacement scale (higher = more distortion)

Displacement Props

type - 'fractalNoise' or 'turbulence'
baseFrequency - Frequency (can be 'x y')
numOctaves - Number of octaves
seed - Random seed
xChannelSelector - R, G, B, or A
yChannelSelector - R, G, B, or A

Features

SVG-based image distortion effects using native filters
Two filter types: Turbulence and Displacement Map
Smooth hover animations powered by GSAP
Caption reveal on hover with meta information
Fully responsive with staggered layouts on larger screens
Dark and light theme support
Configurable filter parameters for unique effects
Scale animation on image hover (non-Firefox browsers)

Dependencies

bash

npm install gsap

Source Code

tsx

'use client';

import Item, { SvgFilterItemProps } from './Item';
import './svg-filters.css';
import { cn } from '@/lib/utils';

export interface SvgFiltersProps {
    /** Array of items to display */
    items: Omit<SvgFilterItemProps, 'id'>[];
    /** Custom class name for the container */
    className?: string;
    /** Custom class name for the content grid */
    contentClassName?: string;
}

export default function SvgFilters({
    items,
    className,
    contentClassName,
}: SvgFiltersProps) {
    return (
        <div className={cn('svg-filters-container', className)}>
            <div className={cn('sf-content', contentClassName)}>
                {items.map((item, index) => (
                    <Item
                        key={`svg-filter-${index}`}
                        id={`distortionFilter-${index}`}
                        {...item}
                    />
                ))}
            </div>
        </div>
    );
}

// Re-export types and Item component
export { Item, type SvgFilterItemProps };