Wensity

Refraction Glass Container

Pro

Real refraction, where feDisplacementMap warps the actual pixels sitting behind the card instead of blurring them.

css 3d3dglassrefractioncontainerdepthblur
Refraction Glass Container component preview

Overview

Refraction Glass Container is a React and Tailwind CSS glassmorphism card that bends the content behind it instead of only blurring it, in Next.js or any React app. An inline SVG filter of turbulence, displacement, and blur is applied through backdrop-filter, so the pixels under the card are physically warped like frosted glass. Animated blobs sit behind it by default so the refraction reads, and distortion, blur, and blob colors are props. Reduced motion stills the blobs. Browsers without SVG filter support in backdrop-filter fall back to the plain blur, so check Safari and Firefox.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add refraction-glass-container

Usage

Import RefractionGlassContainer from @/components/wensity/refraction-glass-container and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
import { RefractionGlassContainer } from "@/components/wensity/refraction-glass-container";


export default function Example() {
  return (
    <RefractionGlassContainer width={420} minHeight={260} distortion={14} blur={14}>
      <div className="font-display text-xl font-bold">Bent light, not blur.</div>
      <p className="mt-2 text-sm opacity-80">
        SVG feDisplacementMap warps every pixel behind this card.
      </p>
    </RefractionGlassContainer>
  );
}

Props

PropTypeDefaultDescription
childrenReact.ReactNode-Content rendered inside the glass card.
widthnumber | string380Card width.
minHeightnumber220Card minimum height.
distortionnumber14Strength of the refraction warp in pixels.
blurnumber14Backdrop blur strength in pixels.
paddingnumber | string24Inner padding.
showBlobsbooleantrueRender the animated blobs behind the glass.
blobColors[string, string, string]-Override blob colours.
backgroundstring-Background tint behind blobs.

Related components

  • Split-Flap Display component preview

    Split-Flap Display

    A ceramic and graphite split-flap device that ripples each flap into your message.

  • Interactive 3D Globe component preview

    Interactive 3D Globe

    A 3D Earth lit day and night from the real sun position, wrapped in a soft atmosphere, with smooth drag-to-orbit controls.

  • Animated Code Diff Viewer component preview

    Animated Code Diff Viewer

    Inline or toggled code diffs rendered inside the same polished code block frame, flipping between before and after.

  • Animated Terminal component preview

    Animated Terminal

    A terminal UI with self-typing commands, CRT phosphor glow and scanlines, streaming output that never re-renders a line.

Featured in React 3D components.