SearchF
April 9, 2026/Simple/Cursor Effects

Refracted Glass

Glass distortion effect rendered entirely with SVG filters — no libraries or external services. feTurbulence generates organic noise, feDisplacementMap warps the image through it, and an animated baseFrequency gives the glass a slow, living shift over time.

Live Demo ↗

Source

import RefractedGlass from "./index.jsx";
import styles from "./demo.module.css";

export default function RefractedGlassDemo() {
  return (
    <div className={styles.demo}>
      <img
        src="/demo-assets/models/model3.png"
        alt=""
        className={styles.bg}
        aria-hidden="true"
      />
      <div className={styles.overlay} />
      <div className={styles.content}>
        <div className={styles.text}>
          <p className={styles.label}>SVG — Strip Distortion</p>
          <h1 className={styles.heading}>Refracted<br />Glass</h1>
        </div>
        <RefractedGlass />
      </div>
    </div>
  );
}

Related Components

4W AGO
Split Vignettecursor-effects
1MO AGO
Cursor Repel Textcursor-effects
3MO AGO
Cursor Hover Labelcursor-effects